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是完全独立的。
