I'm studying LWC Events and came across bubbles and composed. I'm not able to understand the need for both.. Let's consider two components 'Component A' && 'Component B', A is the parent here.
From my understanding, for whatever event happens in component B:
bubbles is used to allow event bubble up through the the DOM, so ideally if I set bubbles as true, it'd not allow event propagation outside of Component B.
If I set composed as true, it allows the parent component to listen to the event as well.
However, the 2nd point can be achieved even by using the customevent() on event target by dispatching event which can then be listened by the parent component.
And, the first point, where events are bubbled only inside the component where the event occurred. Now, whatever we want to do once event occurs, why do we even need to bubble it? we can achieve any functionality within the same component without even bubbling it.. Can't we?
Can someone please help me understand why we really need bubbles and composed, not able to understand much from documentation.
Can someone please explain this concept using an example?