Event: composedPath() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Note: This feature is available inWeb Workers.
ThecomposedPath() method of theEventinterface returns the event's path which is an array of the objects on which listenerswill be invoked. This does not include nodes in shadow trees if the shadow root wascreated with itsShadowRoot.mode closed.
Syntax
composedPath()Parameters
None.
Return value
An array ofEventTarget objects representing the objects on which anevent listener will be invoked.
Examples
In the following example, which you can try out athttps://mdn.github.io/web-components-examples/composed-composed-path/, we define two trivial customelements,<open-shadow> and<closed-shadow>, bothof which take the contents of their text attribute and insert them into the element'sshadow DOM as the text content of a<p> element. The only differencebetween the two is that their shadow roots are attached with their modes set toopen andclosed respectively.
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); } },);We then insert one of each element into our page:
<open-shadow text="I have an open shadow root"></open-shadow><closed-shadow text="I have a closed shadow root"></closed-shadow>Then include a click event listener on the<html> element:
document.querySelector("html").addEventListener("click", (e) => { console.log(e.composed); console.log(e.composedPath());});When you click on the<open-shadow> element and then the<closed-shadow> element, you'll notice two things. First, thecomposed property returnstrue because theclickevent is always able to propagate across shadow boundaries. Second, you'll notice adifference in the value ofcomposedPath for the two elements. The<open-shadow> element's composed path is this:
Array [ p, ShadowRoot, open-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
Whereas the<closed-shadow> element's composed path is a follows:
Array [ closed-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
In the second case, the event listeners only propagate as far as the<closed-shadow> element itself, but not to the nodes inside theshadow boundary.
Specifications
| Specification |
|---|
| DOM # ref-for-dom-event-composedpath① |