Code snippets for the "How we built the DevTools Tooltips" article

queryselector-shadow.ts

function querySelectorShadow(selector: string): Element|null {
  let found: Element|null = null;

  const search = (root: Element|ShadowRoot) => {
    const iter = document.createTreeWalker(
        root,
        NodeFilter.SHOW_ELEMENT,
    );
    do {
      const currentNode = iter.currentNode as HTMLElement;
      if (currentNode.shadowRoot) {
        search(currentNode.shadowRoot);
      }
      if (currentNode instanceof ShadowRoot) {
        continue;
      }
      if (!found && currentNode.matches(selector)) {
        found = currentNode;
      }
    } while (!found && iter.nextNode());
  };

  search(document.documentElement);

  return found;
}