事件：composed 屬性
注意：此功能在 Web Workers 中可用。
Event 介面中的只讀 composed 屬性返回一個布林值，該值指示事件是否會穿過 Shadow DOM 邊界傳播到標準 DOM。
所有使用者代理（UA）分派的 UI 事件都是 composed 的（例如 click/touch/mouseover/copy/paste 等）。大多數其他型別的事件不是 composed 的，因此會返回 false。例如，這包括那些在建立時沒有將其 composed 選項設定為 true 的合成事件。
僅當 bubbles 屬性也為 true 時，事件才會傳播。但是，只有 composed 事件在捕獲階段也會被當作處於 AT_TARGET 階段進行處理。您可以透過呼叫 composedPath() 來確定事件將透過 Shadow Root 傳播到 DOM Root 的路徑。
值
如果事件在到達 Shadow Root 後會從 Shadow DOM 穿過到標準 DOM，則此布林值為 true。（即，事件開始傳播的 Shadow DOM 中的第一個節點。）
如果此值為 false，則 Shadow Root 將是接收事件的最後一個節點。
示例
在這個 示例 中，我們定義了兩個簡單的自定義元素：<open-shadow> 和 <closed-shadow>。它們都接受其 text 屬性的內容，並將其作為 <p> 元素的文字內容插入到元素的 Shadow DOM 中。兩者唯一的區別在於它們的 Shadow Root 在附加時，其 mode 分別設定為 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> 元素上添加了一個 click 事件監聽器。
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 路徑是這樣的：
Array [ p, ShadowRoot, open-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
而 <closed-shadow> 元素的 composed 路徑如下：
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-composed① |
瀏覽器相容性
載入中…