如何检测自定义元素子元素的事件？解决子节点无法获取难题

1. 用composedPath()获取真实事件触发路径 #

自定义元素可能因使用影子DOM（Shadow DOM），导致事件冒泡时event.target被替换为自定义元素本身。通过event.composedPath()可获取完整的事件传播路径数组，数组首个元素就是实际触发事件的元素，后续依次为上层父元素。

示例代码：

document.addEventListener('click', function(e) {
  // 从事件路径中筛选目标按钮
  const targetBtn = e.composedPath().find(el => 
    el.tagName === 'A' && el.classList.contains('btn-primary')
  );
  if (targetBtn) {
    // 处理按钮点击逻辑
    console.log('目标按钮被点击:', targetBtn);
  }
});

composedPath()是标准API，兼容Chrome、Firefox、Edge等现代浏览器，比Firefox私有属性originalTarget通用性更强。

2. 访问自定义元素的影子DOM定位按钮 #

直接用querySelector找不到自定义元素内的按钮，大概率是因为按钮存在于自定义元素的影子DOM中。需先获取自定义元素的shadowRoot，再在影子DOM内部查询元素。

示例代码：

const customElement = document.querySelector('c-sto_com_fs-content-page');
if (customElement) {
  // 检查是否存在影子DOM
  if (customElement.shadowRoot) {
    const targetBtn = customElement.shadowRoot.querySelector('a.btn-primary');
    if (targetBtn) {
      targetBtn.addEventListener('click', function() {
        console.log('按钮被点击');
      });
    }
  } else {
    // 无影子DOM时，直接遍历子节点查找
    const targetBtn = Array.from(customElement.children).find(el => 
      el.tagName === 'A' && el.classList.contains('btn-primary')
    );
    // 后续处理逻辑...
  }
}

3. 递归遍历所有节点（含影子DOM）查找按钮 #

若页面结构极度混乱、影子DOM嵌套多层，可写递归函数遍历整个DOM树（包括所有影子DOM）定位目标按钮：

示例代码：

function findTargetButton(el) {
  // 检查当前元素是否为目标按钮
  if (el.tagName === 'A' && el.classList.contains('btn-primary')) {
    return el;
  }
  
  // 优先检查影子DOM
  if (el.shadowRoot) {
    const shadowBtn = findTargetButton(el.shadowRoot);
    if (shadowBtn) return shadowBtn;
  }
  
  // 遍历所有子节点
  for (const child of el.children) {
    const btn = findTargetButton(child);
    if (btn) return btn;
  }
  
  return null;
}

// 使用函数查找按钮
const targetBtn = findTargetButton(document.body);
if (targetBtn) {
  console.log('找到目标按钮:', targetBtn);
}

内容的提问来源于stack exchange，提问作者Menno van den Heuvel