什么是 Custom Elements
Custom Elements 是 Web Components 的一部分，它允许开发者定义自己的 HTML 标签，并在页面中使用它们。Custom Elements 由两部分组成：定义和使用。定义就是开发者创建一个自定义元素的过程，使用就是把这个自定义元素使用在页面中的过程。
自定义元素的生命周期
自定义元素的生命周期包括以下几个阶段：
注册阶段：定义自定义元素并注册它，定义可以通过 JavaScript 的类来实现，注册可以通过
customElements.define()方法来实现。构造阶段：当自定义元素被实例化时，会进入构造阶段。在这个阶段，我们可以进行一些初始化操作，比如添加事件监听器、初始化属性等。
连接阶段：在自定义元素被添加到文档中时，会进入连接阶段。在这个阶段，我们可以进行一些 DOM 操作，比如添加子元素。
断开阶段：当自定义元素从文档中被移除时，会进入断开阶段。在这个阶段，我们可以进行一些清理操作，比如移除事件监听器。
观察阶段：在自定义元素的属性值发生变化时，会进入观察阶段。在这个阶段，我们可以对属性值进行处理，比如根据属性值更新元素的样式。
卸载阶段：当自定义元素被销毁时，会进入卸载阶段。在这个阶段，我们可以进行一些资源释放操作，比如清空定时器。
钩子函数
在自定义元素的生命周期中，我们可以通过一些钩子函数来实现对应的操作。下面是钩子函数的详细说明：
constructor()：构造函数，用于初始化自定义元素。在这个函数中，我们可以添加事件监听器、初始化属性等。
connectedCallback()：连接回调函数，用于在自定义元素被添加到文档中时进行一些 DOM 操作，比如添加子元素。
disconnectedCallback()：断开回调函数，用于在自定义元素从文档中被移除时进行一些清理操作，比如移除事件监听器。
attributeChangedCallback()：属性变化回调函数，用于在自定义元素的属性值发生变化时进行处理，比如根据属性值更新元素的样式。
adoptedCallback()：采用回调函数，用于在自定义元素被移动到新的文档时进行一些操作。
下面是一个示例代码，演示了如何使用 Custom Elements 和钩子函数来创建一个自定义元素。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------- ------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
---------------------------
-
------------------- -
---------------------------------
-------------- - ----------- -------------
-
---------------------- -
------------------------------------
-
------------------------------ --------- --------- -
--------------------------------------- ----- --------- ----------
-- ----- --- ------- -
-------------- - ----------- -------------------
-
-
-
----------------------------------- -----------
---------
-------
-------在这个示例代码中，我们定义了一个名为 MyElement 的自定义元素，并在其中实现了 constructor()、connectedCallback()、disconnectedCallback() 和 attributeChangedCallback() 四个钩子函数。当这个自定义元素被添加到文档中时，会输出 constructor 和 connectedCallback，并在其中添加一个标题元素；当这个自定义元素被移除时，会输出 disconnectedCallback；当这个自定义元素的 name 属性值发生变化时，会输出 attributeChangedCallback 并根据属性值更新元素的内容。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d565f0a941bf7134a0cb67