Senior LevelHTML & Semantic Web
How does Shadow DOM event retargeting function during DOM event propagation?
❓ Interview Prompt: Explain Shadow DOM event retargeting, event.composed, event.composedPath(), and cross-boundary event listening.
When an event originates inside a Shadow DOM tree and bubbles up to the main Light DOM document, the browser performs Event Retargeting.
Retargeting Mechanism:
To preserve component encapsulation, the event's 'target' property is updated to point to the Shadow Host element! Calling 'event.composedPath()' reveals the full un-retargeted array of DOM nodes the event traversed.
Code Implementation Example
javascript
document.addEventListener('click', (event) => {
console.log('Retargeted Target:', event.target); // Shadow Host element
console.log('Actual Origin Path:', event.composedPath()); // Exact inner shadow node!
});💡Inspecting retargeted event targets and composedPath array.
🎯 Interview Key Takeaway
Shadow DOM retargets event.target to the Shadow Host element to preserve component encapsulation; use event.composedPath() for true origin.
#Event Retargeting#Shadow DOM#composedPath#Senior
Back to all HTML & Semantic Web Questions→