如何从以关闭模式创建的影子根中查询选择

Question

我有一个创建的影子根mode: closed

<session-expiration-popup>
  #shadow root (closed)
  <div class="custom-element-root">
    something
  </div>
</session-expiration-popup>

有什么办法可以querySelect从这个影子根源得到一些东西吗？

我试过

const el = document.querySelector('session-expiration-popup')
el.shadowRoot.querySelector(".custom-element-root");

但是，它不起作用，因为shawRootparam 是null用于mode: close

另外，我尝试过el.attachShadow({ mode: "open" })，但这也是导致异常的错误方式（el 元素存在影子根）。

你还有其他建议吗？

Answer 1

这是不可能的。这是封闭Shadow DOM的预期行为和目的。

唯一的解决方法是重载该attachShadow()方法，然后在调用该方法时创建一个打开的 Shadow DOM。

这篇文章中的例子。