closest 不穿透 shadow dom 是默认行为而非 bug；目标在 shadow host 外部祖先时正常工作，在内部影子树中需改用 shadowroot.queryselector().closest() 或 composedpath() 遍历查找。

closest 不会自动穿透 Shadow DOM 边界——这是它的默认行为，不是 bug。若发现查找结果“断在 shadow root 外”，说明目标容器实际位于影子树内，而 closest 停在了 shadow host 就终止了。

明确区分两种常见场景

• 目标在 shadow host 的**外部祖先**（比如 light DOM 中的 .card）：closest 正常工作，无需额外处理；
• 目标在 shadow host 的**内部影子树中**（比如 shadowRoot 内的 .modal-content）：closest 无法跨 boundary 查找，必须换策略。

用 host.closest() 替代 event.target.closest()

当已知目标元素位于某个自定义组件内部，且你持有该组件实例（即 shadow host），可直接在其上调用 closest：

• const host = e.target.getRootNode()?.host; // 获取宿主元素
• if (host) const modal = host.closest('.modal'); // 在宿主自身及其 light DOM 祖先中查

注意：这查的是 host 元素在 light DOM 中的祖先，不是它 shadow 内部的节点。

在影子树内查找，需进入 shadowRoot

若目标就在当前元素所属的 shadowRoot 内（例如点击了 slot 中的内容，想找到 shadow 内的 .form-wrapper），应：

• 先获取当前元素所在的 shadowRoot：const root = e.target.getRootNode();
• 确认它是 ShadowRoot：if (root instanceof ShadowRoot)
• 再用 root 内的元素调用 closest：root.querySelector('#main')?.closest('.form-wrapper')

不能对 light DOM 元素（如 slot 插槽内容）直接调用 closest 来找 shadow 内部节点——它们不在同一棵树上。

监听 composed: true 事件 + composedPath()

当需要统一处理跨 shadow 边界的点击（比如全局点击关闭弹窗），推荐绑定带 composed: true 的事件：

• document.addEventListener('click', e => {
• const path = e.composedPath();
• const modal = path.find(el => el.matches && el.matches('.popup'));
• });

composedPath() 返回包含 shadow 内部节点的完整冒泡路径（从 target 到 document），适合做跨边界语义匹配，但需自行遍历和判断。

避免误判：检查选择器是否真在影子树中

有时 closest 返回 null，并非因为“穿透失败”，而是目标根本不存在于影子树中——可能被条件渲染隐藏、尚未挂载、或 class 名拼写错误（Vue/React 动态 class 尤其容易漏掉）。建议：

• 在 DevTools 中手动展开 shadowRoot，确认目标节点真实存在且含预期 class 或属性
• 优先使用属性选择器（如 [data-role="dialog"]）而非 class，更稳定
• 不要用后代选择器（如 .dialog .header），closest 不支持