Web Components 是一种新的 Web 标准，它允许我们创建自定义的 HTML 标签，使我们能够构建可重用和可组合的 UI 组件。这对于前端开发来说是一个重要的里程碑，因为它消除了很多现有的痛苦和不便，使得开发更加清晰和高效。本文将介绍 Web Components 的基本概念和如何使用它构建可重用和可组合的 UI 组件。
Web Components 的概念
Web Components 是由四个技术规范组成的集合，分别是：Custom Elements、Shadow DOM、HTML Templates 和 HTML Imports。
Custom Elements
Custom Elements 是 Web Components 的核心规范。它允许我们创建自定义的 HTML 标签，它们可以像浏览器的内置标签一样工作。
class MyComponent extends HTMLElement {
constructor() {
super();
this.textContent = 'Hello, World!';
}
}
customElements.define('my-component', MyComponent);在上面的代码中，我们创建一个叫做 MyComponent 的自定义 HTML 标签，它继承自 HTMLElement，实现了这个标签的行为和内容。接着，我们使用 customElements.define 将这个自定义标签与 MyComponent 类关联起来。现在，我们就可以在 HTML 中使用这个标签了：
<my-component></my-component>
Shadow DOM
Shadow DOM 是 Web Components 另一个重要的规范，它允许我们创建独立的 DOM 树，并将其附加到自定义的 HTML 标签上。这意味着我们可以将组件的样式和行为封装在一个安全的容器中，避免与其他元素产生冲突。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- --- - ------------------------------
------------- - ----------- -------------
----- ----- - --------------------------------
----------------- - -
-- -
------------ -----------
------ ----
-
--
--------------------------
------------------------
-
-
------------------------------------- -------------在上面的代码中，我们将 MyComponent 的组件内容和样式封装在了 Shadow DOM 容器中。this.attachShadow({ mode: 'open' }) 将创建一个名为 shadow 的独立 DOM 树，并将其附加到自定义标签上。然后，我们使用 document.createElement 创建一个 div 元素，它包含了组件的 HTML 内容。接着，我们用 document.createElement 创建一个 style 元素，该元素包含了组件的 CSS 样式。最后，我们将 style 和 div 元素都添加到 shadow 中。
HTML Templates
HTML Templates 是 Web Components 规范的第三个规范，它允许我们定义重复使用的 HTML 片段。这些模板可以在代码中以编程方式使用，并且可以作为 Web Components 的一部分引用。
-- -------------------- ---- -------
----- -------- - -----------------------------------
------------------ - -
-------
---- -
------ ----
-
--------
---- ------------
---------- -----------
------
--
----- ----------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
-----------------------------------------------------
-
-
------------------------------------- -------------在上面的代码中，我们定义了一个 HTML 模板 template，它包含了组件的 HTML 内容和 CSS 样式。然后，我们在 MyComponent 的构造函数中将这个模板附加到 Shadow DOM 容器中。使用 template.content.cloneNode(true) 将模板内容的拷贝添加到 Shadow DOM 中。
HTML Imports
HTML Imports 是 Web Components 规范的第四个规范，它允许我们导入 HTML 文件，就像 JavaScript 文件一样。这使得我们可以轻松地共享和重复使用 Web Components。
构建可重用和可组合的 UI 组件
构建 Web Components 最大的优势之一是能够实现可重用和可组合的 UI 组件。这可以减少代码的冗余和复杂性，并提高开发效率。
示例：构建 Tabs 组件
在下面的示例中，我们将演示如何使用 Web Components 构建一个 Tabs 组件，它由多个选项卡组成，可以轻松切换不同的内容。这个组件将使用 Custom Elements、Shadow DOM、HTML Templates 和 HTML Imports 去实现。
定义组件的 HTML
-- -------------------- ---- -------
--------- ------------------
-------
---- -
-------- -----
-------- -----
-
----------- -
-------- ------
-
--------
---- ----------- ----------------
----- -------------------
------
-----------
---- -------------
-----
--- -------------------
------
---- -----------------------
------这个 HTML 片段包含了两部分内容：
tab-template：这是一个模板元素，它包含了一个包含组件 HTML 和 CSS 的模板。这个模板将用来创建选项卡标签和内容。.tabs：这个div元素包含了一个用于导航选项卡的ul元素和一个用于显示选项卡内容的div元素。
使用 Custom Elements 创建 Tabs 组件
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- -------- - -----------------------------------------
----- -------- - ---------------------------------
-----------------------------
-
-
--------------------------------------- ---------------在上面的代码中，我们定义了一个 TabsComponent 类，并使用 Custom Elements 将其与 <tabs-component> 标签关联。constructor() 方法中创建了 Shadow DOM，并将模板的内容添加到其中。
动态创建选项卡标签和内容
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- -------- - -----------------------------------------
----- -------- - ---------------------------------
-----------------------------
----- ---- - --------------------------
----- ------- - ----------------------------------
----- ----------- - -------------------------------------
------------------ -- -
----- -- - -----------------------
----- ----- - --------------------------
----- ------ - ----------------------------
------------------ - ------
----------- - ---------
-------------------------------- ------- -- -
-----------------------
---------------------
---
----- -- - -----------------------------
-----------------------
------------------------
----- ---- - -----------------------------------------------
-----------------------------
----------------------------- ----
----- ---- - ---------------------------
------------------------- ----
------------------------------
---
---------------------------------------------
-
-
--------------------------------------- ---------------在这段代码中，我们将选项卡的标签和内容动态地创建出来。 Array.from(this.children) 返回 Tabs 组件下的所有选项卡元素，我们可以遍历这个数组以创建标签和内容。对于每个选项卡，我们将创建一个对应的 <a> 标签，用于导航到该选项卡。我们还将创建一个与选项卡对应的 <div> 标签，它包含了选项卡的内容。 通过将这个 <div> 标记为活动状态并设置 data-tab 属性，我们可以让它成为默认激活状态的选项卡。最后，我们还调用 activateTab() 方法，将第一个选项卡设置为活动状态。
实现选项卡的切换
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
---------------- - ----------------------------
----- ------ - ------------------- ----- ------ ---
----- -------- - -----------------------------------------
----- -------- - ---------------------------------
-----------------------------
----- ---- - --------------------------
----- ------- - ----------------------------------
----- ----------- - -------------------------------------
------------------ -- -
----- -- - -----------------------
----- ----- - --------------------------
----- ------ - ----------------------------
------------------ - ------
----------- - ---------
-------------------------------- ------- -- -
-----------------------
---------------------
---
----- -- - -----------------------------
-----------------------
------------------------
----- ---- - -----------------------------------------------
-----------------------------
----------------------------- ----
----- ---- - ---------------------------
------------------------- ----
------------------------------
---
---------------------------------------------
-
--------------- -
----- ---- - --------------------------
------------------ -- -
-- ----------------------- --- --- -
------------------------------
- ---- -
-------------------------- ------
-
---
----- -------- - ------------------------------------------------ -----
----------------------- -- -
-- -------------------------- --- --------- -
-----------------------------
- ---- -
--------------------------------
-
---
----- ---------- - ----------------------------------------------------
----- ----------- - -----------------------------------------------------
------------------------- -- -
-------------------------------
---
-----------------------------------
-
-
--------------------------------------- ---------------在上面的代码中，我们实现了 activateTab() 方法来切换选项卡。在这个方法中，我们首先遍历组件中的所有子元素，将 ID 与传递的 ID 进行比较，并设置相应的选项卡的 hidden 属性来控制其是否可见。接着，我们获取 nav 元素下的所有链接，将当前链接标记为活动链接，同时取消其它链接的活动状态。最后，我们遍历所有选项卡内容，将当前选项卡内容标记为活动状态，同时取消其它选项卡内容的活动状态。
总结
本文介绍了 Web Components 的基本概念，并演示了如何使用 Web Components 构建一个可重用和可组合的 Tabs 组件。Web Components 是一种新的 Web 标准，它为前端开发带来了新的工具和技术。通过 Web Components，我们可以轻松地创建自定义的 HTML 标签并将它们组装成更大的 UI 组件，从而提高开发效率并减少代码的复杂性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ec4860f6b2d6eab368c515