Creating Custom Events

const childEvent = new CustomEvent('childAction', {
  bubbles: true,
  detail: { data: 'example' }
});

child.dispatchEvent(childEvent);

Events automatically bubble up
Bubbling must be enabled explicitly
For custom events, bubbling must be explicitly enabled by setting the bubbles option to true when creating the event. This is different from many native DOM events that bubble by default. When bubbling is enabled: 1) The event will propagate up through the DOM tree, 2) Parent elements can listen for events dispatched by their children, 3) Event handlers can use stopPropagation() to prevent further bubbling, 4) The event target property will point to the original element that dispatched the event. This makes custom events more flexible and allows for event delegation patterns.
Bubbling only works for native events
Custom events cannot bubble