shadow-dom-utils.js

function querySelectorAllDeep(root, selector) {
  const [start, ...rest] = Array.isArray(selector) ? selector : selector.split(" /deep/ ");
  if (rest.length === 0) return [...root.querySelectorAll(start)];
  return [...root.querySelectorAll(start + " *")].map(x => x.shadowRoot).filter(Boolean).map(x => querySelectorAllDeep(x, rest)).flat();
}

function unshadowDOM(dom, tagnNameOverride) {
  const root = document.createElement(tagnNameOverride || dom.tagName || "fragment");
  for(const {name, value} of (dom.attributes || [])) {
    try {
    root.setAttribute(name, value);
    } catch (e) { /* called with hidden$ attribute */ }
  }

  root.textContent = dom.textContent;
  if (dom.shadowRoot) {
    root.appendChild(unshadowDOM(dom.shadowRoot, "shadow"));
  }
  for(const kid of dom.children) {
    root.appendChild(unshadowDOM(kid));
  }
  return root;
}

hackier :D

function querySelectorAllDeep(root, selector) {
  const dom = unshadowDOM(root);
  const sel = selector.replace(/\/deep\//g, "shadow");
  return dom.querySelectorAll(sel);
}

function unshadowDOM(dom, tagnNameOverride) {
  const root = document.createElement(tagnNameOverride || dom.tagName || "fragment");
  for(const {name, value} of (dom.attributes || [])) {
    try {
    root.setAttribute(name, value);
    } catch (e) { /* called with hidden$ attribute */ }
  }

  root.textContent = dom.textContent;
  if (dom.shadowRoot) {
    root.appendChild(unshadowDOM(dom.shadowRoot, "shadow"));
  }
  for(const kid of dom.children) {
    root.appendChild(unshadowDOM(kid));
  }
  return root;
}