Web Components 是一种 Web 技术，它可以让开发者创建可重用的 UI 组件，这些组件可以在任何 Web 应用程序中使用。 组件化开发已经非常流行，因为它可以增加代码的可重用性，减少代码的重复性。当我们使用组合和 Web Components 来创建可重用的 UI 组件时，我们能够使我们的代码更加清晰、可维护和可扩展。
组合
组合是一个非常强大的编程工具，它允许我们将小组件与大组件组合在一起。 它可以使代码更加模块化、更易于理解。我们可以将所有的 UI 组件拆分成更小的部分，然后将它们组合起来，创建出更复杂的 UI 组件。
例如，假设我们已经有了一个按钮组件：
<button class="btn">按钮</button>
我们可以使用按钮组件来创建一个更复杂的组合组件：
<div class="modal">
<h1 class="modal__title">Modal title</h1>
<p class="modal__content">Modal content</p>
<div class="modal__actions">
<button class="modal__btn modal__btn--cancel">取消</button>
<button class="modal__btn modal__btn--confirm">确认</button>
</div>
</div>在这个例子中，我们使用按钮组件来创建模态框组件。模态框组件由标题、内容和操作按钮组成。
Web Components
Web Components 是一组 Web 平台 API，它允许我们创建自定义元素、Shadow DOM 和 HTML 模板。 在 Web Components 中使用组合是一种非常常见的模式。我们可以使用自定义元素来定义我们的 UI 组件，然后使用 Shadow DOM 和 HTML 模板来组合子组件。
自定义元素
自定义元素是 Web Components 中最基本的概念之一。它允许我们在 HTML 中定义自定义元素，这些元素可以有自己的行为和样式。
要创建自定义元素，我们需要使用 customElements.define() 方法来定义元素：
class MyElement extends HTMLElement {
constructor() {
super();
// 添加行为和样式
}
}
customElements.define('my-element', MyElement);这样，我们就可以在 HTML 中使用自定义元素了：
<my-element></my-element>
Shadow DOM
Shadow DOM 是 Web Components 中用于封装组件样式和 DOM 结构的一种机制。在 Shadow DOM 中，我们可以创建一个完全独立的 DOM 子树，它不会影响到外部文档的样式。
要创建 Shadow DOM，我们可以使用 attachShadow() 方法，并指定要使用的模式：
class MyElement extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
// 在 shadowRoot 中创建 DOM 结构和样式
}
}这样，我们就可以在自定义元素中创建独立的 Shadow DOM。
HTML 模板
HTML 模板是另一种 Web Components 中的机制，它允许我们定义一组带有占位符的 HTML 标记，从而创建可重用的 HTML 片段。
要使用 HTML 模板，我们可以在自定义元素中使用 <template> 标签和 content.cloneNode() 方法来克隆模板内容：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- -------- - -----------------------------------
------------------ - -
-------
-- ---- --
--------
---- -------------------
--------------------------------------
-------------
------
--
----- ------- - ---------------------------------
--------------------------------
-
-
----------------------------------- -----------在这个例子中，我们使用 HTML 模板来创建自定义元素。模板包含了我们的组件样式和占位符，占位符可以被充填组件内容。通过使用 content.cloneNode() 方法，我们可以在 Shadow DOM 中克隆模板内容，从而创建我们的组件。
示例代码
下面是基于 Web Components 和组合的可重用 UI 组件示例代码：
-- -------------------- ---- -------
----- ----- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- -------- - -----------------------------------
------------------ - -
-------
------ -
--------- ------
---- --
----- --
------ --
------- --
----------- ------- -- -- -----
-------- ------
-
-------------- -
--------- ---------
---- ----
----- ----
---------- --------------- ------
----------- -----
-------- -----
-------------- ----
----------- - - ---- ------- -- -- -----
-
------------- -
------- - - -----
---------- -------
-
--------------- -
------- --
-
--------------- -
----------- -----
----------- ------
-
----------- -
-------- -------------
-------- ------ -----
------------ -----
-------------- ----
------- --------
-
------------------- -
----------- --------
-
-------------------- -
----------- --------
------ -----
-
--------
---- --------------
---- ----------------------
--- -------------------------------------------------------
---- -----------------------
-------------
------
---- -----------------------
------- ----------------- -------------------------------
------- ----------------- --------------------------------
------
------
------
--
----- ------- - ---------------------------------
--------------------------------
-
-
------------------------------------- -------
----- ------ ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- -------- - -----------------------------------
------------------ - -
-------
---- -
-------- -------------
-------- ------ -----
----------- --------
------ -----
-------------- ----
------- --------
-------- -----
------- -----
-
--------
------- -------------------------------------------------
--
----- ------- - ---------------------------------
--------------------------------
-
-
---------------------------------- --------
----- ----- - ---------------------------------------
--------------------------- ------ --------
---------------------------------
----- ------------ - ------------------------------------
--------------------------------- ------
-------------------------------------------------------------
----- ------------- - ------------------------------------
---------------------------------- ------
------------------------------------------------------------------在这个示例中，我们创建了两个 Web Components：Modal 和 Button。 Modal 是一个模态框组件，它由标题、内容和操作按钮组成。Button 是一个按钮组件，它只有一个文本内容。
通过组合，我们可以使用按钮组件来创建模态框组件。在示例代码中，我们首先创建了 Modal 组件，然后将其添加到 document 的 body 中。然后，我们创建了两个 Button 组件：一个取消按钮和一个确认按钮，将它们添加到 Modal 组件中的操作按钮组中。
总结
使用组合和 Web Components 创建可重用的 UI 组件是一种非常重要的技术。它可以增加代码的可维护性和可重用性，减少代码的冗余。通过使用 HTML 模板、自定义元素和 Shadow DOM，我们可以构建功能强大的 UI 组件，并且它们可以在任何 Web 应用程序中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64878b1748841e98946296e4