web components：一种原生的写组件的方式。下面将主要介绍四个概念：custom element、shadow DOM、template 和 slot。
创建 custom 元素：customElements.define(name,constructor,options)
name：元素名称、constructor：定义元素主体。具体定义与使用见文档。
其中主要涉及到下面几个概念：
autonomous custom elements：使用时跟使用 html 元素一样。
customized built-in elements： inherit from basic HTML elements。从 html 元素继承而来，使用时会定义 is 属性。demo。
lifecycle callbacks：当元素被添加到 DOM、从 DOM 中移除、被移动、属性更改时会触发的回调函数。connectedCallback \disconnectedCallback \adoptedCallback \attributeChangedCallback
原文较准确：The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element. 创建一个与外界隔离的 DOM 结构。
先介绍几个概念：
shadow host：shadow 载体节点，添加 shadow root 的 DOM 节点。
shadow tree：类似与 dom tree 的概念。
shadow root：shadow 根节点。
基本使用：
创建 shadow：Element.attachShadow({ mode: 'open' })
可通过设置参数 mode 为 ‘open’/‘closed’，来确定是否允许外部 js 调用该 shadow。
template 主要解决写重复模块的问题。template 可单独使用，需要通过 js 调用才能添加到 DOM 中。与 custom element 结合使用更方便。
添加 slot 后，可以动态地往 template 中添加自定义片段。
注意：样式需添加 style 元素才生效。
