Web Components 总结
说明
Web Components 包括以下四种技术 ( 每种都可以被单独使用 )
1.Shadow DOM
一种可以在 document 下组合多个同级别并且可以项目作用的 DOM 树的方法，因此可以更好完善 DOM 的构成
2.Custom Elements
一种可以允许开发者在 document 中定义并使用的新的 dom 元素类型，即自定义元素， document.registerElement() ，你的自定义元素的名字当中必须至少有一个-
3.HTML Templates
模板没什么可说了，在标准实现之前其实我们一直都在用 js 来实现该方式
4.HTML Imports
一种允许一个 html 文档在别的 htmldocuments 中包含和复用的方法，可以通过标签，把一小块的 HTML 代码加载到页面
实现 web component 的基本方法通常如下所示
1. 使用 ECMAScript 2015 类语法创建一个类，来指定 web 组件的功能
2. 使用 CustomElementRegistry.define() 方法注册您的新自定义元素 ，并向其传递要定义的元素名称、指定元素功能的类以及可选的，其所继承自的元素
3. 如果需要的话，使用 Element.attachShadow() 方法将一个 shadow DOM 附加到自定义元素上。使用通常的 DOM 方法向 shadow DOM 中添加子元素、事件监听器等等
4. 如果需要的话，使用< template > 和 < slot >方法定义一个 HTML 模板。再次使用常规 DOM 方法克隆模板并将其附加到您的 shadow DOM 中
5. 在页面任何您喜欢的位置使用自定义元素，就像使用常规 HTML 元素那样
生命周期回调方法
1. 元素创建后调用 .createdCallback()
2. 元素附加到文档后调用 .attachedCallback()
3. 从文档中移除元素后调用 .detachedCallback()
4. 元素任一属性变更后调用 .attributeChangedCallback()
