JavaScript中如何正确选择Shadow DOM内部的元素？

JavaScript中跨Shadow DOM选择元素的技巧

在JavaScript中，使用document.querySelector选择Shadow DOM内部元素时，常常会遇到选择器失效的问题。这是因为document.querySelector只能在当前文档树中查找元素，而Shadow DOM拥有独立的文档树。本文将解决此问题，并提供有效的方法来选择Shadow DOM中的元素。

问题：许多开发者尝试使用document.querySelector选择Shadow DOM内部和外部的元素，但发现选择器在Shadow DOM内部失效。 例如，选择Shadow DOM外部元素成功，但内部元素返回null；反之亦然。即使尝试间接获取shadowRoot后进行查询，仍然得到null的结果。

根本原因：document.querySelector无法直接穿透Shadow DOM。

解决方案：获取Shadow DOM的根节点，然后在其内部进行元素选择。 这可以通过访问目标元素的shadowRoot属性来实现。

例如，如果已知ubisoft-connect元素包含目标Shadow DOM，可以使用以下代码：

const shadowHost = document.querySelector("ubisoft-connect");
if (shadowHost && shadowHost.shadowRoot) {
  const shadowRoot = shadowHost.shadowRoot;
  const element = shadowRoot.querySelector("对应的选择器"); // 将“对应的选择器”替换为实际选择器
  // ... 使用 element ...
} else {
  console.error("ubisoft-connect 元素或其 shadowRoot 不存在");
}

这段代码首先安全地检查ubisoft-connect元素及其shadowRoot是否存在，避免错误。然后，它使用shadowRoot.querySelector在Shadow DOM内部进行元素选择。 请务必将 "对应的选择器" 替换为目标元素在Shadow DOM中的实际选择器。

通过这种方法，您可以有效地选择Shadow DOM内部的元素，从而解决选择器失效的问题。 记住选择器需要针对Shadow DOM内部的结构。