how to querySelect from shadow root that was created with closed mode

Question

I have a shadow root that was created with mode: closed

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

Is there any way to querySelect something from this shadow root?

I tried

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

however, it is not working cause shawRoot param is null for mode: close

Also, I tried to el.attachShadow({ mode: "open" }) but it's also the wrong way that leads to the exception (shadow root exist for el element).

Do you have any other ideas?

Answer 1

It's not possible. It's the intended behaviour and the purpose of a closed Shadow DOM.

The only workaround is to overload the attachShadow() method and then create an open Shadow DOM instead when the method is invoked.

Example in this post.