shadowQuerySelectorAll. Like querySelectorAll, but which works across shadowRoots

shadowQuerySelectorAll.js

// Inspiration: https://www.abeautifulsite.net/posts/querying-through-shadow-roots/

/*
 * Acts like querySelectorAll, except you can pass a list of selectors...
 * Each selector is evaluated within the shadowRoot of the previous NodeList
 */
function* shadowQuerySelectorsAll(selectors, rootNode = document, depth = 0) {
  const nodes = rootNode?.querySelectorAll(selectors[depth]);
  if (depth >= selectors.length - 1) {
    yield* nodes;
  } else {
    for (let node of nodes) {
      yield* shadowQuerySelectorsAll(selectors, node?.shadowRoot, depth + 1);
    }
  }
}


/*
 * As above, you can use a single string separated by `>>>`
 */
function* shadowQuerySelectorAll(selector, rootNode = document) {
  const selectors = String(selector).split('>>>');
  yield* shadowQuerySelectorsAll(selectors, rootNode);
}