web compontens体验

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

customElements.define(name, constructor, options);
参数
name
自定义元素名.
constructor
自定义元素构造器.
options 可选
控制元素如何定义. 目前有一个选项支持:
extends. 指定继承的已创建的元素. 被用于创建自定义元素.
返回值
空

constructor = customElements.get(name);
参数
name
你想要返回引用的构造函数的自定义元素的名字。
返回值
指定名字的自定义元素的构造函数，如果没有使用该名称的自定义元素定义，则为undefined。

customElements.upgrade(root);
参数
root
待升级的包含阴影的派生元素节点 。如果没有可升级的派生实例，则不会抛出异常。
返回值
空.

Promise<> customElements.whenDefined(name);
参数
name
自定义元素的名称
返回值
当自定义元素被定义时一个Promise 返回{jsxref(“undefined”)}}. 如果自定义元素已经被定义，则resolve立即执行。

生命周期回调
定义在自定义元素的类定义中的特殊回调函数，影响其行为：
connectedCallback: 当自定义元素第一次被连接到文档DOM时被调用。
disconnectedCallback: 当自定义元素与文档DOM断开连接时被调用。
adoptedCallback: 当自定义元素被移动到新文档时被调用。
attributeChangedCallback: 当自定义元素的一个属性被增加、移除或更改时被调用

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

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

HTML templates

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

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