Web Components笔记一：入门

Web Components，我们简称WC。

Custom Element

customElements是浏览器内置的api用于定义浏览器可以识别的自定义组件。名称的定义必需包含-，作为WC的命名规范。所有的自定义组件都是继承于HTMLElement，它的生命周期：

生命周期回调（Lifecycle callbacks）

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

Shadow Dom

其实，在创建web components的同时构建Shadow Dom不是必需的。Shadow Dom的目标是做到变量隔离，组件间没有相互干扰，其中包括样式隔离，变量隔离，dom树也进行隔离，也就是querySelector也查询不到Shadow Dom内部的节点。但是不代表内部代码不可见。

如果不构建Shadow Dom，代码如下，此时只有Custom Elements，但是没有Shadow Dom，也就是所有节点是可以访问的。

class Menu3 extends HTMLElement {
    constructor(){
        super();
        this.innerHTML = '<ul>\
            <li>Home3</li>\
            <li>About3</li>\
        </ul>';
    }
}
customElements.define('my-menus', Menu3);

也就是说，Custom Element和Shadow Dom是完全独立的。

Reference

• Web Components 入门实例教程