在前端开发中，我们经常需要创建自定义的 HTML 元素，以满足特定的需求。Custom Elements 是一种 Web 标准，它允许我们创建自定义的 HTML 元素，并且可以通过 JavaScript 进行控制和操作。在 Custom Elements 中，我们可以使用三个方法：createdCallback、attachedCallback、detachedCallback，来控制元素的创建、添加和移除。
createdCallback
createdCallback 方法会在 Custom Element 被创建时调用。它只会在元素的实例被创建时调用一次，而不是每次元素被插入到文档中时都会调用。
在 createdCallback 方法中，我们可以执行一些初始化操作，比如添加子元素、设置属性等。下面是一个示例代码：
-- -------------------- ---- -------
-------------------------
--------
--- --------- - -------------------------------------- -
---------- ------------------------------------ -
---------------- -
------ ---------- -
--- ----- - ------------------------------
----------------- - ------ --------
------------------------
-
-
--
---
---------在上面的代码中，我们创建了一个名为 my-element 的 Custom Element，它的 createdCallback 方法会在元素被创建时调用。在 createdCallback 方法中，我们创建了一个名为 child 的 div 元素，并将其添加到 my-element 元素中。
attachedCallback
attachedCallback 方法会在 Custom Element 被添加到文档中时调用。它会在元素每次被添加到文档中时都会调用。
在 attachedCallback 方法中，我们可以执行一些与元素添加到文档有关的操作，比如添加事件监听器、请求数据等。下面是一个示例代码：
-- -------------------- ---- -------
-------------------------
--------
--- --------- - -------------------------------------- -
---------- ------------------------------------ -
----------------- -
------ ---------- -
------------------------------ ---------- -
------------ ---------
---
-
-
--
---
---------在上面的代码中，我们创建了一个名为 my-element 的 Custom Element，它的 attachedCallback 方法会在元素被添加到文档中时调用。在 attachedCallback 方法中，我们为 my-element 元素添加了一个 click 事件监听器，并在事件触发时弹出一个提示框。
detachedCallback
detachedCallback 方法会在 Custom Element 从文档中移除时调用。它会在元素每次从文档中移除时都会调用。
在 detachedCallback 方法中，我们可以执行一些与元素从文档中移除有关的操作，比如取消事件监听器、清理数据等。下面是一个示例代码：
-- -------------------- ---- -------
-------------------------
--------
--- --------- - -------------------------------------- -
---------- ------------------------------------ -
----------------- -
------ ---------- -
------------------------------ ---------- -
------------ ---------
---
-
--
----------------- -
------ ---------- -
--------------------------------- ---------- -
------------ ---------
---
-
-
--
---
---------在上面的代码中，我们创建了一个名为 my-element 的 Custom Element，它的 attachedCallback 方法会在元素被添加到文档中时调用，detachedCallback 方法会在元素从文档中移除时调用。在 attachedCallback 方法中，我们为 my-element 元素添加了一个 click 事件监听器，在 detachedCallback 方法中，我们取消了这个事件监听器。
总结
Custom Elements 是一种强大的 Web 标准，它允许我们创建自定义的 HTML 元素，并且可以通过 JavaScript 进行控制和操作。在 Custom Elements 中，我们可以使用 createdCallback、attachedCallback、detachedCallback 方法，来控制元素的创建、添加和移除。通过这些方法，我们可以方便地对自定义元素进行初始化、添加事件监听器、请求数据等操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65560b92d2f5e1655d082d27