shadow-root-utils.js

function observeShadowRoots(handle, element, config) {
  setObserver((mutations) => {
    mutations
      .filter(m => !!m.addedNodes.length)
      .forEach(m =>
        [...m.addedNodes]
          .filter(node => node.shadowRoot)
          .forEach(node => observeShadowRoots(handle, node.shadowRoot, config))
      );
    handle(mutations);
  }, element, config);

  if (element.shadowRoot) {
    observeShadowRoots(handle, element.shadowRoot, config);
  }

  [...element.querySelectorAll('*')]
    .filter(child => child.shadowRoot)
    .forEach(child => observeShadowRoots(handle, child.shadowRoot, config));
};

function setObserver(callback, target, options) {
  const observer = new MutationObserver(callback);
  observer.observe(target, options);
  return observer;
}

function $$shadow(query, element = document) {
  return [
    ...element.querySelectorAll(query),
    ...(element.shadowRoot ? $$shadow(query, element.shadowRoot) : []),
    ...[...element.querySelectorAll('*')]
      .filter(x => x.shadowRoot)
      .map(x => $$shadow(query, x.shadowRoot))
      .flat()
  ];
}