Web Components简介

简介

谷歌公司由于掌握了 Chrome 浏览器，一直在推动浏览器的原生组件，即 Web Components API。相比第三方框架，原生组件简单直接，符合直觉，不用加载任何外部模块，代码量小。目前，它还在不断发展，但已经可用于生产环境。

组件化、复用，这几乎是所有开发者追求的东西。Web Components API就是为此而提出。可以使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。Web Components API允许我们创建可重用的定制元素，并且在我们的web应用中直接使用它们。

这样的理念和Vue、React十分相似，专注于组件。所以Web Components API或许是未来前端的方向！

主要技术

• Custom elements（自定义元素）：一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们。
• Shadow DOM（影子DOM）：一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
• HTML templates（HTML模板）： <template> 和 <slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。

生命周期回调函数

• connectedCallback：当 custom element首次被插入文档DOM时，被调用。
• disconnectedCallback：当 custom element从文档DOM中删除时，被调用。
• adoptedCallback：当 custom element被移动到新的文档时，被调用。
• attributeChangedCallback: 当 custom element增加、删除、修改自身属性时，被调用。

相关接口

1. CustomElementRegistry
2. HTMLSlotElement
3. HTMLTemplateElement
4. ShadowRoot
5. DocumentOrShadowRoot
6. Slotable

相关属性

1. Element.shadowRoot
2. Element.slot
3. Event.composed
4. Event.composedPath
5. Node.isConnected
6. Window.customElements

相关方法

1. Document.createElement()
2. Element.attachShadow()
3. Node.getRootNode()