什么是自定义元素？
自定义元素是 Web Components 的一部分，它可以让开发者创建自己的 HTML 标签。使用自定义元素可以将组件封装成一个自定义的 HTML 标签，使其更易于重用和维护。
如何定义自定义元素？
在 JavaScript 中，我们可以使用 CustomElementRegistry 的 define() 方法来定义自定义元素。该方法接收两个参数：元素名称和元素定义。
元素名称必须包含一个短横线，例如 my-element。元素定义可以是一个 JavaScript 类，也可以是一个对象字面量。以下是一个自定义元素的示例定义：
class MyElement extends HTMLElement {
constructor() {
super();
// 初始化代码
}
}
customElements.define('my-element', MyElement);在这个示例中，我们定义了一个名为 MyElement 的类，该类继承自 HTMLElement。在构造函数中，我们可以添加初始化代码。最后，我们使用 customElements.define() 方法将 MyElement 类注册为自定义元素 my-element。
自定义元素的生命周期
自定义元素有四个生命周期阶段：
connectedCallback()：当元素首次被插入文档 DOM 时调用。disconnectedCallback()：当元素从文档 DOM 中删除时调用。attributeChangedCallback(attrName, oldVal, newVal)：当元素的一个属性被增加、移除或更改时调用。adoptedCallback()：当元素被移动到新的文档时调用。
以下是一个自定义元素的完整定义，包括生命周期方法：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- -----
-
------------------- -
---------------------- ------------
-
---------------------- -
---------------------- ---------------
-
---------------------------------- ------- ------- -
---------------------- --------- ----------- ------- ---- --------- -- ------------
-
----------------- -
---------------------- ----------
-
-
----------------------------------- -----------使用自定义元素时的注意事项
- 自定义元素名称必须包含一个短横线，例如
my-element。 - 自定义元素的生命周期方法必须按照规定的名称进行命名。
- 自定义元素的构造函数中必须调用
super()方法。 - 自定义元素的属性必须使用
setAttribute()和getAttribute()方法来设置和获取。 - 自定义元素的属性变化只会在
attributeChangedCallback()方法中被捕获，而不会在connectedCallback()方法中被捕获。
示例代码
以下是一个自定义元素的示例代码，该元素显示一个计数器，并在每次单击时增加计数器的值：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
---------- - --
------------------------------ -- -- -
-------------
--------------
---
-
------------------- -
--------------
-
-------- -
-------------- - -
------------
-------------------------
--
-
-
----------------------------------- -----------
---------
-------
-------在这个示例中，我们定义了一个名为 MyCounter 的自定义元素，它继承自 HTMLElement。在构造函数中，我们添加了一个计数器变量 count，并在每次单击时增加该变量的值，并调用 render() 方法来重新渲染计数器。在 connectedCallback() 方法中，我们调用 render() 方法来初始化计数器。最后，我们使用 customElements.define() 方法将 MyCounter 类注册为自定义元素 my-counter，并在 HTML 中使用该元素。
总结
在 JavaScript 中使用自定义元素可以让开发者创建自己的 HTML 标签，使组件更易于重用和维护。在定义自定义元素时，我们需要注意元素名称的格式、生命周期方法的命名、调用 super() 方法等问题。在使用自定义元素时，我们需要使用 setAttribute() 和 getAttribute() 方法来设置和获取属性，并注意属性变化只会在 attributeChangedCallback() 方法中被捕获。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ff9f3bd10417a222ad4689