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

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");

但是，由于shawRoot的{​​{1}}参数是null，因此无法正常工作

我也尝试mode: close，但这也是导致异常的错误方法（el元素存在影子根）。

您还有其他想法吗？

Answer 1

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

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

Example in this post.