When firing an event with the bubbles set to false:
this.fire('my-event', null, {bubbles:false});
The event does _not_ bubble up in Shady DOM, but _does_ in Shadow DOM.
Example: http://jsbin.com/jovabaz/edit?html,console,output
I know I can use e.stopPropagation(), but is there something I鈥檓 missing?
/sub
This is actually correct behavior according to the ShadowDOM spec. What you're seeing isn't real event bubbling, as the event is only visible on shadowroot hosts, not the full DOM tree.
Due to event retargetting, the event is in AT_TARGET stage on both the first element you fire it from, and the shadowroot host, and any shadowroot host up the tree.
http://w3c.github.io/webcomponents/spec/shadow/#event-dispatch
I've just lost a lot of time due to this issue: I couldn't understand why the event seemed to be bubbling when bubbles: false was specified (as per the docs).
Surely the fact that this doesn't work in Shadow DOM should at least be mentioned in the docs, rather than this issue being closed as 'correct behavior'?
similarly to @timkendrick , I just spent 'some time' trying to figure out why this isn't working as I had expected...I think the docs could be clearer on this issue, ie how bubbling and shadow-dom/shady-dom interact to produce unexpected behaviour.
@azakus Let's say an element at level -10 in the shadow DOM fires a "response" event. Through retargeting it will be propagated on all 10 levels (hosts) above. At the same time, an element at level -5 fires an event named "response" as well, and retargeting occurs for this one too. If on level -4 you want to attach a handler for the "response" event on level -5 (unaware of the one fired on level -10), it will unwillingly also handle the event coming from -10. You cannot possibly know all events coming from deep "underwater" in a medium or large application. What's you opinion on this? Can this be prevented? Thanks.
Most helpful comment
I've just lost a lot of time due to this issue: I couldn't understand why the event seemed to be bubbling when
bubbles: falsewas specified (as per the docs).Surely the fact that this doesn't work in Shadow DOM should at least be mentioned in the docs, rather than this issue being closed as 'correct behavior'?