⭐️ 本文首发自前端修罗场(点击加入)，是一个由资深开发者独立运行的专业技术社区，我专注 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 可以带来更便利的组件化开发体验。

地址：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+。

参见：

tc39 / proposal-dynamic-import：import（）proposal for js
Dynamic import()| Google dev

解释

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

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.createElementconstructor() {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.appendChildconnectedCallback() {}//当元素从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升级元素时，可以调用回调，并会返回一个promisecustomElements.whenDefined('my-element')
.then(() => {// my-element is now defined
})

在浏览器中开启shadow dom

参考

:host
Web 组件开发方法
Atag - Web Components 最佳实践

Web Components 的使用，从入门到基础相关推荐

自学web前端的小笔记(入门JS基础部分)
22.JS前期学习三部分 1-ECMA5 语法规则标准 2-DOM 文档对象模型 3-BOM 浏览器对象模型 ECMA6有类的概念,可和面向对象语言区别还是很大,只能说是基于对象的语言 JS的用处 ...
web快速入门之基础篇-js：3_3、简易购物车
目录一.前言二.js代码实例演示 1.简易购物车01_数量变化 (1)实例代码 (2)效果演示 2.简易购物车02_数量价格同步 (1)实例代码 (2)效果演示一.前言上一篇介绍了DHTML对 ...
Web Components入门实例教程
代码示例  <template id="UserNameTemplate"><style>.user-name { ...
web快速入门之基础篇-html：2、基本标签之标题标签、段落标签、换行标签
目录一.前言二.简单实例介绍实例代码运行效果三.要点说明 1.h1到h6 标题标签 2.p 段落标签 3.br 换行标签[单标记] 一.前言上一篇文章我整理以前上学的笔记是初见 html ...
Web Components 入门
组件是前端的发展方向,现在流行的 React 和 Vue 都是组件框架. 谷歌公司由于掌握了 Chrome 浏览器,一直在推动浏览器的原生组件,即 Web Components API.相比第三方框架 ...
从 0 到 1 上手 Web Components 业务组件库开发
组件化是前端发展的一个重要方向,它一方面提高开发效率,另一方面降低维护成本.主流的 Vue.js.React 及其延伸的 Ant Design.uniapp.Taro 等都是组件框架. Web C ...
【总结】- 从 0 到 1 上手 Web Components 业务组件库开发
组件化是前端发展的一个重要方向,它一方面提高开发效率,另一方面降低维护成本.主流的 Vue.js.React 及其延伸的 Ant Design.uniapp.Taro 等都是组件框架.Web Comp ...
【总结】1181- 从 0 到 1 上手 Web Components 业务组件库开发
组件化是前端发展的一个重要方向,它一方面提高开发效率,另一方面降低维护成本.主流的 Vue.js.React 及其延伸的 Ant Design.uniapp.Taro 等都是组件框架.Web Comp ...
Web Components 简述
要说最近几年来,前端开发最火的一个趋势或最火的前端开发框架是什么,第一想到的是,组件及推崇组件化开发的React框架.本文将介绍Web Components规范并就组件的几大特性进行讨论. 前言在开 ...

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