什么是webComponents

标签：container 自定义 dom 标签 什么 webComponents const shadow

前言：本文纯作者个人理解来讲述什么是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);
    }
}

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

 

二、影子dom 

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

实现方式：

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

具体现象如下：

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

 

三、template标签

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

上文可以改写为:

<template id="userInfoTemplate">

<div class="container">

    <p class="name">Bain</p>

    <p class="age">12</p>

  </div>

</template>

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);
    }

}

 

标签：container,自定义,dom,标签,什么,webComponents,const,shadow
From： https://www.cnblogs.com/liuxuehua/p/16775126.html