JavaScript Event composedPath() Method

What You’ll Learn

The composedPath() method returns an array of EventTarget objects on which listeners will be invoked—the event’s path. Learn how it pairs with composed, why open vs closed shadow roots differ, and how to map the path for debugging—with five examples and try-it labs.

Introduction

When you click a nested button, the event does not only touch that button. It travels a path: the target, then parents, then document, then window (depending on the event).

event.composedPath() returns that path as an array. With Shadow DOM, the path can also include shadow nodes—unless the shadow root is closed, which hides internals from the path you see outside (as MDN demonstrates).

Understanding Event.composedPath()

An instance method that returns the event’s path: an array of objects on which listeners will be invoked.

• Return value — EventTarget[] along the dispatch path.
• No parameters — call event.composedPath().
• Shadow DOM — may include shadow nodes when the tree is open / visible on the path.
• Closed roots — nodes inside a closed shadow tree are not included (path stops at the host from the outside).
• Baseline Widely available on MDN (since January 2020); also in Web Workers.

📝 Syntax

composedPath()

Parameters

None.

Return value

An array of EventTarget objects representing the objects on which an event listener will be invoked.

Typical pattern

document.addEventListener("click", (event) => {
  const labels = event.composedPath().map((node) =>
    node.nodeName || String(node)
  );
  console.log(labels.join(" → "));
});

⚖️ composedPath() vs Related Ideas

Examples Gallery

Examples follow MDN Event: composedPath(). Use View Output or Try It Yourself.

document.addEventListener("click", (event) => {
  const path = event.composedPath().map((n) =>
    n.nodeName || String(n)
  );
  console.log(path.join(" → "));
});

BUTTON → DIV → BODY → HTML → [object HTMLDocument] → [object Window]

button.addEventListener("click", (event) => {
  const path = event.composedPath();
  console.log(path[0] === event.target); // usually true
  console.log(event.target.nodeName);
});

true
BUTTON

document.addEventListener("click", (event) => {
  const inside = event.composedPath().includes(panel);
  out.textContent = inside
    ? "Click was inside the panel"
    : "Click was outside the panel";
});

Click was inside the panel

// Custom element attaches open shadow + 

document.documentElement.addEventListener("click", (e) => {
  console.log(e.composed); // true for click
  console.log(e.composedPath().map((n) => n.nodeName || String(n)));
  // May include: P, #document-fragment, OPEN-SHADOW, BODY, …
});

composed = true
P → #document-fragment → OPEN-SHADOW → BODY → …

// Same click listener; closed-shadow hides internals:
// composedPath may look like:
// CLOSED-SHADOW → BODY → HTML → Document → Window
// (no P / ShadowRoot entries from outside)

composed = true
CLOSED-SHADOW → BODY → HTML → …

🚀 Common Use Cases

• Debugging where an event travels in nested UI.
• Web components: understand open vs closed shadow paths.
• “Click outside” detection via path.includes(panel).
• Teaching capture / bubble alongside a concrete path array.
• Comparing with event.composed when designing custom events.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since January 2020) — no Deprecated / Experimental / Non-standard banner.
• Available in Web Workers.
• Takes no parameters; returns an array of EventTargets.
• Closed shadow roots omit inner nodes from the path seen outside.
• Related learning: composed, target, currentTarget, type, JavaScript hub.

💡 Best Practices