WebComponent

WebComponent

WebComponent可自定义标签，在caniuse网站上看，chrome浏览器是在2018年才完全支持。

webComponent实现自定义标签封装是由三个技术组成:

Custome Element：自定义标签、行为
Shadow DOM:控制元素私有性
HTML Template：标记模板，可为自定义模板结构重复使用

Custome Element

自定义元素只需两个步骤

# 1、创建继承HTMLElement的类
class SomeTag extends HTMLElement {
	constructor() {
		super();//必须要手动调用父类构造
	}
}

# 2、注册标签， 第三个参数可选 {extends: 'div'}
customElements.define('some-tag', SomeTag);

Shadow DOM

创建一个影子文档，挂载到自定义元素下，形成作用域隔离。

在自定义元素类中使用入校表达式，添加影子DOM

# mode: open|close ; 值为close shadowRoot返回null
var shadow = this.attachShadow({mode: 'open'});
# element.shadowRoot 自定义标签实例获取影子的实例

附录：

问题1：Failed to construct 'CustomElement': The result must not have children

需要注意，如果构造器有添加子节点、获取属性等操作DOM行为，html写该自定义标签浏览器会报错！原因是浏览器加载脚本后需要解析执行脚本，脚本执行时页面可能还没渲染完毕，操作DOM不安全。

解决办法：用js创建自定义标签的实例，或者自定义标签脚本加上defer属性