随着 Web 应用的日益复杂，我们需要大量的 UI 组件来构建页面。然而，传统的开发方式往往会导致代码混乱，维护成本高，且无法实现组件的复用。这时，我们可以利用浏览器原生的 Custom Elements 和 Shadow DOM API 来创建可复用的 UI 组件。
Custom Elements
Custom Elements API 允许我们创建自定义元素，这些元素可以像普通 HTML 元素一样使用，同时可以自定义其功能和样式。
定义自定义元素
使用 Custom Elements API 定义自定义元素非常简单。我们只需要继承 HTMLElement 类，然后使用 customElements.define() 方法将其与自定义标签进行关联即可。
----- --------- ------- ----------- -
------------- -
--------
-- -------- ------ ---
-
-
----------------------------------- -----------在上述代码中，我们定义了一个名为 MyElement 的类，它继承自 HTMLElement。在类的构造函数中，我们可以构建元素的 Shadow DOM。最后，使用 customElements.define() 方法将 MyElement 与自定义标签 my-element 进行关联。
使用自定义元素
定义自定义元素之后，我们就可以像使用普通 HTML 元素一样使用它了。
-------------------------
自定义元素的生命周期
自定义元素有以下几个生命周期：
constructor(): 构造函数，用于初始化元素。connectedCallback(): 元素插入文档时调用，用于初始化 Shadow DOM 和添加事件监听器等操作。disconnectedCallback(): 元素从文档中删除时调用，用于清理元素。attributeChangedCallback(name, oldValue, newValue): 属性值发生变化时调用，用于更新元素状态。
在自定义元素中，我们可以使用这些生命周期方法来实现各种功能，例如：创建 Shadow DOM、添加事件监听器、响应属性变化等。
Shadow DOM
Shadow DOM API 允许我们创建独立的 DOM 树，它与主文档 DOM 树完全隔离，且具备自己的作用域和 CSS 样式。
创建 Shadow DOM
在 Custom Elements 的构造函数中，我们可以使用 this.attachShadow() 方法创建 Shadow DOM。该方法接受一个配置对象，用于指定 Shadow DOM 的特性。
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-- - ------ ---- --------
-
-在上述代码中，我们使用 this.attachShadow() 方法创建了一个开放式的 Shadow DOM。然后，我们可以在 Shadow DOM 上添加元素和样式，例如：
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
----- -
-------- ------
-------- -----
------- --- ----- ------
-
- -
------------ -----
------ -----
-
--------
--------- ----------
--
-
-在上述代码中，我们使用 innerHTML 属性向 Shadow DOM 插入了一个样式和一个段落元素，并设置了它们的样式。
将样式从主文档中隔离
使用 Shadow DOM 后，我们可以将样式从主文档中隔离，实现样式的复用和封装。为了做到这一点，我们可以使用 :host 选择器。
----- - -------- ------ -------- ----- ------- --- ----- ------ -
在上述代码中，我们使用 :host 选择器选择 Shadow DOM 的根元素，然后为其设置样式。这样，我们就可以实现元素与主文档样式的完全隔离。
利用 Custom Elements 和 Shadow DOM 构建可复用的 UI 组件
使用 Custom Elements 和 Shadow DOM，我们可以构建可复用且具有封装性的 UI 组件。下面，我们将使用这两个 API 来创建一个自定义的按钮组件。
定义按钮组件
----- -------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- ----- - --------------------------------
--------------- - -
----- -
-------- -------------
------- -----
------- --------
------------ -----
----------------- --------
------ -----
---------- -----
-------- ---- -----
-------- -----
-------------- ----
-
------------- -
----------------- --------
-
--
----- ------ - ---------------------------------
---------------- - --------------------------
------------------------------
-------------------------------
-
-
---------------------------------- ----------在上述代码中，我们定义了一个名为 MyButton 的自定义元素类。在构造函数中，我们创建了一个 Shadow DOM，并向其中插入了一个样式和一个按钮元素。除此之外，我们还通过 this.getAttribute() 方法获取了自定义元素的属性值，并将它赋值给了按钮的文本。
使用按钮组件
使用按钮组件非常简单，只需要在 HTML 中引用即可。
---------- ----------- -----------------
在上述代码中，我们创建了一个名为 my-button 的自定义元素，并将 text 属性设置为 Click me!。这样就创建了一个带有文本的自定义按钮元素。
总结
Custom Elements 和 Shadow DOM API 可以帮助我们实现可复用、封装的 UI 组件。通过继承 HTMLElement 类并使用 attachShadow() 方法创建 Shadow DOM，我们可以实现组件与主文档完全隔离，并拥有自己的 CSS 样式。同时，通过 Custom Elements API，我们还可以像使用普通 HTML 元素一样使用自定义组件，大大提高了组件的可复用性和维护成本。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65a47766add4f0e0ffcbe639