在前端开发中，我们经常需要构建各种 UI 组件来实现界面的呈现以及页面的交互处理。如果我们用传统的方式编写组件，通常会让代码变得混乱不堪，维护成本也会越来越高。为了解决这个问题，我们可以使用 Custom Elements 构建可组合的 UI 设计系统，以提高开发效率和可维护性。
Custom Elements 是什么？
Custom Elements 是 W3C Web Components 规范中的一部分，它允许开发者创建自定义的 HTML 元素，并让这些元素具有自己的属性和方法，以及与其他 Web Components 进行交互的能力。使用 Custom Elements，我们可以轻松地创建可重用和自定义的组件，大大提高我们的开发效率。
如何使用 Custom Elements？
创建 Custom Elements 需要使用到两个 API：CustomElementRegistry 和 HTMLElement。其中 CustomElementRegistry 用于定义和注册自定义元素，HTMLElement 用于实现自定义元素的属性和方法。
首先，我们需要使用 CustomElementRegistry 的 define() 方法来定义一个自定义元素。例如，定义一个名为 my-element 的元素：
class MyElement extends HTMLElement {
connectedCallback() {
this.innerHTML = '<h1>Hello, world!</h1>';
}
}
customElements.define('my-element', MyElement);然后，在 HTML 中我们可以像使用标准 HTML 元素一样使用这个自定义元素：
<my-element></my-element>
当页面加载完成后，Custom Element 会被创建，进而调用它的 connectedCallback() 方法，在这个方法中我们可以编写组件的初始化代码。
接下来，我们可以定义 Custom Element 的属性和方法，这需要我们使用 HTMLElement 类提供的 setter 和 getter 方法来实现。例如，我们可以给 my-element 组件添加一个属性 message：
-- -------------------- ---- -------
----- --------- ------- ----------- -
--- --------- -
------ -----------------------------
-
--- -------------- -
---------------------------- -------
-
------------------- -
-------------- - ---------------------------
-
-
----------------------------------- -----------现在，我们可以在 HTML 中为 my-element 传递一个 message 属性：
<my-element message="Hello, world!"></my-element>
当 Custom Element 的属性值发生变化时，Custom Element 会自动调用 setter 方法，进而更新组件的状态。
如何组合 Custom Elements？
当我们创建了多个 Custom Element 后，我们可以使用 Shadow DOM 将它们组合到一起，并实现复杂的 UI 界面。Shadow DOM 允许我们将一个 Custom Element 的 HTML、CSS 和 JavaScript 封装到一个独立的作用域中，避免了样式和行为的冲突。
例如，我们可以创建一个包含 TextInput 和 Button 两个 Custom Element 的 Form 组件：
-- -------------------- ---- -------
----- ---- ------- ----------- -
------ --- -------------------- -
------ --------- ------- ----------------
-
------------- -
--------
----- ------ - ------------------------ ---------
----- ----- - --------------------------------
----------------- - -
----- -
-------- ------
-------- -----
------- --- ----- -----
-
-- -
----------- --
-
----- -
------------- ----
-------- ----
---------- -----
------- --- ----- -----
-------------- ----
-
------ -
-------- --- -----
---------- -----
------- -----
-------------- ----
------ ------
----------------- -----
------- --------
-
--
--------------------------
----- ---- - -------------------------------
----- -- - -----------------------------
-------------- - ---------------------------
---------------------
----- ----- - ----------------------------------------
------------- - --------------------------
------------------------
----- ------ - ------------------------------------
------------ - ----------------------------------
-------------------------------- --- -- -
-------------------
-------------------------
---
-------------------------
-------------------------
-
------------------------------ --------- --------- -
-- ----- --- -------- -
----------------------------------------------- - ---------
- ---- -- ----- --- ------- -
------------------------------------------------------ - ---------
- ---- -- ----- --- --------------- -
------------------------------------------------ - ---------
-
-
-
-------------------------------- ------在这个例子中，我们使用 Shadow DOM 创建了一个作为 Form 组件的容器，并将 TextInput 和 Button 组件添加到容器中，然后使用属性来实现自定义和组合。当 Form 组件的属性值发生变化时，Custom Element 会调用 attributeChangedCallback() 方法来更新组件状态。
总结
使用 Custom Elements 需要一定的学习和实践，但一旦熟悉起来，它可以帮助我们构建良好的组件库，以提高开发效率和代码可维护性。在使用 Custom Elements 时，我们应该遵循以下原则：
- 保持组件的单一职责，让组件更易于重用和测试；
- 使用属性来传递数据，以实现自定义和组合；
- 使用 Shadow DOM 将组件的 HTML、CSS 和 JavaScript 封装到一个独立的作用域中，避免了样式和行为的冲突。
示例代码已经在本篇文章中提供，读者可以自行实践，并应用到实际的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647b17e0968c7c53b06a957b