liveBook · Manning

Event.composedPath

As explained in Web Components in Action

event.composedPath is a DOM event method that returns the ordered propagation path an event follows through the document and related objects.

event.composedPath() returns the complete ordered path an event follows as it bubbles, from its origin through containing elements to Window. Unlike event.target and event.currentTarget, it reveals the event’s propagation route. section 14.3

Inspecting a button click

A document-level click listener can log e.composedPath(). For a regular Web Component, the path is [button, sample-component, body, html, document, Window]. With Shadow DOM, the path includes the document fragment and shows how the event crosses the component boundary.

How Web Components in Action covers it

How deep it goes
Explains the returned path through regular and Shadow DOM examples, while stopping short of broader event-processing internals.
Examples
Uses document click listeners, a button Web Component, and open Shadow DOM path listings.
What it assumes
Assumes familiarity with DOM event listeners, bubbling, Web Components, and Shadow DOM boundaries.
What you can do after
Diagnose event origins and propagation routes by logging composedPath() alongside target and currentTarget.
How it connects
Connects composedPath() with event bubbling, event.target, event.currentTarget, Web Components, and Shadow DOM.
Cover of Web Components in Action
liveBookmanning.com
Read Web Components in Action on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.