什么是 Custom Elements
Custom Elements 是 Web Components 规范的一部分，它允许开发者创建自定义 HTML 元素，并在页面中使用它们。这些自定义元素可以像内置的 HTML 元素一样使用和操作，并且可以通过 JavaScript API 进行扩展和控制。
为什么要使用 Custom Elements
使用 Custom Elements 可以将重复使用的 HTML 代码封装成自定义元素，方便开发者在项目中重复使用。同时，自定义元素可以封装自己的样式、行为和逻辑，使得代码更加模块化，易于维护和升级。
如何使用 Custom Elements
定义 Custom Element
要定义一个 Custom Element，需要使用 window.customElements.define 方法。该方法接受两个参数：元素名称和元素类。元素名称应该是一个带有短划线的字符串，例如 my-element；元素类应该继承自 HTMLElement，并且实现自定义元素的行为和逻辑。
以下是一个简单的自定义元素示例：
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
-------------- - ------- --------
-
-
------------------------------------------ -----------
---------在上面的代码中，我们定义了一个名为 my-element 的自定义元素，并设置其内部 HTML 内容为 Hello, World!。我们使用 window.customElements.define 方法将 MyElement 类与 my-element 元素名称进行关联。
使用 Custom Element
定义 Custom Element 后，我们可以像使用内置元素一样使用它们。例如，我们可以在 HTML 中添加一个 my-element 元素：
------ ------------------------- -------
在页面中加载后，我们将看到 Hello, World! 文本出现在页面上。
扩展 Custom Element
自定义元素可以通过 JavaScript API 进行扩展和控制。例如，我们可以添加自定义属性、方法和事件：
----------- -------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
--------- - --------------------------
-------------- - ------- ---------------
-
---------- -
------------------- ----------------
-
------------------- -
------------------------------ --------------------------
-
-
------------------------------------------ -----------
---------在上面的代码中，我们添加了一个 name 属性，并在构造函数中将其设置为元素的属性值。我们还添加了一个 sayHello 方法，并在 connectedCallback 方法中将其绑定到元素的 click 事件上。
现在，我们可以在页面中使用 my-element 元素，并调用 sayHello 方法：
------
----------- -------------------------
--------
------------------------------------------------ -- --------- -----
---------
-------总结
使用 Custom Elements 可以帮助我们封装重复使用的 HTML 代码，并将其封装为自定义元素。通过 JavaScript API，我们可以扩展自定义元素的属性、方法和事件，使得代码更加模块化和易于维护。希望本文对你了解和使用 Custom Elements 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c92ea8add4f0e0ff2f2a3d