Web Components 的使用，从入门到基础

前端修罗场

发布于 2023-10-07 18:46:31

38900

代码可运行

文章被收录于专栏：Web 技术Web 技术

运行总次数：0

代码可运行

Web Components

MDN 上对 Web Components 这个名词的解释是:

Web Components是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web应用中使用它们。

当然，你也可以从W3C上学习组件规范。

Web Components[以下简称"WC"]，使用自定义元素(custom elements)来代替div，故能使用div的得房就能使用它。因此，使用WC，只需要在HTML中引入js文件即可。它不并不像目前主流的组件框架，需要外部支撑。例如，如果你要使用React组件，那你大概率的情况下要使用ReactJS。

开始前的准备

文章中的组件、自定义标签、自定义组件其实描述的是同一个东西。

Ploymer

WC 在整个前端的语境下更偏向于提供符合 DOM 标准的规范，而 Polymer 则是在这种规范之上的一种框架封装，虽然Ploymer不是必须的，但是使用 Polymer 可以带来更便利的组件化开发体验。

地址：github
文档: 文档

ShadyDOM与ShadyCSS

ShadyDOM：是 Shadow DOM 的 polyfill 的官方名称。 ▪ 它通过劫持 HTMLElement 的原型方法来实现一些 Shadow DOM 节点拥有的功能，实际上它的原理是把节点添加到了真实(light) DOM 节点之上。
ShadyCSS：也是 polyfill 的名称，它提供了一些 Shadow DOM 节点内样式的封装，使得可以在真实 DOM 中模拟 scoped style 的效果。它的原理是通过解析和重写 style 节点内部的样式规则来实现的。

开始创建一个自定义组件

WC一般具有以下几个部分：

Shadow Dom
Custom Elements
HTML Imports
HTML Templates

你可以在CanIUse上查到上述4部分的目前的支持情况。

OK , 现在我们新建一个项目目录my-app，如下：

然后，在命令行中开启http服务(请先确保你已安装该nodeJS服务npm install -g http-server)：

$ http-server

第一个Web Components

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My-App</title>
    <link rel="import" href="elements/my-app.html" id="my-app">
</head>
<body>
    <my-app></my-app>
</body>
</html>

//my-app.html
<template>
    <style>
        p {
            color: #ccc;
        }
    </style>
    <p>这是一个自定义元素！</p>
</template>

<script>
    class MyAppElement extends HTMLElement {
        constructor() {
            super();
            const shadowRoot = this.attachShadow({mode:'open'});
            const myApp = document.getElementById('my-app').import;
            const templateNode = myApp.getElementsByTagName('template')[0].content.cloneNode(true);
            shadowRoot.appendChild(templateNode);
        }
        connectedCallback() {
            console.log('my-app element is connected');
        }
    }
    customElements.define('my-app', MyAppElement);
</script>

注意，这里我们使用HTML imports在index.html中导入了my-app.html，这仅能在Chrome中实现。作为ES6模块的一部分，在将来可能会被废弃。因为，Ploymer正在开发相关的实现。

现在我们可以看到在页面上显示：

当然，除此之外我们也可以使用ES6 import实现：

ES6 import

现在的目录结构是这样：在elements目录下新建一个my-app.js 和 my-date.js。

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My-App</title>
    <script type="module" src="/elements/my-app.js"></script>
</head>
<body>
    <my-app></my-app>
</body>
</html>

//my-app.js
import './my-date.js'

class MyAppElement extends HTMLElement {
    constructor() {
        super();
        const shadowRoot = this.attachShadow({mode:'open'});
        shadowRoot.innerHTML = this.template();
    }
    connectedCallback() {
        console.log('my-app element is connected');
    }
    template() {
        return `
            <style>
                p {
                color: #f00;
                }
            </style>

            <p>This is a custom element!</p>
            <my-date></my-date>
        `;
    }
}
customElements.define('my-app', MyAppElement);

//my-date.js
class MyDateElement extends HTMLElement {
    constructor() {
        super();
        this.now = new Date();

        const shadowRoot = this.attachShadow({mode:'open'});
        shadowRoot.innerHTML = this.template();
    }
    connectedCallback() {
        console.log('my-date element is connected');
    }
    template() {
        return `
            <p>现在是<time datetime="${this.now.toISOString()}">${this.now.toLocaleString()}</p>
        `;
    }
}
customElements.define('my-date', MyDateElement);

现在我们可以看到页面：

但是，使用es6 import也会存在缺点：

HTML标签和JS没有分开。我们看到，HTML标签是写在template()方法中。而前面一种方案是将HTML标签写在<template>标签中。
无法在不同时刻加载某些文件。我们看到，import在第一时间把需要的JS文件都加载进来了。

