The composedPath()
method of the Event
interface returns the event’s path which is an array of the objects on which listeners will be invoked. This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode
closed.
Syntax
var composed = Event.composedPath();
Parameters
None.
Return value
An array of EventTarget
objects representing the objects on which an event listener will be invoked.
Examples
In our composed-composed-path example (see it live), we define two trivial custom elements, <open-shadow>
and <closed-shadow>
, both of which take the contents of their text attribute and insert them into the element's shadow DOM as the text content of a <p>
element. The only difference between the two is that their shadow roots are attached with their modes set to open
and closed
respectively.
The first definition looks like this, for example:
customElements.define('open-shadow',
class extends HTMLElement {
constructor() {
super();
let pElem = document.createElement('p');
pElem.textContent = this.getAttribute('text');
let shadowRoot = this.attachShadow({mode: 'open'})
.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',function(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, the composed
property returns true
beause the click
event is always able to propagate across shadow boundaries. Second, you'll notice a difference in the value of composedPath
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 the shadow boundary.
Specifications
Specification | Status | Comment |
DOMThe definition of 'composedPath()' in that specification. | Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
composedPath
|
Chrome Full support 53 Full support 53 No support 50 — 53 Alternate Name' Uses the non-standard name: |
Edge
Full support 79 |
Firefox
Full support 52 |
IE
No support No |
Opera Full support 40 Full support 40 No support 37 — 40 Alternate Name' Uses the non-standard name: |
Safari
Full support 10 |
WebView Android Full support 53 Full support 53 No support 50 — 53 Alternate Name' Uses the non-standard name: |
Chrome Android Full support 53 Full support 53 No support 50 — 53 Alternate Name' Uses the non-standard name: |
Firefox Android
Full support 52 |
Opera Android Full support 41 Full support 41 No support 37 — 41 Alternate Name' Uses the non-standard name: |
Safari iOS
Full support 10 |
Samsung Internet Android Full support 6.0 Full support 6.0 No support 5.0 — 6.0 Alternate Name' Uses the non-standard name: |
Legend
- Full support
- Full support
- No support
- No support
- Uses a non-standard name.'
- Uses a non-standard name.
Event.composedPath() by Mozilla Contributors is licensed under CC-BY-SA 2.5.