使用 Custom Elements 可以实现可重复使用的 UI 组件。Custom Elements 是一种 Web 组件 API，允许开发者创建自己的 HTML 元素并在应用程序中使用。
Custom Elements 的优点
Custom Elements 的优点在于它可以提高应用程序的可维护性和可重用性。通过将组件封装在自定义元素中，可以将功能更好地分离和抽象，使得代码更加清晰简洁。
另外，使用 Custom Elements 还可以实现自定义事件和方法，并提供了类似于 React 组件的生命周期方法，让开发者可以更好地控制组件的行为。
如何使用 Custom Elements
使用 Custom Elements 最基本的方法是使用其核心 API -- customElements.define() 方法来定义自定义元素。下面是示例代码：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- --- - ------------------------------
--------------- - ------ -------
------------------------
-
-
------------------------------------- -------------上述代码中，我们创建了一个名为 MyComponent 的自定义元素，其中 shadow 用于创建一个 Shadow DOM，通过在 Shadow DOM 中添加子元素来构建自定义元素的外观。我们使用 customElements.define() 方法来将自定义元素注册到 Web 应用程序的环境中。
通过自定义元素的定义，我们可以在 HTML 中使用自定义标签名，并调用自定义元素的属性和方法来控制组件的行为和外观。
<my-component></my-component>
如何创建可重复使用的 UI 组件
要创建可重复使用的 UI 组件，我们需要在自定义元素的定义中添加样式和事件处理程序，并使用自定义属性来控制组件行为。
下面是一个示例，展示了如何使用 Custom Elements 创建一个可重复使用的按钮组件，具有可配置的样式和事件处理程序：
-- -------------------- ---- -------
----- -------- ------- ----------- -
------ --- -------------------- -
------ -------- ---------
-
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- ------ - ---------------------------------
----------- - ---------
-------------------------------- -----------------------------
---------------------------
-
------------------------------ --------- --------- -
-- --------- --- --------- -
------ ------ -
---- -------
--------------------------------------------------- - ---------
------
---- --------
------------------------------------------------------------- - ---------
------
-
-
-
------------------ -
----- ---------- - --- -------------------- -
-------- ----
---
-------------------------------
-
-
---------------------------------- ----------上述代码中，我们创建一个名为 MyButton 的自定义元素，并使用 observedAttributes 方法来声明监听的自定义属性。我们使用 Shadow DOM 创建了一个按钮元素，并在元素上添加了 click 事件处理程序。在 attributeChangedCallback 方法中，当自定义属性变化时，我们更新了元素的外观样式，并提供了自定义事件 click 的支持。
<my-button text="Click Me!" color="green"></my-button>
在 HTML 中使用自定义元素时，我们可以按需配置自定义属性，从而控制组件的行为和外观。
总结
使用 Custom Elements 可以实现可重复使用的 UI 组件，提高应用程序的可维护性和可重用性，以及提供自定义事件和方法的支持。在创建自定义元素时，开发者可以自由地定义属性和方法，以及元素的外观和行为。Custom Elements 的使用方法简单，只需要添加一个自定义元素的定义即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64715b4e968c7c53b0f3cd1f