为了解决这个问题，我们需要采取以下方法:

动态加载JS

//动态加载JS
const scriptElement = document.createElement('script');
scriptElement.src = '/elements/my-date.js';
document.head.appendChild(scriptElement);

import()

使用具有函数性的import()函数进行动态导入，返回Promise。

目前适用于Chrome 63+和Safari 11+。

参见：

解释

下面，使用一个代码示例，解释代码中不同部分的含义。请根据代码注释进行理解。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="app.js"></script>
</head>
<body>
    <my-element></my-element>
</body>
</html>

app.js

//生命周期函数的顺序：constructor -> attributeChangedCallback -> connectedCallback
//attributeChangedCallback要在connectedCallback之前执行的原因：
//1.web组件上的属性主要用来初始化配置。这意味着当组件被插入DOM时，这些配置需要可以被访问了
customElements.define('my-element',class extends HTMLElement{
    static get observedAttributes() {
        return ['disabled'];
    }
    //构造函数一般是用来初始化状态和设置Shadow DOM。
    //当时一个元素被创建时将会调用构造函数,如document.createElement
    constructor() {
        super();
        //使用Shadow DOM，自定义元素的HTML和CSS完全封装在组件内。这意味着元素将以单个的HTML标签出现在文档的DOM树种。其内部的结构将会放在#shadow-root。
        let style = document.createElement('style');

        const shadowRoot = this.attachShadow({mode: 'open'});// 定义一个Shadow root,mode:'open'意味着可以再开发者工具找到它并与之交互；mode：closed则相反
        //Shadow DOM还提供了局部作用域的CSS
        //所有的CSS都只应用于组件本身
        //元素将只继承最小数量从组件外部定义的CSS,甚至可以不从外部继承任何CSS
        //在实际插入DOM前，它是不可见也不可解析的。这意味着定义在内部的任何资源都无法获取，任何内部定义的CSS和JavaScript只有当它被插入DOM中时，才会被执行。
        //组件的所有样式都被定义在style标签内，如果你想使用一个常规的<link rel="stylesheet">标签，你也可以获取外部样式
        
        shadowRoot.innerHTML = `     
            <div id="container" class="disabled">
                <h1>web Components</h1>
            </div>
        `;
        shadowRoot.appendChild(style);
        //当Shadow root被创建之后，你可以使用document对象的所有DOM方法，
        this.container = this.shadowRoot.querySelector('#container');//查找元素
        
        //还可以使用:host选择器对组件本身进行样式设置
        //从外部定义在组件本身的样式优先于使用:host在Shadow DOM中定义的样式
        style.textContent = '.disabled {opacity: 0.4;}' +
            'h1 { text-decoration: underline; }' +
            ':host-context(h1) { font-style: italic; }' +
            ':host-context(h1):after { content: " - no links in headers!" }' +
            ':host-context(article, aside) { color: gray; }' +
            ':host(.footer) { color : red; }' +
            ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'+
            ':host {--background-color: #1387ff;}'+
            '#container {background-color: var(--background-color);}';

    }
    //当这个元素被插入DOM树的时候将会触发这个方法
    //在connectedCallback之后进行元素的设置
    //这是唯一可以确定所有的属性和子元素都已经可用的办法，如document.body.appendChild
    connectedCallback() {


    }
    //当元素从DOM中移除的时候将会调用它
    //在用户关闭浏览器或者浏览器tab的时候，不会调用这个方法
    disconnectCallback() {

    }
    //当元素通过调用document.adoptNode(element)被采用到文档时将会被调用
    adoptedCallback() {

    }
    //每当将属性添加到observedAttributes的数组中时，就会调用这个函数
    //这个方法调用时两个参数分别为旧值和新值
    //这个方法只有当被保存在observedAttributes数组的属性改变时,才会调用，其他属性改变则不会
    //web组件上的属性主要用来初始化配置,状态
    //当组件被插入DOM时，这些配置需要可以被访问了
    attributeChangedCallback(attr,oldVal,newVal) {
        if(attr === 'disabled') {
            if(this.disabled) {  
              this.container.classList.add('disabled');      
            }      
            else {
              this.container.classList.remove('disabled')      
            }
        }
    }
})


//调用customElements.get(‘my-element’)来获取这个元素构造函数的引用
const el = customElements.get('my-element');
//使用new element()来代替document.createElement()去实例一个元素
const myElement = new el();


//使用customElement.whenDefined升级元素时，可以调用回调，并会返回一个promise

customElements.whenDefined('my-element')
.then(() => {
  // my-element is now defined
})