前言

Web Component不是新东西，几年前的技术，但是受限于浏览器兼容性，一直没有大规模应用在项目里，直到现在（2018年年末），除IE仍不支持之外，其它主流浏览器都支持Web Component。

Web Component不是一个东西，它分为四部分，分别是

template——模板
HTML import——HTML导入
Shadow DOM——影子DOM
Custom Elements——自定义元素

template

前端模板也不是个新概念，templatejs、ejs等模板引擎早就将模板的概念深入人心，在纯HTML世界里，我们通常把模板写在script标签里，将type改为text/html，避免浏览器解析，像这样

<script type="text/html">

	<div>

		<title>标题</title>

		<content>内容</content>

	</div>

</script>

template则是用标签包裹模板内容，不同之处在于获取模板内容的方式，script模板是通过获取script的innerHTML来获取，template则是获取读取template节点的content属性来获取

// 模板文件

<template>

	<div>

		<title>标题</title>

		<content>内容</content>

	</div>

</template>


// 获取模板内容

console.log(document.querySelector('template').content);

HTML import

在此之前，HTML导入一般用iframe嵌套或依赖后端又或是其他库，HTML import为原生HTML提供了导入HTML文件的功能，使用link标签，rel设置为import，href为被导入文件路径

<link rel="import" href="header.html">

HTML导入之后不会立即被浏览器解析并渲染，需要手动插入到DOM节点，这点跟css不同

// header.html

<h2 id="header">这是公共header</h2>

<h2 id="footer">这是公共footer</h2>

// index.html

<html>

	<head>

		<link rel="import" href="header.html">

	</head>

	<body>

		<content>内容区</content>

		<script type="text/javascript">

			let importDom = document.querySelector('link[href="header.html"]').import;

			let content = document.querySelector('content');

			let header = importDom.querySelector('#header');

			let footer = importDom.querySelector('#footer');

			document.body.insertBefore(header, content);

			document.body.appendChild(footer);

		</script>

	</body>

</html>

最终渲染结果

这是公共header

内容区

这是公共footer

Web Component的更多相关文章

  1. Web Component 文章

    周末无意中了解了Web Component的概念. http://blog.amowu.com/2013/06/web-components.html http://www.v2ex.com/t/69 ...

  2. 示例可重用的web component方式组织angular应用模块

    在online web应用中,经常有这样的需求,能够让用户通过浏览器来输入代码,同时能够根据不同的代码来做语法高亮.大家已知有很多相应的javascript库来实现语法高亮的功能,比如codemirr ...

  3. Web Component总结

    Web Component 一个Web组件通常由四个部分组成:模板.Shadow DOM.自定义元素与打包,其中Shadow DOM解决了组件在页面中的封装问题 Shadow DOM 有shadow ...

  4. Salesforce知识整理（一）之Lightning Web Component Tools

    目录 LWC知识整理(一) 工具 Salesforce CLI Visual Studio Code(VS Code) Developer Hub(Dev Hub) 开启Dev Hub 相关资料 茶余 ...

  5. Web Component探索

    概述 各种网站往往需要一些相同的模块,比如日历.调色板等等,这种模块就被称为“组件”(component).Web Component就是网页组件式开发的技术规范. 采用组件进行网站开发,有很多优点. ...

  6. angular custom Element 自定义web component

    angular 自定义web组件: 首先创建一个名为myCustom的组件. 引入app.module: ... import {customComponent} from ' ./myCustom. ...

  7. amazeui学习笔记二（进阶开发2）--Web组件简介Web Component

    amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...

  8. 使用纯粹的JS构建 Web Component

    原文链接:https://ayushgp.github.io/htm...译者:阿里云 - 也树 Web Component 出现有一阵子了. Google 费了很大力气去推动它更广泛的应用,但是除 ...

  9. how to create one single-file Web Component just using the HTML, CSS, JavaScript

    how to create one single-file Web Component just using the HTML, CSS, JavaScript web components html ...

随机推荐

  1. Confluence 6 数据库整合有关你数据库的大小写敏感问题

    'Collation' 是数据如何被存储和比较的规则.大小写是否敏感是有关字符集设置的一个方面.其他大小写敏感的方面有 kana (Japanese script)和宽度(单字节对比双字节长度). 设 ...

  2. Swift 新增fileprivate 详解

    以前项目中只要用了private  那么在同一个文件同一个类中还是能访问的(比如一个类中写了一个extension) swift3.0现在不行了 新增了一个fileprivate 的访问控制 以前的p ...

  3. vue.js 入门学习

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. D3.js+Es6+webpack构建人物关系图(力导向图)，动态更新数据，点击增加节点，拖拽增加连线...

    觉得不错的麻烦加个Star:https://github.com/zhangzn3/D3-Es6 在线预览地址:https://zhangzn3.github.io/D3-Es6 功能列表:1. 增加 ...

  5. rbac（基于角色权限控制）-------权限管理

    权限管理 创建一个rbac和app的应用,这个rbac主要是用来存放权限的,全称叫做基于角色权限控制 一.先看配置文件合适不,给创建的rbac在配置文件里面设置一下 找到INSTALLED_APPS= ...

  6. du命令

    选项 例1:显示单个文件的大小(默认单位K) [root@zabbix alertscripts]# du -h sendim.py 4.0k sendim.py 例2:显示某个目录的总大小 例3:输 ...

  7. springboot多环境（dev、test、prod）配置

    propertiest配置格式在Spring Boot中多环境配置文件名需要满足application-{profile}.properties的格式,其中{profile}对应你的环境标识,比如: ...

  8. Play框架--初学笔记

    目录结构 web_app 根目录 | sbt SBT Unix 批处理脚本用于启动sbt-launch.jar | sbt.bat SBT Windows 批处理脚本用于启动sbt-launch.ja ...

  9. GnuPGP介绍

    PGP(Pretty Good Privacy的首字母):PGP公司的加密.签名工具套件,使用了商业版本的IDEA算法,并集成了有商业版权的PGPdisk工具. GnuPG(GNU Privacy G ...

  10. Stuck on "Authenticating with iTunes Store"

    https://forums.developer.apple.com/thread/76803 Try this, it fixed it for me. Open Terminal and run: ...