Breaking News: Grepper is joining You.com. Read the official announcement!

js get element node inside shadow-root (open)

Healthy Hippopotamus answered on September 9, 2023 Popularity 5/10 Helpfulness 1/10

answer js get element node inside shadow-root (open)

js get element node inside shadow-root (open)

Comment

/**
 * Finds all elements in the entire page matching `selector`, even if they are in shadowRoots.
 * Just like `querySelectorAll`, but automatically expand on all child `shadowRoot` elements.
 * @see https://stackoverflow.com/a/71692555/2228771
 */
function querySelectorAllShadows(selector, el = document.body) {
  // recurse on childShadows
  const childShadows = Array.from(el.querySelectorAll('*')).
    map(el => el.shadowRoot).filter(Boolean);

  // console.log('[querySelectorAllShadows]', selector, el, `(${childShadows.length} shadowRoots)`);

  const childResults = childShadows.map(child => querySelectorAllShadows(selector, child));
  
  // fuse all results into singular, flat array
  const result = Array.from(el.querySelectorAll(selector));
  return result.concat(childResults).flat();
}

Popularity 5/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: element get javascript shadow-root

Link to this answer
Share Copy Link