Shadow DOM directly influences how event propagate through the DOM.
The shadow root is the root node for a shadow tree. It is possible to listen to any event originating from a shadow tree by adding the appropriate event listener directly on the shadow root.
Similar to how events work in the light DOM, events only bubble in the shadow DOM if the bubbles option is set to true: new Event('test', { bubbles: true }).
Events dispatched from within the shadow tree invoke the shadow root listeners if the event is marked as bubbles.
By default, events don’t propagate outside shadow trees. This default behavior ensures that internal DOM events don’t inadvertently leak into the document.
For an event to traverse shadow DOM boundaries, it has to be configured as composed: new Event('test', { bubbles: true, composed: true }).
This might be counterintuitive, but a composed event always propagates outside the shadow boundary regardless of whether it is bubbling or not.
The Event.prototype.composedPath method returns an array with all the nodes, in order, through which the event propagates.
That's why using composedPath()[0] guarantees to always refers to the correct "target".
Shadow DOM directly influences how event propagate through the DOM.
The shadow root is the root node for a shadow tree. It is possible to listen to any event originating from a shadow tree by adding the appropriate event listener directly on the shadow root.
Similar to how events work in the light DOM, events only bubble in the shadow DOM if the bubbles option is set to
true:new Event('test', { bubbles: true }).Events dispatched from within the shadow tree invoke the shadow root listeners if the event is marked as
bubbles.By default, events don’t propagate outside shadow trees. This default behavior ensures that internal DOM events don’t inadvertently leak into the document.
For an event to traverse shadow DOM boundaries, it has to be configured as composed:
new Event('test', { bubbles: true, composed: true }).This might be counterintuitive, but a composed event always propagates outside the shadow boundary regardless of whether it is bubbling or not.
The Event.prototype.composedPath method returns an array with all the nodes, in order, through which the event propagates.
That's why using
composedPath()[0]guarantees to always refers to the correct "target".Source: https://pm.dartus.fr/posts/2021/shadow-dom-and-event-propagation/