Web Components 是一种先进的 Web 技术，它允许开发人员创建可重用的自定义 HTML 元素，使得应用程序能够更加模块化和易于维护。Web Components 由四个技术组成：Custom Elements、Shadow DOM、HTML Templates 和 HTML Imports，这些都是 W3C 规范的一部分。
Custom Elements
Custom Elements 允许开发人员定义自己的 HTML 元素，从而扩展现有的 HTML 标签库。要创建一个自定义元素，你需要先定义一个类，该类需要继承 HTMLElement，然后注册该元素的名称。以下是一个简单的自定义元素示例：
class MyButton extends HTMLElement {
connectedCallback() {
this.innerHTML = `<button>Click me</button>`;
}
}
customElements.define('my-button', MyButton);在上面的示例中，我们定义了一个名为 MyButton 的自定义元素，并将其注册为 my-button 标签名。当该元素被添加到文档中时，connectedCallback 方法将被自动调用，并将该元素渲染为一个带有“Click me”文本的按钮。
Shadow DOM
Shadow DOM 允许开发人员将自定义元素的样式和行为封装在其自己的隔离 DOM 中。当开发人员创建一个自定义元素时，它将自动具有其自己的 Shadow DOM，因此任何样式或脚本都只能在 Shadow DOM 中应用，而不会影响到页面中的其他元素。
以下是一个简单的自定义元素示例，其中使用了 Shadow DOM：
-- -------------------- ---- -------
----- ------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
---------------- - -
-------
----- -
------- --- ----- ------
-------- -----
---------- -----
-
--------
------ ------------
--
-
-
--------------------------------- ---------在上面的示例中，我们定义了一个名为 MyInput 的自定义元素，并将其注册为 my-input 标签名。当该元素被添加到文档中时，constructor 方法将被自动调用，并将该元素渲染为一个带有样式的文本框。
HTML Templates
HTML 模板允许开发人员定义可重用的 HTML 片段。HTML 模板使用 <template> 标签定义，该标签的内容不会在页面中显示，而是存储在内存中，可以在需要时动态创建并插入到页面中。
以下是一个简单的 HTML 模板示例：
<template id="tmpl"> <img src="" alt=""> <h3></h3> <p></p> </template>
在上面的示例中，我们定义了一个包含三个 HTML 元素的模板，该模板的 ID 为 tmpl。
要使用该模板，可以调用其 content 属性来获取包含所有子元素的 DocumentFragment，并将其插入到页面中：
const tmpl = document.querySelector('#tmpl').content;
const container = document.createElement('div');
container.appendChild(tmpl.cloneNode(true));
container.querySelector('img').src = 'image.png';
container.querySelector('h3').textContent = 'Title';
container.querySelector('p').textContent = 'Description';
document.body.appendChild(container);在上面的示例中，我们获取了 ID 为 tmpl 的模板的 content 属性，并将其包含的元素插入到一个新的 div 元素中。然后，我们更新了图片的 src 属性、标题和描述，并将该 div 元素添加到页面中。
HTML Imports
HTML 导入允许开发人员将 HTML 片段（包括自定义元素和 HTML 模板）导入到其他 HTML 文件中。导入的 HTML 文件将被自动解析和加载，并在导入文件的 HTML 中注册所有自定义元素。
以下是一个简单的 HTML 导入示例：
<head> <link rel="import" href="components.html"> </head> <body> <my-button></my-button> <my-input></my-input> </body>
在上面的示例中，我们使用 link 元素将一个名为 components.html 的文件导入到当前 HTML 文件中。components.html 中包含两个自定义元素：my-button 和 my-input。在当前 HTML 中，我们只需使用这些自定义元素，而无需任何其他代码。
总结
Web Components 具有很多强大的功能，可以帮助开发人员创建可重用、模块化和易于维护的 Web 应用程序。在学习 Web Components 时，我们需要掌握 Custom Elements、Shadow DOM、HTML Templates 和 HTML Imports 这四个技术组成部分。在实践中，我们可以使用这些技术来创建自己的自定义元素和 HTML 模板，并将它们导入到其他 HTML 文件中使用。
示例代码
以下是一个完整的示例代码，使用了 Custom Elements、Shadow DOM 和 HTML Templates：
-- -------------------- ---- -------
----- ------ ------- ----------- -
------------- -
--------
----- ---- - ---------------------------------------------
----- ------ - ------------------- ----- ------ ---
-----------------------------------------
------------------------------- - ---------------------------
-------------------------------------- - ---------------------------
------------------------------------- - ---------------------------------
-
-
-------------------------------- --------
----- ---- - -----------------------------------
----------------------- -------------
-------------- - -
-------
----- -
------- --- ----- ------
-------- -----
----------- -------
-
--- -
------ -----
-
--------
---- -------------
---- ------ -------
---------
-------
------
--
--------------------------------
----------------------- -- -
-------- ------------------ ----------- -- ----------------- -- ---- -------------
-------- ------------------ ----------- -- ----------------- -- ---- -------------
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645dcfe6968c7c53b00308bf