Custom Elements 是一项 Web 标准，它允许开发者创建自定义的 HTML 元素，并将其作为原生的 HTML 元素一样使用。这项技术使得开发者可以更加方便地构建可复用、可扩展的 UI 组件，并且这些组件可以跨浏览器共享。本文将介绍如何使用 Custom Elements 构建 UI 组件，并提供示例代码。
Custom Elements 的基本概念
Custom Elements 允许开发者创建自定义的 HTML 元素，这些元素可以拥有自己的属性、方法和事件。在创建 Custom Elements 时，开发者需要实现两个关键的接口：CustomElementRegistry 和 HTMLElement。
CustomElementRegistry 接口用于注册和管理自定义元素。开发者可以使用 customElements.define() 方法将自定义元素注册到 CustomElementRegistry 中。
HTMLElement 接口用于定义自定义元素的行为。开发者需要继承 HTMLElement 接口，并实现自己的属性、方法和事件。
创建一个简单的 Custom Element
下面是一个简单的 Custom Element 示例代码，它定义了一个名为 my-element 的自定义元素，并在元素中显示一个文本：
--------- -----
------
------
----- ----------------
------------- ------- ----------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
---------------- - ------- --------
-
-
----------------------------------- -----------
---------
-------
-------在这个示例中，我们创建了一个名为 MyElement 的类，并继承了 HTMLElement 接口。在构造函数中，我们将文本内容设置为 'Hello, World!'。然后，我们使用 customElements.define() 方法将自定义元素注册到 CustomElementRegistry 中。
创建一个带有属性的 Custom Element
除了文本内容，Custom Element 还可以拥有自己的属性。下面是一个带有属性的 Custom Element 示例代码，它定义了一个名为 my-element 的自定义元素，并在元素中显示一个文本和一个按钮。当用户点击按钮时，文本内容会根据按钮的属性值进行更新：
--------- -----
------
------
----- ----------------
------------- ------- ----------
-------
------
----------- --------------- ---------------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------------ ---------
----- ------- - -----------------------------
----- --- - ------------------------------
--------------- - --------
----- ------ - ---------------------------------
------------------ - ---------
-------------------------------- -- -- -
----- ---------- - ---------------------------- - - ---------
--------------- - -----------
---
------------------------
---------------------------
-
------ --- -------------------- -
------ ------------
-
------------------------------ --------- --------- -
----- --- - -------------------------------------
--------------- - ---------
-
-
----------------------------------- -----------
---------
-------
-------在这个示例中，我们定义了一个名为 message 的属性，并在构造函数中获取该属性的值。然后，我们创建了一个 div 元素，并将文本内容设置为 message 属性的值。同时，我们也创建了一个按钮，并为其添加了点击事件。当用户点击按钮时，我们会根据 message 属性的值更新文本内容。
为了监听属性变化，我们需要在 MyElement 类中实现 observedAttributes 和 attributeChangedCallback 两个方法。observedAttributes 方法返回一个数组，包含我们关心的属性名称。attributeChangedCallback 方法在属性值变化时被调用，我们可以在其中更新对应的 DOM 元素。
创建一个可复用的 Custom Element 组件
当我们创建了一个自定义元素后，我们可以将其视为一个可复用的组件，可以在不同的 Web 页面中使用。为了使自定义元素更加可复用，我们可以将其封装成一个组件类，并将其发布到 NPM 上，供其他开发者使用。
下面是一个简单的 Custom Element 组件示例代码，它定义了一个名为 my-button 的自定义按钮组件：
------ ------------------
----- -------- ------- ----------- -
------------- -
--------
----- ------ - ------------------------ ---------
----- ------ - ---------------------------------
------------------ - -----------------
---------------------------
-
-
---------------------------------- ----------在这个示例中，我们创建了一个名为 MyButton 的组件类，并继承了 HTMLElement 接口。在构造函数中，我们创建了一个按钮，并将其添加到 Shadow DOM 中。这个组件还引入了一个名为 my-button.css 的样式文件，用于定义按钮的样式。
总结
Custom Elements 是一项非常有用的 Web 技术，它允许开发者创建自定义的 HTML 元素，并将其作为原生的 HTML 元素一样使用。通过使用 Custom Elements，开发者可以更加方便地构建可复用、可扩展的 UI 组件，并且这些组件可以跨浏览器共享。本文介绍了如何使用 Custom Elements 构建 UI 组件，并提供了示例代码。希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660a7053d10417a222a099ca