Web Components

Web Components是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web应用中使用它们。

概念和用法

作为开发者，我们都知道尽可能多的重用代码是一个好主意。这对于自定义标记结构来说通常不是那么容易 — 想想复杂的HTML（以及相关的样式和脚本），有时您不得不写代码来呈现自定义UI控件，并且如果您不小心的话，多次使用它们会使您的页面变得一团糟。

Web Components旨在解决这些问题 — 它由四项主要技术组成，它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。

• Custom elements（自定义元素）：一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们。
• Shadow DOM（影子DOM）：一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
• HTML templates（HTML模板）：<template> 和 <slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
• HTML Imports（HTML导入）：一旦定义了自定义组件，最简单的重用它的方法就是使其定义细节保存在一个单独的文件中，然后使用导入机制将其导入到想要实际使用它的页面中。HTML 导入就是这样一种机制，尽管存在争议 — Mozilla 根本不同意这种方法，并打算在将来实现更合适的。

实现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元素那样。

教程

Using custom elements

介绍如何使用自定义元素的功能来创建简单的web components，以及生命周期回调和其他更高级的功能。

Using shadow DOM

介绍shadow DOM的基础知识，展示如何向元素中附加shadow DOM，添加到shadow DOM树，添加样式等等。

Using templates and slots

介绍如何使用<template> 和 <slot> 元素定义可重用的HTML结构，然后在Web components中使用该结构。

参考

Custom elements

CustomElementRegistry

包含自定义元素相关功能，最值得注意的是CustomElementRegistry.define() 方法用来注册新的自定义元素，这样就可以在文档中使用它们。

Window.customElements

返回 CustomElementRegistry 对象的引用。

生命周期回调

定义在自定义元素的类定义中的特殊回调函数，影响其行为：

• connectedCallback: 当自定义元素第一次被连接到文档DOM时被调用。
• disconnectedCallback: 当自定义元素与文档DOM断开连接时被调用。
• adoptedCallback: 当自定义元素被移动到新文档时被调用。
• attributeChangedCallback: 当自定义元素的一个属性被增加、移除或更改时被调用。

创建自定义内置元素的扩展

• is全局HTML属性：允许您指定一个标准HTML元素应该表现得像一个已注册的自定义内置元素。
• Document.createElement()方法的“is”选项：允许您创建一个标准HTML元素的实例，表现得像一个给定的已注册的自定义内置元素。

CSS 伪类

与自定义元素特别相关的伪类：

• :defined：匹配任何已定义的元素，包括内置元素和使用CustomElementRegistry.define()定义的自定义元素。
• :host：Selects the shadow host of the shadow DOM containing the CSS it is used inside.
• :host(): Selects the shadow host of the shadow DOM containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host.
• :host-context(): Selects the shadow host of the shadow DOM containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host's ancestor(s) in the place it sits inside the DOM hierarchy.

Shadow DOM

ShadowRoot

表示shadow DOM子树的根节点。

DocumentOrShadowRoot

定义了可在文档和shadow根中使用的功能的mixin。（A mixin defining features that are available across document and shadow roots.）

Element扩展

与shadow DOM有关的Element 接口的扩展:

• Element.attachShadow()方法将shadow DOM树附加给特定元素。
• Element.shadowRoot 属性返回附加给特定元素的shadow root，或者 null 如果没有shadow root被附加。

Relevant Node additions

Additions to the Node interface relevant to shadow DOM:

• Node.getRootNode()
  方法返回上下文对象的根，可选项，可以包含shadow root，如果可用的话。
• Node.isConnected 属性返回一个布尔值表示节点是否连接（直接或间接）到上下文对象。例如，在普通DOM的情况下为Document对象，或者在shadow DOM的情况下为ShadowRoot。

Event 扩展

与shadow DOM相关的Event 接口的扩展：

• Event.composed返回一个Boolean，它表明事件是否会通过shadow DOM边界传播到标准DOM。
• Event.composedPath：返回事件的路径（侦听器将被调用的对象）。如果shadow root是使用ShadowRoot.mode为closed创建的，则不包括shadow树中的节点。

HTML templates

<template>

包含一个HTML片段，不会在文档初始化时渲染。但是可以再运行时使用JavaScript显示。主要用作自定义元素结构的基础。关联的DOM接口是HTMLTemplateElement。

<slot>

web component中的一个占位符，你可以填充自己的标记，这样你就可以创建单独的DOM树并将它们呈现在一起。关联的DOM接口是HTMLSlotElement。

The slot global HTML attribute

将在shadow DOM树中的插槽分配给一个元素。

Slotable

由Element 和 Text 节点实现的mixin，定义了允许它们成为 <slot>元素内容的特性。mixin定义了一个属性，Slotable.assignedSlot，返回节点所插入的插槽的引用。

Element 扩展

与插槽相关的Element接口的扩展：

• Element.slot：返回附加到元素上的shadow DOM插槽的名字。

CSS 伪元素

slots特别相关的伪元素:

• ::slotted：匹配任何已经插入一个slot的内容。

slotchange 事件

当插槽中的节点改变时在HTMLSlotElement实例（<slot> 元素）上发射。

例子

在web-components-examples，我们正在构建一些例子。以后会添加更多。

规范

浏览器支持

一般来说，web components在Chrome和Opera中支持良好 — 大多数特性已经默认启用一段时间了。Firefox对大多数功能提供实验性支持，默认是关闭的，看起来会在大概63版本的时候默认开启。Safari支持许多特性，但比上面的浏览器要少。Edge正在开发一个实现。

对于特定特性的浏览器支持，请看上面的参考。

注释

• 在Firefox中启用自定义元素和影子DOM，将 dom.webcomponents.customelements.enabled 和dom.webcomponents.shadowdom.enabled 设置为true。

相关链接

• webcomponents.org — 包含web components例子、教程和其他信息的网站。
• Polymer — Google的web components 框架 — 一组polyfills, enhancements, 和例子。目前跨浏览器使用web components最简单的方法。