什么是webComponents

前言：本文纯作者个人理解来讲述什么是web Components，说的不对的地方请指正。

webComponents的主要组成

1、Custom elements (自定义元素)

2、Shadow Dom （影子dom）

3、Html template （Html 模版）

一、自定义元素

白话文理解：我可以自定义一些html标签，但是这些标签的名称必须包含连词线，用来区分原生html元素。例如 <user-info></user-info> 不能写成 <userInfo></userInfo>。

user-info 标签的具体实现

class UserInfo extends HTMLElement {
    constructor(){
        super();
        var shadow = this.attachShadow( { mode: 'open' } );
        const container = document.createElement('div');
        container.classList.add('test');
        container.innerHTML=`<p class="name">Bain</p><p class="age">12</p>`
        shadow.append(container);
    }
}

1	`告诉浏览器<user-info>元素与这个类关联<br>window.customElements.define('user-info',UserInfo)`

二、影子dom

白话文理解：我不想让别人获取user-info 的shadowdom。这部分 DOM 默认与外部 DOM 隔离，内部任何代码都无法影响外部，外部代码也无法影响内部（例如：全局样式之类,获取dom节点之类）。这个就叫做影子dom 。

实现方式：

 this.attachShadow({mode:'open'})

具体现象如下：

1	`document.querySelector('.test');` `// null 无法获取testdom节点<br>// 全局设置 test样式无效`

三、template标签

白话文理解：在js中写dom会比较麻烦，所以使用template标签定义dom

上文可以改写为:

1	`<template id="userInfoTemplate"><br><br><div` `class="container">`

<em id="__mceDel">    <p class="name">Bain</p><br>
    <p class="age">12</p><br>
  </div><br>
</template></em>

class UserInfo extends HTMLElement {
    constructor(){
        super();
        var shadow = this.attachShadow( { mode: 'open' } );
        const ele = document.getElementById('userInfoTemplate');
        const content = ele.content.cloneNode(true);
        shadow.append(content);
    }

}