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

⭐️ 本文首发自 前端修罗场(点击加入),是一个由 资深开发者 独立运行 的专业技术社区,我专注 Web 技术、Web3、区块链、答疑解惑、面试辅导以及职业发展博主创作的 《前端面试复习笔记》(点击订阅),广受好评,已帮助多人提升实力、拿到 offer。现在订阅,私聊我即可获取一次免费的模拟面试机会,帮你评估知识点的掌握程度,获得更全面的学习指导意见!

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 可以带来更便利的组件化开发体验。

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文件都加载进来了。

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

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

  1. 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
})

在这里插入图片描述

  • 在浏览器中开启shadow dom
    在这里插入图片描述

参考

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程轨迹_

期望和你分享一杯咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值