Bubbling in Shadow DOM

Web Components ⟩ Shadow DOM ⟩ Events ⟩

📗 參考

• JS.info ⟩ Bubbling, event.composedPath()

📘 手冊

• Event ⟩

  • composedPath() : EventTarget[ ]

  • composed : boolean

• element.tagName: string

👥 相關

• custom events

• If event occurs on an element from shadow DOM, then, as it bubbles out of shadow DOM, its event.target is reset to <custom-element>.

• For purposes of event bubbling, flattened DOM is used.

• if we have a slotted element, and an event occurs somewhere inside it, then it bubbles up to the <slot> and upwards. 👉 see: tab 1️⃣ (click on slotted element)

event.composedPath()

• The full path to the original event target, with all the shadow elements, can be obtained using event.composedPath() 👉 see: tab 1️⃣

1️⃣

💾 replit (live demo on codepen)

result

• click on "Name:" label:

inner target: <B>
[composed path]:
b, div, ShadowRoot, user-card, body, html, HTMLDocument, Window
-------------------------
outer target: <USER-CARD>

• click on "John Smith" (the slotted element)

inner target: <SPAN>
[composed path]:
span, slot, div, ShadowRoot, user-card, body, html, HTMLDocument, Window
-------------------------
outer target: <SPAN>

If the shadow tree was created with {mode: 'closed'}, then the composed path starts from the host: <user-card> and upwards.

Topics

• Events that Cross Shadow DOM Boundary