Custom Elements 奇怪的 Bug：取不到 Shadow DOM 中的子元素
在前端开发中，我们使用 Custom Elements 来定义自己的 HTML 元素，以便在自己的应用程序中使用。然而，在使用 Custom Elements 过程中，我们会遇到奇怪的 Bug，即无法访问 Shadow DOM 中的子元素。这个 Bug 的原因是什么呢？本文将为您详细分析。
- Shadow DOM 的介绍
Shadow DOM 是 Web Components 标准的一部分，用于在 DOM 树的内部创建独立的作用域。在这个作用域内部，我们可以定义自己的 HTML 元素、CSS 样式和 JavaScript 行为。这样做可以避免全局变量的命名冲突和样式污染等问题，提高了应用程序的可维护性。
Shadow DOM 的基本结构如下：
-- -------------------- ---- -------
--------------
------------
-------
-- ------ --- ---- --
--------
---------
---- ------ --- ---- ---
----------
---------------其中，<root-element> 是自定义元素的外部容器，#shadow-root 是 Shadow DOM 的根节点，<style> 是 Shadow DOM 中定义的样式，<content> 是 Shadow DOM 中的内容。
- 访问 Shadow DOM 中的子元素
在使用 Custom Elements 定义自己的 HTML 元素时，我们通常需要访问 Shadow DOM 中的子元素，以便进行更复杂的操作。例如，我们可能需要向 Shadow DOM 中的子元素添加事件监听器、修改样式等。
然而，我们会发现无法直接访问 Shadow DOM 中的子元素。例如，当我们使用 querySelector() 或 getElementById() 函数来查找 Shadow DOM 中的子元素时，会返回 null：
-- -------------------- ---- -------
------------
------------
---- ------------------------- ------------
-------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
---------------- - -
---- ------------------------- ------------
--
----- ------------ - ---------------------------------------
-------------------------- -- ----
-
-
----------------------------------- -----------
---------这个问题的解决方案是使用 queryShadowRoot() 函数来访问 Shadow DOM 中的子元素。queryShadowRoot() 函数的定义如下：
-- -------------------- ---- -------
-------- ------------------------- -
--- ------- - ----------------------------------------
-- ---------- -
----- ----- - -----------------------------------------
--- ---- - - -- - - ------------- ---- -
----- ---- - ---------
----- ----- - ---------------------
--- ---- - - -- - - ------------- ---- -
----- ---- - ---------
-- -------------- --- ------------------ -
------- - -----------------------------
-- --------- -
------ --------
-
-
-
-
-
------ --------
-这个函数首先在 Shadow DOM 根节点中查找给定的选择器，如果找到了就直接返回。如果没有找到，则遍历所有的 <slot> 元素，查找其分配的节点中是否存在满足选择器条件的元素。如果找到了，则返回该元素。如果都没有找到，则返回 null。
我们可以将 queryShadowRoot() 函数添加到自己的 Custom Element 中：
-- -------------------- ---- -------
------------
------------
---- ------------------------- ------------
-------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
---------------- - -
---- ------------------------- ------------
--
-- ----- ----------------- --
-------------------- - ---------------------------
----- ------------ - ---------------------------------------
-------------------------- -- ---- ------------------------- ------------
-
-
----------------------------------- -----------
---------- 可以使用 querySelector() 和 getElementById()
注意到前面的 querySelector() 和 getElementById() 函数返回的值均是 null，但这里的 queryShadowRoot() 可以让其返回正确的值。那么，当我们直接调用 querySelector() 和 getElementById() 时，会出现什么问题呢？实际上，在某些情况下，这两个函数是可以正常工作的。
具体来说，当我们在定义自己的 Custom Element 时，将 Shadow DOM 的外部容器作为根元素，就可以直接使用 querySelector() 或 getElementById() 查找 Shadow DOM 中的子元素：
-- -------------------- ---- -------
------------
------------
---- ------------------------- ------------
-------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
---------------- - -
-------------
--
-------------- - -
---- ------------------------- ------------
--
----- ------------ - -------------------------------------
-------------------------- -- ---- ------------------------- ------------
-
-
----------------------------------- -----------
---------这里，我们使用 <slot> 元素将 Shadow DOM 中的内容插入到自定义元素的内部。然后，我们在自定义元素的构造函数中调用 querySelector() 函数，成功地找到了 Shadow DOM 中的子元素。在这种情况下，我们不需要使用 queryShadowRoot() 函数。
- 总结
在使用 Custom Elements 定义自己的 HTML 元素时，我们要注意访问 Shadow DOM 中的子元素。由于 Shadow DOM 的作用域独立于全局作用域，直接访问子元素可能会出现 Bug。为了避免这个问题，我们可以使用 queryShadowRoot() 函数来访问 Shadow DOM 中的子元素。如果我们将 Shadow DOM 的外部容器作为自定义元素的根元素，则可以直接使用 querySelector() 或 getElementById() 查找 Shadow DOM 中的子元素。
希望本文的分析能够帮助您理解 Custom Elements 的实现原理，并且能够在实际开发中避免访问 Shadow DOM 中子元素的 Bug。完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
------------- -------- --- ------- ------ --- -------------
-------
------
-------------------------
--------
-------- ------------------------- -
--- ------- - ----------------------------------------
-- ---------- -
----- ----- - -----------------------------------------
--- ---- - - -- - - ------------- ---- -
----- ---- - ---------
----- ----- - ---------------------
--- ---- - - -- - - ------------- ---- -
----- ---- - ---------
-- -------------- --- ------------------ -
------- - -----------------------------
-- --------- -
------ --------
-
-
-
-
-
------ --------
-
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
---------------- - -
---- ------------------------- ------------
--
-- ----- ----------------- --
-------------------- - ---------------------------
----- ------------ - ---------------------------------------
-------------------------- -- ---- ------------------------- ------------
-
-
----------------------------------- -----------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fafc5ff6b2d6eab31bcda3