Question 199298 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to use javascript to select the button inside a shadow root

I am curious to see how this situation can be solved.
In browser, I am seeing the following content (note the button is in highlight)
enter image description here
However, the selected the shadow root document.querySelector("ow-356ai793a").shadowRoot lost the entire content within the div element <div shell-wrapper="" data-spot-im-direction="ltr"></div>, as shown here
enter image description here

How can I select the button <button role="button" data-spmark="show-more" data-spot-im-class="load-more-messages" aria-label="Show more comments" data-openweb-allow-amp="true" type="button" class="Button__button--11-4-6 Button__primary--11-4-6 Button__isEllipsis--11-4-6 Button__hoverBackground--11-4-6 spcv_load-more-messages"><span class="Button__contentWrapper--11-4-6"><span class=""><span>Show More Comments</span></span></span></button> within the shadow root then?

Tags:

2

Answers


  1. 0

    You can try this:

    const shadowRoot = document.querySelector("ow-356ai793a").shadowRoot;
const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.addedNodes.length > 0) {
      for (const node of mutation.addedNodes) {
        if (node.matches("button[role='button']")) {
          console.log(node);
          observer.disconnect();
        }
      }
    }
  }
});

observer.observe(shadowRoot, { childList: true });

    However, this method may not work in all cases, as it depends on how and when the button element is created and appended to the shadow root element. It may also cause performance issues or memory leaks if not used properly. Therefore, I would recommend using a library or framework that provides methods or selectors for waiting for elements to appear, such as Cypress, Selenium, Puppeteer, etc.

    Login or Signup to reply.
  2. 0

    You can access anything inside the shadow root from JavaScript only if it have open mode.

    If the shadowDOM was created with element.attachShadow({ mode: "closed" });, you can not access the shadowDOM with JavaScript.

    So, now if your shadowDOM is open hen you could use following.

    const shadowRoot = document.querySelector("ow-356ai793a").shadowRoot;
const button = shadowRoot.querySelector("button[data-spmark='show-more']");
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search