web components 基本概念及原理

Web Components

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

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

• 自定义元素 (Custom Elements)
• HTML模板 (HTML Templates)
• 影子DOM (Shadow DOM)
• HTML导入 (HTML Imports)

对应的接口

1. 四种新的HTML元素: <template>, <content>, <element>, and <shadow>
2. 与新元素相关的API接口：
   • HTMLTemplateElement
   • HTMLContentElement
     • HTMLElementElement
     • HTMLShadowElement
3. HTMLLinkElement 接口的拓展，以及 <link> 元素
4. 一个注册新元素的接口：
   • Document.registerElement()
   • Document.createElement()
   • Document.createElementNS()
5. 自定义元素的原型（prototype）可以添加新的 『生命周期回调（lifecycle callbacks）』
6. 元素的默认样式中添加新的CSS伪类（pseudo-classes）
   ： :unresolved.
7. 影子DOM:
   • ShadowRoot
   • Element.createShadowRoot()
   • Element.getDestinationInsertionPoints()
   • Element.shadowRoot
8. Event 接口的拓展：Event.path
9. Document 接口的拓展
10. Web Components 的样式：
    • 新的伪类: :host、:host()、:host-context()
    • 新的伪元素：::shadow 和 ::content
    • 新的组合器（combinator）：/deep/

自定义元素 (Custom Elements)

创建自己的自定义HTML元素,可以有自己的脚本行为和CSS样式。
自定义元素的一个优势是它们的生命周期反应，这允许将行为附加到新元素的“生命周期”的不同部分。

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

  生命周期回调（Lifecycle callbacks）

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

• createdCallback - 注册元素时执行
• attachedCallback - 元素插入DOM时执行
• detachedCallback - 元素被移除DOM时执行
• attributeChangedCallback - 元素的属性被增、删、改时执行

custom element

HTML模板 (HTML Templates)

The HTML <template> 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.

template demo

影子DOM (Shadow DOM)

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

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

shadow DOM basic

shadow dom

影子DOM的组成：

• Element.attachShadow()
• Element.getDestinationInsertionPoints()
• Element.shadowRoot
  <content> 元素
  <shadow> 元素
• 这些元素已从规范中移除： <content>, <element> 和<decorator>
• 相关API接口：ShadowRoot, HTMLContentElement and HTMLShadowElement
• CSS 选择器：
  • 伪类：:host, :host(), :host-context()
  • 伪元素：::shadow and ::content
  • 组合器： (formerly /deep/)

HTML导入 (HTML Imports)

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

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