事件：composedPath() 方法
注意：此功能在 Web Workers 中可用。
Event 接口的 composedPath() 方法返回事件的路径，该路径是一个将调用监听器的对象的数组。如果 ShadowRoot 是以其 ShadowRoot.mode 属性设置为 closed 创建的，则此路径不包含 shadow tree 中的节点。
语法
composedPath()
参数
无。
返回值
一个代表将调用事件监听器的对象的 EventTarget 对象的数组。
示例
在下面的示例中，您可以在 https://mdn.github.io/web-components-examples/composed-composed-path/ 处进行尝试。我们定义了两个简单的自定义元素，<open-shadow> 和 <closed-shadow>，它们都将它们的 text 属性的内容插入到元素的 shadow DOM 中，作为 <p> 元素的文本内容。两者之间的唯一区别是，它们的 shadow root 是分别以 open 和 closed 模式附加的。
customElements.define(
"open-shadow",
class extends HTMLElement {
constructor() {
super();
const pElem = document.createElement("p");
pElem.textContent = this.getAttribute("text");
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(pElem);
}
},
);
customElements.define(
"closed-shadow",
class extends HTMLElement {
constructor() {
super();
const pElem = document.createElement("p");
pElem.textContent = this.getAttribute("text");
const shadowRoot = this.attachShadow({ mode: "closed" });
shadowRoot.appendChild(pElem);
}
},
);
然后，我们在页面中插入了这两种元素各一个。
<open-shadow text="I have an open shadow root"></open-shadow>
<closed-shadow text="I have a closed shadow root"></closed-shadow>
接着，在 <html> 元素上包含一个点击事件监听器。
document.querySelector("html").addEventListener("click", (e) => {
console.log(e.composed);
console.log(e.composedPath());
});
当您分别点击 <open-shadow> 元素和 <closed-shadow> 元素时，您会注意到两点。首先，composed 属性返回 true，因为 click 事件总是能够跨越 shadow 边界传播。其次，您会注意到这两种元素 composedPath 的值存在差异。<open-shadow> 元素的 composed path 是这样的：
Array [ p, ShadowRoot, open-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
而 <closed-shadow> 元素的 composed path 如下：
Array [ closed-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
在第二种情况下，事件监听器只传播到 <closed-shadow> 元素本身，而不会传播到 shadow 边界内的节点。
规范
| 规范 |
|---|
| DOM # ref-for-dom-event-composedpath① |
浏览器兼容性
加载中…