Web Components 是一种构建可重用 UI 组件的标准化方式，它将 HTML、CSS 和 JavaScript 组合在一起，形成一个独立的、可复用的组件。Custom Elements 是 Web Components 的核心 API，它允许我们创建自定义的 HTML 元素，并在其中封装复杂的行为和样式。
在本文中，我们将介绍如何使用 Custom Elements 构建 Web Components 集合。我们将讨论以下内容：
- 如何定义 Custom Elements
- 如何使用 Shadow DOM 封装样式和行为
- 如何使用 HTML Templates 定义组件的结构
- 如何使用 Slots 将内容插入组件
定义 Custom Elements
定义 Custom Elements 需要使用 window.customElements.define 方法。该方法接受两个参数：元素名称和元素类。元素名称应该符合自定义元素的命名规则，即包含一个连字符，并且不能与 HTML 元素重名。元素类应该继承自 HTMLElement 类，并实现 connectedCallback 和 disconnectedCallback 方法。
下面是一个简单的例子，定义了一个名为 my-element 的自定义元素：
----- --------- ------- ----------- -
------------------- -
-------------- - ------- --------
-
---------------------- -
-------------------- ------- ---- --- ------
-
-
------------------------------------------ -----------在该例子中，我们定义了一个名为 MyElement 的类，并实现了 connectedCallback 和 disconnectedCallback 方法。connectedCallback 方法会在元素被插入到文档中时被调用，我们在其中设置了元素的内容为 Hello, World!。disconnectedCallback 方法会在元素被从文档中移除时被调用，我们在其中输出了一条日志。
最后，我们调用了 window.customElements.define 方法，将 MyElement 类注册为 my-element 元素。
使用 Shadow DOM 封装样式和行为
Shadow DOM 是一种将组件的样式和行为封装在一个独立的作用域中的技术。使用 Shadow DOM，我们可以避免组件样式和行为被外部 CSS 和 JavaScript 影响，从而提高组件的可靠性和可维护性。
在 Custom Elements 中使用 Shadow DOM 非常简单，只需要在元素类的构造函数中创建一个 Shadow DOM，并将元素的内容插入其中即可。下面是一个例子：
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- ----- - --------------------------------
----------------- - -
----- -
-------- ------
-------- -----
----------------- --------
-
--
----- ------- - ------------------------------
------------------- - ------- --------
--------------------------
----------------------------
-
-
------------------------------------------ -----------在该例子中，我们在 MyElement 的构造函数中创建了一个 Shadow DOM，使用 attachShadow 方法，并将 mode 参数设置为 open，表示 Shadow DOM 是公开的，可以被外部 JavaScript 访问。然后，我们创建了一个样式元素和一个内容元素，并将它们插入到 Shadow DOM 中。
注意，我们使用了 :host 伪类来选择自定义元素本身，并将样式应用到它上面。这样，我们就可以在组件外部使用 CSS 来设置自定义元素的样式，而不会影响到组件内部的样式。
使用 HTML Templates 定义组件的结构
HTML Templates 是一种将 HTML 结构和内容封装在一个模板中的技术。使用 HTML Templates，我们可以定义组件的结构，并在组件中动态地插入内容。
在 Custom Elements 中使用 HTML Templates 也非常简单，只需要在元素类的构造函数中创建一个 HTML Template，并将其内容插入 Shadow DOM 中即可。下面是一个例子：
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- -------- - -----------------------------------
------------------ - -
-------
----- -
-------- ------
-------- -----
----------------- --------
-
--------
-----
--------- -------------------- -----------------
-------- ---------------------- ------------------
------
--
-----------------------------------------------------
-
-
------------------------------------------ -----------在该例子中，我们在 MyElement 的构造函数中创建了一个 HTML Template，使用 innerHTML 属性设置了模板的内容。注意，我们在模板中使用了 <slot> 元素来插入动态内容。<slot> 元素有一个 name 属性，用于指定插入的内容的名称。如果没有指定名称，则会使用默认名称。在组件中，我们可以使用 slot 元素来插入内容，并使用 name 属性来指定名称。
最后，我们将模板的内容插入到 Shadow DOM 中，使用 content 属性获取模板的内容，并使用 cloneNode 方法创建一个副本，将其插入到 Shadow DOM 中。
使用 Slots 将内容插入组件
Slots 是一种将内容插入组件的技术。使用 Slots，我们可以将组件的结构和内容分离开来，从而提高组件的可重用性和可维护性。
在 Custom Elements 中使用 Slots 非常简单，只需要在组件中定义 <slot> 元素，并在使用组件时，使用 slot 元素来插入内容即可。下面是一个例子：
------------ --- ------------------- ---------- -- --------------------- ----------- -------------
在该例子中，我们使用 <my-element> 元素来使用自定义元素，并使用 slot 元素来插入内容。注意，slot 元素的 name 属性必须与组件中定义的 name 属性相同，才能正确地插入内容。
总结
在本文中，我们介绍了如何使用 Custom Elements 构建 Web Components 集合。我们讨论了如何定义 Custom Elements、如何使用 Shadow DOM 封装样式和行为、如何使用 HTML Templates 定义组件的结构，以及如何使用 Slots 将内容插入组件。希望本文对您有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65fac104d10417a22268dce1