自从 Web Components 技术被推出以来，越来越多的开发者开始将其作为构建丰富的 Web 应用程序的解决方案。而 Custom Elements 是其中一个 Web Components 的基础模块，它为我们提供了一种自定义 HTML 元素的方法，方便我们创建并重复使用自己的组件。在本文中，我们将介绍如何使用 Custom Elements 为 Web Components 添加生命周期。
Custom Elements 简介
Custom Elements 是 Web Components 规范中的一部分，它让开发者可以定义和注册自己的 HTML 元素。这些所谓的 custom elements 与浏览器内置元素具有相同的功能和特性，可以作为独立的页面组件使用。
Custom Elements API 主要由以下两个方法组成：
customElements.define(name, constructor)：该方法用于定义一个新的 custom element，并注册该元素到页面的自定义元素注册表中。其中name参数是自定义元素的名称，constructor参数是定义该元素行为的 ES6 类。connectedCallback()：该方法在 custom element 被添加到 DOM 中时被调用。这个方法通常用于执行初始化工作，比如为元素添加事件监听器、设置初始属性等。 另外还有disconnectedCallback()和attributeChangedCallback()两个方法用于处理元素从 DOM 中被移除和属性变化的情况。
为自定义元素添加生命周期
Custom Elements API 为我们提供了丰富的生命周期方法，如上文所提到的 connectedCallback() 和 disconnectedCallback() 方法。除此之外，Custom Elements API 还提供了更多的生命周期方法，如 adoptedCallback() 和 attributeChangedCallback()。这些方法在 Custom Elements 的组件生命周期中扮演着不同的角色，帮助开发者更好地控制组件的行为。
adoptedCallback()
当一个自定义元素被移动到不同的文档当中时，adoptedCallback() 将被调用。该方法可以用来处理与文档相关的初始化逻辑，比如更新元素的样式表和脚本等。
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
-
----------------- -
-- -- --------- ---- --- ------- -- ------- -- - --- --------
-
-
--------------------------------------- ---------------attributeChangedCallback()
当一个自定义元素的属性被添加、移除或更改时，attributeChangedCallback() 将被调用。该方法可以用来处理与属性相关的操作，比如更新元素内部的状态、从网络加载新数据等。
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------ --- -------------------- -
------ ----------------
-
------------- -
--------
-
------------------------------ --------- --------- -
-- ----- --- --------------- -
-- -- --------- ---- --- -------------- --------- -------
-
-
------------------- -
---------------- - ----------------------------------
-
-
--------------------------------------- ---------------全部生命周期方法示例
下面是一个包含所有 Custom Elements 生命方法的完整示例：
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------ --- -------------------- -
------ ----------------
-
------------- -
--------
-
------------------- -
-------------------------
-
---------------------- -
----------------------------
-
----------------- -
-----------------------
-
------------------------------ --------- --------- -
-- ----- --- --------------- -
------------------------- ------- ---- ----------- -- --------------
-
-
--- ------------- -
------ ----------------------------------
-
--- ------------------ -
--------------------------------- -------
-
-
--------------------------------------- ---------------在此示例中，我们用 connectedCallback() 和 disconnectedCallback() 方法打印了每当 custom element 被添加到和移除出 DOM 的事件；用 adoptedCallback() 方法打印了每当 custom element 被移动到新文档的事件；用 attributeChangedCallback() 方法捕获了 my-attribute 属性的变化事件。我们还定义了 myAttribute 属性的 getter 和 setter 方法，以便于更新该属性时我们的代码能正确地工作。
总结
Custom Elements 为 Web Components 提供了一个简单易用的方式来定义和注册自定义 HTML 元素。通过使用 Custom Elements 提供的生命周期方法，我们可以更加细致地控制我们的组件行为，并为它们添加适当的逻辑处理。在实际项目中，我们可以使用 Custom Elements 相关的 API 实现封装、重用和维护性更高的 Web 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6470b90a968c7c53b0ed4762