什么是web componets, 它的出现是为了什么？
web components旨在提供一套制作可重用的封装性好的自定义元素的标准。
它包括四部分：
customElements -- 这是一个基于CustomeElementRegistry类生成的对象，用于注册自定义元素，如customElements.define('my-popup', MyPop)， 并返回已注册的自定义元素的信息。经过注册的元素就可以直接在html页面上像普通元素那样使用了，如<my-popup/>
shadow DOM -- 影子DOM
HTML template -- HTML模板
HTML import -- HTML导入
customElements.define用于注册自定义元素，那什么是自定义元素呢？
自定义元素即为一个class,在这个class里添加各种内置的元素并实现一些逻辑。如果想在页面上使用这个自定义元素，需要用CustomElementRegistry 的define来注册一下。
自定义元素有两种
1 autonomous custom elements
extends HTMLElement, 可以通过<popup-info>或doducment.createElement("popup-info")引入到页面
注册： customElements.define("popup-info", PopupInfo)；
2 customized built-in elements
继承自基础的html elements，比如div /p/ span等，需要添加is属性来引入到页面，<p is="word-count">或 document.createElement("p", {is:"word-count"})
注册： customElements.define('expanding-list', ExpandingList, {extends:"ul"});
很明显的看出来，customize built-in elements注册时，需要提供第三个参数，来表明是继承自谁
自定义元素的生命用期：
-
connectedCallback：当 custom element首次被插入文档DOM时，被调用。 -
disconnectedCallback：当 custom element从文档DOM中删除时，被调用。 -
adoptedCallback：当 custom element被移动到新的文档时，被调用。 -
attributeChangedCallback: 当 custom element增加、删除、修改自身属性时，被调用。这个回调需要自定义组件提示 static get observedAttributes(){return ['属性名','属性名',...];}。如果在组件还没 append到某元素上，此时setAttribute也会触发该事件。
这些都可以在自定义元素的class里直接引入来针对不同的阶段进行相应的业务处理。
Shadow DOM
它是document node的一种。对保证组件的独立，使其行为、样式、事件等不受外部的影响起关键作用。它给自定义组件里的元素提供了一个隐蔽的分离出来的DOM.
与Shadow DOM相关的几个术语：
- shadow host 是一个普通的dom元素，用来安放shdow dom
- shadow tree dom树
- shadow boundary shadow dom的边界，表示shadow dom结束，regular dom开始
- shadow root shadow tree的根
shadow DOM的基本用法
this.attachShadow({mode:'open'})，将shadow root加到自定义元素上。mode有两个值：open和closed。open的话，在外边也可以访问到组件的shadowRoot，closed的正好相反.
let myShadowDom = myCustomElem.shadowRoot;
mode为open时myShadowDom可以取到值，并能对里边的元素做操作。mode为close时myShadowDom为null;
function updateStyle(elem) {
const shadow = elem.shadowRoot; // 访问自定义组件的shadow root
shadow.querySelector('style').textContent = `
div {
width: ${elem.getAttribute('l')}px;
height: ${elem.getAttribute('l')}px;
background-color: ${elem.getAttribute('c')};
}
`; // shadow root有跟document类似的方法如getElementById,querySelector等
}
slot和template
在shadow dom中引入slot来增加灵活性。搭配使用template效果更佳。
slot让用户可给向自定义组件里添加自己的标签元素。它通过name属性来指定一个slot，所以组件内的slot的name要唯一。
<template>标签里的代码片断（DocumentFragment）不会被rend到页面上，只能通过javascript的Node.cloneNode克隆出新的DocumentFragment然后后再appendChild或是insertBefore来加来到dom树上。
template里的documentFragment通过HTMLTemplateElement.content来取得。
<template id="element-details-template">
<style>
details {font-family: "Open Sans Light",Helvetica,Arial}
.name {font-weight: bold; color: #217ac0; font-size: 120%}
h4 { margin: 10px 0 -8px 0; }
h4 span { background: #217ac0; padding: 2px 6px 2px 6px }
h4 span { border: 1px solid #cee9f9; border-radius: 4px }
h4 span { color: white }
.attributes { margin-left: 22px; font-size: 90% }
.attributes p { margin-left: 16px; font-style: italic }
</style>
<details>
<summary>
<span>
<code class="name"><<slot name="element-name">NEED NAME</slot>></code> <!--slot->
<i class="desc"><slot name="description">NEED DESCRIPTION</slot></i> <!--slot->
</span>
</summary>
<div class="attributes">
<h4><span>Attributes</span></h4>
<slot name="attributes"><p>None</p></slot> <!--slot ->
</div>
</details>
<hr>
</template>
customElements.define('element-details',
class extends HTMLElement {
constructor() {
super(); // constructor里先写上super，this才能被赋值
var template = document
.getElementById('element-details-template')
.content;// template可以通过dom的方法来取到，它的content属性返回的就是内部的DocumentFragment
const shadowRoot = this.attachShadow({mode: 'open'}) // 自定义组件首先要创建shadow,通过appendChild来往shadow里添加标签元素
.appendChild(template.cloneNode(true));
}
})
<element-details>
<span slot="element-name">slot</span> <!--通过给标签添加slot="slotName"来将这个标签填充到自定义标签里->
<span slot="description">A placeholder inside a web
component that users can fill with their own markup,
with the effect of composing different DOM trees
together.</span>
<dl slot="attributes"> <!--如果不给名称为attribute的slot写标签的话，会用自定义组件里的该slot内的标签->
<dt>name</dt>
<dd>The name of the slot.</dd>
</dl>
</element-details>
还有一个与此相关的css伪类:define :host :host-context，方法，可以用到时再学习
总结
实现web componets的步骤与方法如下：