Recursively find elements through multiple layers of shadow dom.

utils.js

/**
 * Example usage:
 * const hotspots = findAllDeep(element, `[slot*="hotspot"]`, 10);
 */
const findAllDeep = (parent, selectors, depth = null) => {
  let nodes = new Set();
  let currentDepth = 1;
  const recordResult = (nodesArray) => {
    for (const node of nodesArray) {
      nodes.add(node)
    }
  }
  const recursiveSeek = _parent => {
    // check for selectors in lightdom
    recordResult(_parent.querySelectorAll(selectors));
    if (_parent.shadowRoot) {
      // check for selectors in shadowRoot
      recordResult(_parent.shadowRoot.querySelectorAll(selectors));
      // look for nested components with shadowRoots
      for (let child of [..._parent.shadowRoot.querySelectorAll('*')].filter(i => i.shadowRoot)) {
        // make sure we haven't hit our depth limit
        if (depth === null || currentDepth < depth) {
          recursiveSeek(child);
        }
      }
    }
  };
  recursiveSeek(parent);
  return nodes;
};

I completely reworked that to get the first matching nested element:

`

  const findDeep = (parent, selectors, depth = null) => {
  let currentDepth = 0;
  let result = null;
  
  const recursiveSeek = _parent => {

    currentDepth++;

    // check for selectors in lightdom
    result = _parent.querySelector(selectors);
    if(result)
      return result;

    // check for selectors in shadowRoot
    if (_parent.shadowRoot) {
      result = _parent.shadowRoot.querySelector(selectors);
      if(result)
        return result;
    }

    // look for nested components with shadowRoots

    let children = _parent.querySelectorAll('*');
    let childrenWithShadowRoot = [...children].filter(i => i.shadowRoot)
    for (let child of childrenWithShadowRoot) {
      if (depth === null || currentDepth < depth) {
        result = recursiveSeek(child.shadowRoot);
        if(result)
          return result;
      }
    }
    
    currentDepth--;
    return null;
    
  };
  
  return recursiveSeek(parent);
  
};

`

Usage:

let el = findDeep(document, '[style*="grid-area: main;"]', 100);