Web Components 是一种用来创建可重用组件的 Web 平台技术。它由四个标准组成： Custom Elements（自定义元素）、 Shadow DOM（影子 DOM）、 HTML Templates（HTML 模板）和 HTML Imports（HTML 导入）。这些标准的结合，使我们能够创建功能强大、可重用的组件，同时保持灵活性和可维护性。
Web Components 的核心思想是使组件的实现和使用彻底解耦。一个 Web 组件应该具备以下特性：
- 可插入性：一个组件应该能够被插入到任何一个 web 应用程序中去。
- 自包容：一个组件应该包含所有必要的资源，包括 HTML、CSS 和 JavaScript。
- 健壮性：一个组件应该是相对独立的，不与其它部分产生冲突。
- 可重用性：一个组件应该可以被任何人使用，而不需要了解其内部实现。
- 可组成性：一个组件应该具有良好的可组合性，组件之间可以很容易地进行组合。
Custom Elements
Custom Elements 允许我们创建自定义的 HTML 元素。这些元素可以具有自己的行为和样式。
定义 Custom Element
首先，我们需要定义一个 Custom Element，可以使用 ES6 的 class 语法：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
------------------- -
-------------- - --------- ------------
-
-
----------------------------------- -----------这个例子创建了一个名为 my-element 的 Custom Element。在元素连接到 DOM 时，connectedCallback 方法被调用，然后它将 HTML 内容设置为 Hello World!。
使用 Custom Element
使用 Custom Element 更像是使用普通的 HTML 元素，只需要将元素名称放在 HTML 中即可。例如：
-- -------------------- ---- ------- --------- ----- ------ ------ --------- --- ------------ ------- ------ ------------------------- ------- -------
当这个页面被加载时，my-element 将被自动替换为 Hello World!。
Shadow DOM
Shadow DOM 允许我们封装一个 Custom Element 的样式和 DOM 结构。这使得 Custom Element 更加独立，避免了样式冲突。
创建 Shadow DOM
要创建 Shadow DOM，我们需要使用 attachShadow 方法，例如：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------------ ---------
-------------------- - -
-------
- -
------ ----
-
--------
-------- ----------
--
-
-
----------------------------------- -----------这个例子创建了一个带有样式的 p 元素的 Shadow DOM。注意，我们使用了 open 模式，这样外部的 JavaScript 代码可以访问 Shadow DOM。
访问 Shadow DOM
外部 JavaScript 代码可以通过 shadowRoot 属性访问 Shadow DOM。例如：
myElement.shadowRoot.querySelector('p').textContent = 'New Content!';这个例子将 p 元素的文本内容设置为 New Content!。
HTML Templates
HTML Templates 允许我们将 HTML 标记作为字符串存储，然后在需要时使用。
定义 Template
可以使用 template 元素定义一个 HTML 模板：
<template id="my-template">
<style>
p {
color: red;
}
</style>
<p>Hello World!</p>
</template>使用 Template
要使用 HTML 模板，需要获取模板的引用，然后使用 cloneNode 方法来克隆模板并插入到文档中。例如：
const template = document.querySelector('#my-template');
const clone = template.content.cloneNode(true);
document.body.appendChild(clone);这个例子将使用 template 定义的样式和内容插入到 body 中。
HTML Imports
HTML Imports 允许我们使用外部 HTML 文件作为组件的依赖项。
创建 Import
可以使用 link 元素将一个 HTML 文件作为 import。例如：
<link rel="import" href="my-element.html">
加载 Import
需要等待导入的 HTML 文件加载后，才能使用其中的组件。可以使用 link 元素的 onload 事件来等待导入的 HTML 文件加载完毕。例如：
const link = document.createElement('link');
link.rel = 'import';
link.href = 'my-element.html';
link.onload = () => {
const el = document.createElement('my-element');
document.body.appendChild(el);
};
document.head.appendChild(link);这个例子等待 my-element.html 文件加载完毕，然后创建一个 my-element 元素并插入到 body 中。
示例代码
下面是一个使用所有四个 Web Components 标准的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
---------- ---------- ---------------
----- ------------ -----------------------
--------- -----------------
-------
----------- -
----------------- -------
-
----------- - -
------ ----
-
--------
---- -------------------
-------- ----------
-------------------------
------
-----------
-------
------
--------
----- -------- - ---------------------------------------
----- ----- - ---------------------------------
---------------------------------
----- ---- - -------------------------------
-------- - ---------
--------- - ------------------
----------- - -- -- -
----- -- - -------------------------------------
------------------------------------------------------
--
--------------------------------
---------
-------
-------在这个例子中，我们创建了一个带有一个 my-element 的 HTML 模板。我们使用 Shadow DOM 将 my-element 中的段落样式封装起来，然后使用 link 元素导入一个称为 my-element.html 的文件。文件加载后，我们创建一个新的 my-element 元素并将其插入到 HTML 中。页面的最终输出如下：
结论
Web Components 技术为我们提供了一种轻松创建可重用组件的方式。它由四个标准组成： Custom Elements、 Shadow DOM、 HTML Templates 和 HTML Imports。在使用 Web Components 时，我们应该优先考虑这些标准的使用，以确保我们创建的组件具有可插入性、自包容性、健壮性、可重用性和可组成性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6704fd57d91dce0dc8513478