When to use event bubbling in the context of web components

I understand the technical use of event bubbling (the how). What I cannot get a good answer to is WHEN to use event bubbling and especially within the context of web components.

In general some default browser events bubble as the click events which makes sense as a click on a child is also a click on the containing parent.

For some specific events which only apply to child elements it makes sense not to let events bubble to make an API more clear as the bubbled events become part of the API of the containing component (?)

For example element structure with event bubbling: https://lit.dev/playground/#gist=2554194ca19abd3915cf6b4779189f6c

Maybe pros of bubbling:

• less code for attaching event handlers on higher levels
• less clear (unless correctly documented) to the API consumer as events that bubble up become part of the API of the containing element
• ...

cons:

• events must be re-dispatched from containing elements when needed on a higher level
• API can become fuzzy when not correctly documented and events not checked for the source of the event.
• ...

So my questions are:

• For me I would like to make an API as explicit as possible so no bubbling, any more opinition/thoughts?

• I read some more info here (https://open-wc.org/guides/knowledge/events/), but are there more best practices or things to consider?

You listed pretty much all pros and cons. From my experience, use bubbling very carefully and purposely. It will get out of hands very quickly. To give you an example.

Say you add a bubbling close event to a dropdown element. Fairly common.You do this to inform the outside world that the element was closed. It might even be defined in a parent class for general use. Everything works fine until you put this element in a custom dialog. As it turns out the dialog closes the overlay when it handle the close event. Since the dropdown dispatches this event, the dialog will close when the dropdown is closed.

It's an example of unintended consequence of using bubbling events. It might be a mistake easy to fix but when your application grow and your components base grow it so much harder to make these changes.

I recently wrote a library of UI components and I decided that all events are non-bubbling unless they really have to communicate something to the whole DOM. Which is almost never. Events retargeting is not as much of a problem but by doing that you saves yourself time fixing problems related to edge cases where bubbling doesn't work.