WebComponents

一个可以自建自定义元素的成套技术方案，主要包含三个概念。

Custom elements

自定义元素，可以像普通DOM元素一样使用。

CustomElementRegistry接口提供了创建和查找自定义元素的方法。

创建自定义元素的方法：

CustomElementRegistry.define()

在使用的时候，我们需要使用实例方法。通过window.customElements可以获得对CustomElementRegistry.define()的引用。这个方法接受三个参数：

DOMString: 自定义元素的名称
class/function: 定义自定义元素结构、样式、表现
包含extends方法的对象，此时需要在指定元素上使用此自定义元素。比如{extends: 'p'}，此时在<p>上通过is属性使用自定义元素: <p is="customElements"></p>

有两种自定义元素

自治(autonomous)自定义元素(ACE): 像普通元素一样使用的自定义元素
内置(built-in)自定义元素(BICE): 通过is使用的自定义元素

区别：在注册ACE时, 是扩展自HTMLElements接口,而BICE的类是扩展自特定元素接口，如{ extends: 'p' }，则继承HTMLParagraphElement的属性。

Shadow DOM

webComponents的一个重要特征就是封装。封装能够使结构、样式、行为之间相互独立，互补·干扰、冲突。shadow DOM就是实现该功能的接口。

shadow Dom并不是全新的概念，浏览器早已使用它来实现封装元素的功能。最常见的video，video的controls里有很多功能按钮。这个就是通过shadow dom实现的

与shadow DOM相关的概念：

shadowDOM host: 挂载的元素
shadowDOM root: 根元素
shadowDOM tree：整个树结构
shadowDOM boundary: 开始、结束节点

如何创建shadow DOM?

像普通DOM一样去创建。shadowDOM强调的是封装性，并不是新的元素。如下就是创建一个shadow DOM:

    class RedColor extends HTMLElement {
      constructor () {
        super();

        let shadow = this.attachShadow({mode: 'open'});
      
        let span = document.createElement('span');
        span.setAttribute('class','text');
        span.textContent = this.getAttribute('text');
        
        // Create some CSS to apply to the shadow dom
        let style = document.createElement('style');

        style.textContent = `
          .text {
          font-size: 20px;
          color: red;
        }`
        // attach the created elements to the shadow dom
        shadow.appendChild(style);
        shadow.appendChild(span);
      }
    }
    
    // Define the new element: red-color
    customElements.define('red-color', RedColor);
    
    // red-color是新元素，这个新元素的结构、元素、表现被封装在内部。而这个封装的实现就是依靠`shadow DOM`接口。

    <!-- 应用新元素 -->
    <red-color text="This is a paragraph of red text">

HTML templates

<template>、<slot>可以帮助在页面加载时不去展示这些元素，而作为模板使用。

实例 --> 传送门

这两个概念跟vue中的概念很一致。template作为模板使用，slot作为插槽，都是为了复用html结构而生。

题外话：今天看到一篇狼叔的文章，说的是2019年前端趋势。其中说到三大框架越来越像，是因为都朝着标准走，而这个标准就是webComponents标准。