Web Components

Web Components允许创建可重用的定制元素，并且在web应用中使用它们。

HTML Templates

<template>

HTML内容模板（<template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以在运行时使用JavaScript实例化。

<slot>

作为 Web Components 技术套件的一部分，是Web组件内的一个占位符。

Custom Elements

customElements.define()

注册一个 custom element，该方法接受以下参数：

• 必填参数，表示所创建的元素名称的符合 DOMString 标准的字符串。注意，custom element 的名称不能是单个单词，且其中必须要有短横线。
• 必填参数，用于定义元素行为的 类 。
• 可选参数，一个包含 extends 属性的配置对象，是可选参数。它指定了所创建的元素继承自哪个内置元素，可以继承任何内置元素。

生命周期

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

Shadow DOM

• 开启方法： Chrome -> Devtool -> Settings -> Preferences -> Show user agent shadow DOM
• 观察 <input> <audio> <video> <select> 等标签

选择器无法越过 shadow 边界

image.png

https://caniuse.com/#feat=shadowdomv1

Element.attachShadow() 方法给指定的元素挂载一个Shadow DOM，并且返回对 ShadowRoot 的引用。

示例

https://github.com/mdn/web-components-examples

相关框架/库

https://stenciljs.com/docs/introduction
https://www.polymer-project.org/