Custom Elements 生命周期
Custom Elements 是一种 Web Components 规范的实现，它能够定义自定义的 HTML 元素，包括样式、行为、事件等，进而扩展原有的 HTML 标签，提升了 Web 应用的可复用性和可维护性。
Custom Elements 生命周期是指自定义元素从被创建到被销毁的整个生命周期，它包括以下几个阶段：
- 定义阶段（Define phase）
- 生命周期阶段（Lifecycle phase）
- 关注点变化阶段（Attribute/Property change phase）
- 移除阶段（Remove phase）
定义阶段
在定义阶段，我们使用 window.customElements.define() 方法来定义自己的 Custom Elements，这个方法接受两个参数：元素名称以及自定义元素的类定义。
----- --------- ------- ----------- ----- ------------------------------------------ -----------
在这个阶段，自定义元素还没有被添加到文档中，因此并不存在生命周期实例。
生命周期阶段
创建 Custom Elements 的实例是在将自定义元素添加到文档中进行的，这个过程可以使用 DOM API document.createElement() 或者直接在 HTML 中编写标签的形式。
-------------------------
在生命周期阶段中，Custom Elements 依次经历以下步骤：
constructor：调用构造函数。这是创建 Custom Elements 的实例的第一步，完成该阶段后，Custom Elements 实例已创建完成，但尚未添加到文档中，因此并没有视图上的展示效果。你可以在 constructor 中初始化一些属性，事件，然后可以使用拦截器对元素属性进行监听。
----- --------- ------- ----------- - ------------- - -------- -- ----- ------------- - -------- -- ----------- ----------------------------- - --- ------------------------------------ - ------------- -------- ------ --------- ---------- - -- --------- --- --------- - --------------------- ------ --------- ----------- - - -- - -connectedCallback：元素插入到文档中，此时元素已经可以访问到文档中的元素。在 connectedCallback 中，可以将需要的 CSS，JS 或者其他资源动态加载到页面上。
----- --------- ------- ----------- - ------------------- - -------------- - --------------------- ------------ ---------------- - ---------- - -------- - -disconnectedCallback：元素从文档中移除，此时元素再次变得不可见，不再访问到文档中的元素。
----- --------- ------- ----------- - ---------------------- - ------ --------------- - --------- - -------- - -attributeChangedCallback：元素的属性发生变化，通过改变元素的属性来触发函数的调用。
----- --------- ------- ----------- - ------------------------------ --------- --------- - ------------- - --------- - -
关注点变化阶段
使用属性属性来控制 Custom Elements 的行为是非常有用的，属性的变化有时候会影响 Custom Elements 的内部状态，一般来说我们可以通过属性拦截器，在属性值变化时进行修改。
----- --------- ------- ----------- -
--- ------ -
------ --------------------------
-
--- ----------- -
------------------------- -------
-
------ --- -------------------- -
------ ---------
-
------------------------------ --------- --------- -
-- ----- --- ------ -- -------- --- --------- -
-- ------
-------------------------------------
-
-
---------------------------- -
-- --------
-
-移除阶段
当 Custom Elements 被从文档树中移除时，会自动执行 disconnectedCallback() 函数，在这个阶段我们可以执行一些清理工作，比如停止计时器，取消事件订阅等等。
----- --------- ------- ----------- -
---------------------- -
------------
-
-结论
自定义元素是一种非常有用的技术，可以帮助我们创造自己的 Web 组件，并且提高代码的复用和可维护性，深入了解 Custom Elements 的生命周期阶段可以让我们更好的了解他们如何工作的，并且在开发或维护期间更加高效的处理 Custom Elements 的状态。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6738901e317fbffedf11588e