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