随着 Web 技术的不断进步，前端领域中的 Custom Elements 技术也不断发展。Custom Elements 技术允许我们自定义 HTML 元素，这样可以使我们更好地封装组件或者 UI 元素，更好的维护组件之间的关系和交互。 Custom Elements 的元素生命周期是自定义元素在创建，更新和删除过程中的事件顺序。
Custom Elements 的元素生命周期分为四部分：定义和注册，生效，激活和移除。这四种不同的状态会在一定的时间点上触发与一个 Custom Element 相关的方法。
1. 定义和注册
定义和注册是自定义元素的第一步。在这个阶段，我们可以通过定义 Custom Elements 元素的样式，模板和行为以及给它们选择一个名称进行注册。该过程包括定义该组件的属性，方法和想要在元素创建，更新或删除时触发的回调函数。
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
-
------------------- -
-- ------ --- -----
-
---------------------- -
-- --- --- ---------
-
-------------------------- -
-- ----------------
-
-
--------------------------------------- ---------------在定义和注册阶段，定义和注册函数是必要的，其他方法是可选的。
2. 生效
生效指在一个 Custom Element 定义完成后，它被添加到 DOM 树中的时候。当 Custom Element 被添加到 DOM 树中时，元素的 connectedCallback() 方法将被调用。
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
-
------------------- -
------------------- ------- -- --------- -- --- -------
-
-
--------------------------------------- ---------------
----- ------------- - --- ----------------
-----------------------------------------在这个例子中，Custom Element 被添加到文档的 body 节点时，connectedCallback() 方法中的内容被输出。
3. 激活
激活阶段是当 Custom Element 从上下文中被激活时触发的。在这个阶段，我们可以访问 Custom Element 的属性和方法并且与其他组件交互。这包括所有事件处理和其他的行为逻辑。
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
---------- - - ---------- ---- --
------------------------------ -------------------------
-
--------- -
------------------------
------------------------
-
------------------ -
-------------------- - ----------------------
------------------------ -
------------------ - --------
- ---- -
------------------ - -------
-
-
-
--------------------------------------- ---------------在这个例子中，onClick() 方法是一个点击事件处理程序，toggleVisibility() 方法会根据 isVisible 属性的值更新 Custom Element 的状态并设置 display 样式，从而切换元素的可见性。
4. 移除
移除是当 Custom Element 从 DOM 中删除时触发的。在这个阶段，我们可以清理所有与 Custom Element 相关的资源并解绑所有事件处理程序。
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
----------------- - -----------------------------
-
------------------- -
---------------------------------- -------------------
-
---------------------- -
------------------------------------- -------------------
-
------------------- -
---------------- --- --- -
--------------
-
-
-
--------------------------------------- ---------------在这个例子中，Custom Element 会在用户按下 Esc 键时被删除。在 disconnectedCallback() 方法中，我们解绑了 keyup 事件监听器，以便当 Custom Element 被移除时，所有事件都会被清理。
Custom Elements 的元素生命周期方法提供了一种更好的方式来封装和组织代码，同时也提供了更好的资源管理和交互。通过使用上述 API，您可以更好的掌握 Custom Elements 的生命周期，并更好的管理和维护您的应用程序。
结论
Custom Elements 的元素生命周期是自定义元素在创建，更新和删除过程中的事件顺序。这些状态被触发在一定的时间点上与一个 Custom Element 相关的方法。定义和注册是自定义元素的第一步，生效指被添加到 DOM 树中，激活是与其他组件交互的阶段，移除是当 Custom Element 从 DOM 中删除时触发的。对于每个状态以及对应的方法，我们都提供了一个例子来演示如何使用它们。通过学习 Custom Elements 的生命周期，您可以更好的管理和维护您的应用程序，并通过使用这个灵活的 API 实现更好的组件化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d2b3ba336082f2549cb23