html标签 封装原理,web components 基本概念及原理

Web Components

Web组件 由几个单独的技术组成。可以使用现有的Web组件而无需编写代码，只需向HTML页面添加import语句即可。

Web Components 由这四种技术组成 (尽管每种技术都可以独立使用)

自定义元素 (Custom Elements)

HTML模板 (HTML Templates)

影子DOM (Shadow DOM)

HTML导入 (HTML Imports)

对应的接口

四种新的HTML元素: , , , and

与新元素相关的API接口：

HTMLTemplateElement

HTMLContentElement

HTMLElementElement

HTMLShadowElement

HTMLLinkElement 接口的拓展，以及 元素

一个注册新元素的接口：

Document.registerElement()

Document.createElement()

Document.createElementNS()

自定义元素的原型(prototype)可以添加新的 『生命周期回调(lifecycle callbacks)』

元素的默认样式中添加新的CSS伪类(pseudo-classes)

： :unresolved.

影子DOM:

ShadowRoot

Element.createShadowRoot()

Element.getDestinationInsertionPoints()

Element.shadowRoot

Event 接口的拓展：Event.path

Document 接口的拓展

Web Components 的样式：

新的伪类: :host、:host()、:host-context()

新的伪元素：::shadow 和 ::content

新的组合器(combinator)：/deep/

自定义元素 (Custom Elements)

创建自己的自定义HTML元素,可以有自己的脚本行为和CSS样式。

自定义元素的一个优势是它们的生命周期反应，这允许将行为附加到新元素的“生命周期”的不同部分。

启用自定义元素关键在于 Document.registerElement() 方法，此方法向浏览器注册一个新元素，该元素默认使用 HTMLElement 接口(如果您创建了类似的标签，但不注册，它将会使用 HTMLUnknownElement接口。您也可以在例如 这样的原生元素的基础上创建自定义元素，不过如此一来就不能使用自定义标签名，比如 ，而要使用 这样的语法了)。

生命周期回调(Lifecycle callbacks)

自定义元素可以使用以下生命周期回调函数:

createdCallback - 注册元素时执行

attachedCallback - 元素插入DOM时执行

detachedCallback - 元素被移除DOM时执行

attributeChangedCallback - 元素的属性被增、删、改时执行

HTML模板 (HTML Templates)

The HTML element is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript.

影子DOM (Shadow DOM)

Shadow DOM 为Web组件中的 DOM和 CSS提供了封装。Shadow DOM 使得这些东西与主文档的DOM保持分离。你也可以在一个Web组件外部使用 Shadow DOM本身。

为什么要把一些代码和网页上其他的代码分离？原因之一是，大型站点若CSS没有良好的组织，导航的样式可能就『泄露』到本不应该去的地方，如主要内容区域，反之亦然。随着站点、应用的拓展，这样的事难以避免。

shadow DOM basic

影子DOM的组成：

Element.attachShadow()

Element.getDestinationInsertionPoints()

Element.shadowRoot

元素

元素

这些元素已从规范中移除： , 和

相关API接口：ShadowRoot, HTMLContentElement and HTMLShadowElement

CSS 选择器：

伪类：:host, :host(), :host-context()

伪元素：::shadow and ::content

组合器： (formerly /deep/)

HTML导入 (HTML Imports)

HTML Imports 旨在成为 Web Components 的打包机制，但也可以使用HTML Imports本身。