当我们使用自定义元素创建 Web 组件时，有时可能需要对内部 DOM 节点进行操作，但是这些节点可能被隐藏起来了。本文将介绍如何选择自定义元素内被隐藏的 DOM 节点，并提供相关示例代码。
自定义元素内部 DOM 结构
首先，我们需要了解一下自定义元素的内部 DOM 结构。在自定义元素的 Shadow DOM 中，我们可以使用 querySelector 和 querySelectorAll 方法来选择元素。可以运行以下代码来查看自定义元素的内部 DOM 结构：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
---------------- - -
-------
----- -
-------- ------
------ -----
------- -----
-
-------- -
-------- -----
-
--------
---- ----------------
-------------
------
--
-
-
----------------------------------- -----------在以上示例中，我们创建了一个名为 my-element 的自定义元素，并在其 Shadow DOM 中定义了一个名为 content 的元素，并将其隐藏了起来。
选择被隐藏的 DOM 节点
如果我们想要选择这个被隐藏的 content 元素，可以通过以下方式来进行操作：
1. 通过 querySelector
我们可以使用 querySelector 方法来选择 my-element 内部的 content 元素。可以运行如下代码实现：
const myElement = document.querySelector("my-element");
const content = myElement.shadowRoot.querySelector(".content");
console.log(content);在以上示例中，我们先通过 querySelector 方法获取到 my-element 元素，并通过 shadowRoot 属性获取到其 Shadow DOM。然后，再通过 querySelector 方法获取到 content 元素。
2. 通过 slot
当我们使用自定义元素时，内部 DOM 节点可能被插槽（slot）进来。在这种情况下，我们可以通过 slot 的 querySelector 方法来选择被隐藏的 DOM 节点。可以运行如下代码实现：
const myElement = document.querySelector("my-element");
myElement.addEventListener("slotchange", () => {
const slot = myElement.shadowRoot.querySelector("slot");
const content = slot.assignedNodes()[0];
console.log(content);
});在以上示例中，我们通过 addEventListener 方法监听 slotchange 事件，当插槽内容变化时，调用回调函数。然后，通过 querySelector 方法获取到 slot 元素，并使用 assignedNodes 方法获取其分配在插槽中的所有节点，由于只有一个节点，因此可以直接取第一个。
总结
在自定义元素内部可能存在被隐藏的 DOM 节点，我们可以通过 querySelector 和 querySelectorAll 方法，或 slot 的 querySelector 方法来选择这些元素。通过了解这些技巧，我们可以更加方便地操作自定义元素内部的 DOM 结构。
完整示例代码：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
---------------- - -
-------
----- -
-------- ------
------ -----
------- -----
-
-------- -
-------- -----
-
--------
---- ----------------
-------------
------
--
-
-
----------------------------------- -----------
----- --------- - -------------------------------------
---------------------------------------- -- -- -
----- ---- - -------------------------------------------
----- ------- - ------------------------
---------------------
---
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e6f23af6b2d6eab3247c38