composedpath() 返回事件实际经过的完整 dom 节点路径数组，从 event.target 开始，依次包含冒泡途经的 shadow host、document、window 等节点，准确反映含 shadow dom 的真实传播路径。
在事件冒泡过程中，composedPath() 方法返回的是事件实际经过的**完整 DOM 节点路径数组**，从事件目标（target）开始，逐层向上直到 window（或 shadow root 边界），它能准确反映事件传播的真实路线，尤其在含 Shadow DOM 的场景下比传统遍历父节点更可靠。
composedPath() 返回什么
event.composedPath() 是一个只读数组，按事件传播顺序排列：
- 索引 0 是事件原始目标（
event.target） - 后续元素是依次冒泡经过的祖先节点（包括 shadow host、document、window 等）
- 如果事件穿过 Shadow DOM 边界，路径中会包含
shadowRoot.host和宿主元素 - 注意：该数组不包含
document（除非显式插入），但通常以window结尾（取决于浏览器实现）
如何用 composedPath() 还原冒泡路径
直接调用即可获取路径，无需手动遍历：
element.addEventListener('click', function(e) {
const path = e.composedPath();
console.log(path); // [button, div#modal, body, html, document, window]
});
常见用途：
- 判断点击是否发生在某个容器内部（不用层层检查
contains()） - 查找最近的自定义组件宿主（比如识别哪个
<my-card></my-card>被点击） - 在 Shadow DOM 中精准定位事件来源，避免被
event.currentTarget或this的绑定位置干扰
与传统 parentNode 遍历的区别
传统方式容易出错：
- 遇到 Shadow DOM 时，
parentNode在 shadow boundary 处中断（返回null或shadowRoot） - 无法区分 light DOM 与 shadow DOM 中的同名元素
- 需额外处理
shadowRoot.host才能跨边界
而 composedPath() 自动整合了所有层级，包括：
- light DOM 节点
- shadowRoot（仅当事件跨入/跨出时出现）
- shadow host 元素
- document 和 window（部分浏览器包含）
实用技巧：快速定位关键节点
常用模式：
-
找最近的某类组件：
path.find(el => el.tagName === 'MY-INPUT') -
排除事件源自身（比如只查祖先）：
path.slice(1) -
确认是否点击在弹窗外部：
!path.includes(modalEl) - 兼容性注意：IE 不支持，现代浏览器（Chrome 55+、Firefox 61+、Safari 14+）均支持
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
