Event Bubbling & Capturing

const event = new CustomEvent('myEvent', {
  bubbles: true,
  composed: true,
  detail: { data: 'example' }
});

Whether the event can carry custom data
Whether the event bubbles through Shadow DOM boundaries
The composed property determines whether the event can bubble through Shadow DOM boundaries. When true, the event can cross Shadow DOM boundaries during the bubbling phase, allowing it to be heard by elements in the light DOM. This is crucial for Web Components and custom elements that need to communicate events to the outside world. Default DOM events like 'click' have composed: true, while custom events default to composed: false.
Whether the event can be cancelled
Whether the event triggers in capturing phase