I’m trying to wrap my head around dispatching events from custom elements and whether they should bubble or not…
Take a look at this sandbox (that also has more details on my issue) and point me in the right direction: https://codesandbox.io/embed/auts-nested-events-playground-479t7?expanddevtools=1&fontsize=14&theme=dark
What I’d like is for this doc about
.trigger to be true also for our own events (https://aurelia.io/docs/binding/delegate-vs-trigger#delegate-vs-trigger) but it seems that if I want events to bubble but not cause unexpected runs of event handlers I’ll need to make the event name more specific for the particular custom element.
The whole thing seems a bit fragile… Let’s say I have two different custom elements with slot that expose an
expanded event; How am I supposed to know that someone might nest these or how should they know they shouldn’t nest them? And if I want them to be nestable I’ll either need to not bubble the event or use different event names… Or the handler would need to do stopPropagation… It just seems like a complicated decision for each event to make, so is it easier to just force the use of
.trigger for our own events (as I have until now)?
What would be the general advice if I were building a plug-in with one or more custom elements that expose events?
How big of a performance gain is it to be able to use
.trigger? Is it so much that more specific event names is worth it?