Web Components 是一项全新的 Web 技术标准，它可以让我们更轻松地开发可重用的、独立的 UI 组件。这些组件可以是完全自定义的，并且可以在任何现代浏览器中使用。本文将介绍如何使用原生 JS 创建自定义 Web Components，并提供实用的示例代码，帮助你快速入门。
Web Components 的基本组成部分
在介绍如何创建自定义 Web Components 之前，先来了解一下 Web Components 的基本部分：
Custom Element
Custom Element 是 Web Component 的核心部分，它是一个完全自定义的 HTML 标签。通过 Custom Element，你可以创建自己的标签，并定义其行为和样式。例如，你可以创建一个名为 my-button 的 Custom Element，它可以扩展 HTMLButtonElement 来定义一个新的按钮。
Shadow DOM
Shadow DOM 允许你将自定义的 HTML 和 CSS 封装在 Custom Element 内部。它可以让你的组件具有更好的隔离性和封装性，避免样式和事件冲突。
HTML Templates
HTML Templates 是一个可重用的 HTML 片段。在 Web Components 中，你可以使用 HTML Templates 来定义 Custom Element 的结构和内容，而不需要将其硬编码到 JavaScript 中。
HTML Imports (已废弃)
HTML Imports 提供了一种将 HTML 模板和资源导入 Web 页面的方式。不过，HTML Imports 已被废弃，我们可以使用 ES6 的 import 和 export 或者 Webpack 等现代工具代替。
下面，让我们使用这些基本部分来创建一个简单的 Web Component。
创建简单的 Custom Element
首先，我们需要创建一个完全自定义的 HTML 标签（Custom Element）。原生 JS 提供了一个非常简单的方法来创建 Custom Element，即 CustomElementRegistry.define() 方法。
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
-
------------------- -
-------------- - ------ -----
-
-
---------------------------------- ----------代码解释：
- 首先，我们使用 class 来定义一个 MyButton 类，并继承自 HTMLElement。
- 我们在 MyButton 类中定义了构造函数和 connectedCallback 方法。constructor() 函数负责传递参数并初始化组件，而 connectedCallback() 方法则在 Custom Element 首次连接到文档后被调用。在本例中，我们在 connectedCallback() 方法中设置了按钮的文本。
- 最后，我们使用 customElements.define() 方法来注册 Custom Element。该方法接受两个参数：第一个参数是 Custom Element 的名称，第二个参数是定义 Custom Element 的类。
现在，我们已经成功创建了一个 Custom Element，我们可以在任何 HTML 页面上使用它：
<body> <my-button></my-button> </body>
在 Custom Element 中使用 Shadow DOM
为了封装 Custom Element 内部的 HTML、CSS 和 JavaScript，我们可以使用 Shadow DOM 来创建一个范围（scoped）的 DOM 树。实现起来也非常简单，只需要将 Shadow DOM 附加在 Custom Element 上。
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- ------ - ---------------------------------
------------------ - ------ -----
---------------------------
-
-
---------------------------------- ----------代码解释：
- 我们在构造函数中使用 this.attachShadow() 方法来创建 Shadow DOM 范围。
- 然后，我们创建了一个 button 元素，并将其文本设置为 'Click me!'。
- 最后，我们将按钮添加到 Shadow DOM 范围中。
现在，我们已经成功创建了一个带有 Shadow DOM 的 Custom Element，我们可以在任何 HTML 页面上使用它：
<body> <my-button></my-button> </body>
在 Custom Element 中使用 HTML Templates
HTML Templates 允许我们将可重用的 HTML 片段封装到模板中，并在 Web Component 中重复使用。让我们来创建一个带有模板的 Custom Element：一个具有自定义消息的弹出式对话框。
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- -------- - ---------------------------------------
----- ----- - ------------------------------------- ------
----- ------- - -----------------------------
------------------------------------------- - --------
------------------------------------------------------- -- -- -
-------------
---
--------------------------
-
------- -
--------------
-
-
------------------------------------ ------------代码解释：
- 首先，我们创建了一个名为 MessageBox 的 Custom Element。
- 在构造函数中，我们使用 this.attachShadow() 方法来创建 Shadow DOM 范围。
- 然后，我们从 HTML 模板中克隆对话框的结构。
- 我们使用 this.getAttribute() 方法获取 Custom Element 的 message 属性，并将其插入到对话框中的 .message 元素中。
- 最后，我们添加了一个 .close 类型的按钮，并使用 this.close() 方法来关闭对话框。
这里是我们使用的 HTML 模板：
-- -------------------- ---- -------
--------- -----------------
-------
-------- -
-------- -----
--------- ------
---- --
------ --
------- --
----- --
------------ -------
---------------- -------
----------------- ------- -- -- -----
-
------- -
-------- -----
--------------- -------
---------- ------
---------- ------
-------- -----
-------------- ----
----------------- ------
----------- ------- -- -- ---- --- --- ----
-
-------- -
-------------- -----
---------- -------
------------ -----
-
------ -
----------- ---------
------ -----
------- --------
-
------------ -
------ -----
-
--------
---- ----------------
---- ---------------
---- ----------------------
---- ---------------------
------
------
-----------现在，我们已经成功创建了一个带有模板的 Custom Element。我们可以在任何 HTML 页面上使用它，并传递 message 属性：
<body> <message-box message="Hello, world!"></message-box> </body>
结论
Web Components 技术为前端开发者提供了一种全新的方法来定义可重用的、独立的 UI 组件。本文介绍了 Web Components 的基本部分，并提供了创建 Custom Element、使用 Shadow DOM 和 HTML Templates 的示例代码。通过本文的学习，你将掌握如何使用原生 JS 创建自定义 Web Components，为你的项目带来更强大的可复用性和扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672a1620ddd3a70eb6cf28ee