Custom Elements 是 Web Components 中的核心技术之一，它允许我们定义我们自己的 HTML 标签，从而实现模块化、可复用的代码。然而，在实际使用中，我们可能会遇到子元素未正确渲染的问题。这篇文章将从根源分析这个问题，并提供一些实用的解决方案。
问题分析
在 Custom Elements 中，当我们把一个自定义元素作为子元素添加到 DOM 树中时，我们可能会遇到这样的问题：子元素没有按照我们的预期正确渲染。这是因为当我们在创建子元素时，父元素还没有被添加到 DOM 树中，所以子元素无法正确计算样式和尺寸。
下面是一个示例代码：
-- -------------------- ---- -------
------
------
--------
----- ------------- ------- ----------- -
------------- -
--------
-
------------------- -
----- ----- - ------------------------------
----------------- - --------
------------------ - --------
------------------------
-
-
--------------------------------------- ---------------
---------
-------
------
---------------------------------
-------
-------在这个例子中，CustomElement 元素会创建一个 div 子元素并为其设置宽度和高度，但是当 CustomElement 被添加到 DOM 树中时，子元素没有正确渲染，因为子元素计算样式和尺寸的时候，CustomElement 还没有被添加到 DOM 树中。
解决方案
为了解决这个问题，我们需要在 Custom Element 中等待元素被添加到 DOM 树中再去渲染子元素。我们可以使用 MutationObserver API 监听元素是否被添加到 DOM 树中，当元素被添加到 DOM 树中之后，我们再去渲染子元素。
下面是修改过的示例代码：
-- -------------------- ---- -------
------
------
--------
----- ------------- ------- ----------- -
------------- -
--------
-
------------------- -
----- -------- - --- ------------------- -- -
----- ----- - ------------------------------
----------------- - --------
------------------ - --------
------------------------
----------------------
---
---------------------- - ---------- ---- ---
-
-
--------------------------------------- ---------------
---------
-------
------
---------------------------------
-------
-------在这个例子中，我们创建一个 MutationObserver 对象，它会监听 CustomElement 是否被添加到 DOM 树中。当 CustomElement 被添加到 DOM 树中时，MutationObserver 会触发回调函数，在回调函数中，我们创建子元素并向 CustomElement 添加子元素。最后，我们断开 MutationObserver 的监听，以免出现无限循环添加子元素的情况。
结论
Custom Elements 是 Web Components 中的核心技术之一，它为我们提供了一种定义可复用自定义 HTML 标签的方式。当我们遇到 Custom Elements 中子元素未正确渲染的问题时，我们可以使用 MutationObserver API 监听元素是否被添加到 DOM 树中，并在元素被添加到 DOM 树中之后再去渲染子元素。这个解决方案是可行的，同时也提高了我们对 Custom Elements 的理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67506b2c050cf9039c1051fd