Custom Elements 是 Web Components 的核心技术之一，它可以让我们自定义 HTML 元素，并且可以将它们重用在不同的页面中。然而，在实际开发过程中，有时候会遇到 Custom Elements 和原生 HTMLElement 混合使用时出现不可见的问题，本文将详细介绍这个问题以及解决方案。
问题描述
在使用 Custom Elements 时，我们创建了一个自定义元素并将其添加到 DOM 树中，如下所示：
-------------------------
然后我们使用 JavaScript 实现该元素：
----- --------- ------- ----------- -
------------- -
--------
---------------- - ------- --------
-
-
----------------------------------- -----------这样应该是没有问题的，我们在浏览器中打开该页面，会看到 "Hello, World!" 文字。但是如果接下来我们新增一个原生 HTMLElement 到相同的位置：
------------------------- --------- -----------------
这时候就会发现该 Custom Element 变得不可见。
问题分析
为什么 Custom Elements 会出现不可见的问题呢？实际上，这是由于 Custom Elements 的实现方式不同于一般的 HTML 元素。HTML 元素的渲染和布局逻辑是内置在浏览器中的，浏览器会扫描整个 DOM 树来完成渲染和布局。而 Custom Elements 是通过 JavaScript 实现的，浏览器无法预知其渲染和布局逻辑，导致 Custom Elements 必须通过 connectedCallback 回调手动触发渲染和布局。
但是，当一个 Custom Element 与一个普通 HTMLElement 父子关系时，该 Custom Element 并不会自动触发 connectedCallback 回调，从而无法完成渲染和布局，因此就会出现不可见的问题。
解决方案
为了解决这个问题，我们需要在 Custom Element 中主动触发 connectedCallback 回调，并令 Custom Element 内容被接受并正确显示。具体来说，我们可以通过在 Custom Element 的构造函数中调用 attachShadow 方法并传入 { mode: 'open' }，创建一个 Shadow DOM 节点，并将 Custom Element 的内容添加到 Shadow DOM 中。实现代码如下：
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- ------- - ------------------------------
------------------- - ------- --------
----------------------------
-
-
----------------------------------- -----------这样，我们再次打开页面并在 Custom Element 与 HTMLElement 之间添加一个空白元素即可看到正确渲染的效果：
------------------------- ----------- --------- -----------------
总结
本文针对 Custom Elements 在与 HTMLElement 混合使用时出现不可见的问题进行了分析并提供了解决方案。通过在 Custom Element 中使用 Shadow DOM，我们可以手动触发 connectedCallback 回调，并正确显示 Custom Element 的内容。这个问题虽小但涉及到 Web Components 技术底层原理，相信有一定的参考意义。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c89e66add4f0e0ff26687d