Custom Elements 是一项 Web Components API，允许开发者创建自定义 HTML 元素，这些元素可以完全贴合业务逻辑从而增强页面的功能。然而，在使用 Custom Elements 的过程中，我们可能会遇到一些元素生命周期上的问题，本文将会讨论如何解决这些问题。
问题一：Custom Element 的生命周期
Custom Elements 有以下生命周期：
- connectedCallback
- disconnectedCallback
- adoptedCallback
分别在元素被插入到页面 DOM、从页面 DOM 中删除、从一个文档移到另一个文档时执行。这些 callback 与 HTML 元素的生命周期类似，但 Custom Element 的生命周期更为复杂，因为 Custom Element 让开发者可以完全掌控自定义元素的生命周期。
问题二：setState() 不会触发 Custom Element 的重新渲染
在使用 Custom Elements 的过程中，我们可能需要将一些变量储存到元素中，并且希望当这些变量改变时能够重新渲染 Custom Element。这时候我们可以使用 setState()，例如：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
---------- - -
------ -
--
-
------------------- -
--------------
-
------------------ -
------------------------- ---------
--------------
-
-------- -
-------------- - ---------------------------------
-
-然而，这份代码有一个问题：当 MyComponent 中的 setState() 被调用时，render() 并不会被触发，因此 Custom Element 不会得到更新。造成这个问题的原因是，Object.assign() 并不会触发 Custom Element 的 re-render，因此我们需要寻找一个合适的办法来解决这个问题。
解决方案
我们可以使用 MutationEvent 和 MutationObserver 来监听 Custom Element 的变化，这样当元素的状态改变时我们可以手动触发一个独立的 callback 来重新渲染 Custom Element。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
---------- - -
------ -
--
------------- - --- ------------------- -- -
--------------
---
-
------------------- -
--------------
--------------------------- - ----------- ----- ---------- ----- -------------- ---- ---
-
------------------ -
------------------------- ---------
---------------------- ----------------------------
-
-------- -
-------------- - ---------------------------------
-
-
------------------------------------- -------------现在我们在 setState() 中通过 dispatchEvent()来派发一个事件通知 Custom Element 的状态已经改变，然后在 connectedCallback() 中使用 MutationObserver 监听这个事件，并触发一个重新渲染。
结论
Custom Elements 的复杂生命周期使得开发者可以完全掌控自定义元素的生命周期，但同时也增加了开发过程中的复杂性。通过手动触发重新渲染的方式，我们可以解决 setState() 不会触发 Custom Element 的重新渲染的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67202c5b2e7021665e0105fa