背景
在 Web 开发中，我们经常需要使用 Custom Elements 来扩展 HTML 标签。Custom Elements 允许我们创建自定义的 HTML 元素，并在其中添加自定义行为和样式。但是在使用 Custom Elements 的过程中，有时会遇到一个常见的 bug：无法通过 querySelectorAll 获取 Custom Elements 的实例。
问题描述
在使用 Custom Elements 的过程中，我们经常需要使用 querySelectorAll 来获取 Custom Elements 的实例。例如，假设我们有一个自定义元素 my-element，我们可以使用以下代码来获取所有 my-element 的实例：
const elements = document.querySelectorAll('my-element');然而，有时候我们会发现，这个代码并不能获取到所有的 my-element 实例。实际上，它只会返回已经被添加到文档树中的实例，而没有被添加到文档树中的实例是无法被获取到的。
原因分析
为什么 Custom Elements 的实例无法被 querySelectorAll 获取呢？这是因为 Custom Elements 的实例需要先被添加到文档树中才能被获取到。如果一个 Custom Elements 的实例还没有被添加到文档树中，那么它就无法被 querySelectorAll 获取到。
解决方案
那么，我们该如何解决这个问题呢？有以下几种解决方案：
1. 使用自定义事件
我们可以在 Custom Elements 中添加自定义事件，当 Custom Elements 被添加到文档树中时，触发这个自定义事件。然后，在我们需要获取 Custom Elements 实例的地方，我们可以监听这个自定义事件，并在事件回调中获取所有的 Custom Elements 实例。示例代码如下：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------------- -
---------------------- -------------------------------------
-
-
------------------------------------------------- -- -- -
----- -------- - ----------------------------------------
-- ---
---2. 使用 MutationObserver
我们也可以使用 MutationObserver 来监听文档树的变化，当 Custom Elements 被添加到文档树中时，触发 MutationObserver 的回调函数。然后，在回调函数中获取所有的 Custom Elements 实例。示例代码如下：
-- -------------------- ---- -------
----- -------- - --- -------------------------- -- -
-------------------------- -- -
----- ---------- - --------------------
----------------------- -- -
-- -------------- --- ------------- -
----- -------- - ----------------------------------------
-- ---
-
---
---
---
------------------------------- - ---------- ----- -------- ---- ---3. 使用 Shadow DOM
最后，我们也可以使用 Shadow DOM 来解决这个问题。Shadow DOM 允许我们创建一个独立的 DOM 树，从而将 Custom Elements 的实例隔离在独立的 DOM 树中。这样，我们就可以在独立的 DOM 树中获取 Custom Elements 的实例，而不需要担心它们是否被添加到文档树中。示例代码如下：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - ---------- ------------
-
-
----- -------------- - ----------------------------------------
-- ---总结
Custom Elements 是一种强大的 Web 开发工具，但是在使用它们的过程中，我们也需要注意一些常见的问题。本文介绍了一个常见的 bug：Custom Elements 实例无法通过 querySelectorAll 获取，并提供了三种解决方案：使用自定义事件、使用 MutationObserver 和使用 Shadow DOM。希望这篇文章能够帮助大家更好地使用 Custom Elements。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c985c4add4f0e0ff353f06