Creating Custom Events

const shadowEvent = new CustomEvent('shadowAction', {
  bubbles: true,
  composed: true,
  detail: { action: 'update' }
});

It combines multiple events
It creates compound events
It allows events to cross shadow DOM boundaries
The composed option determines whether an event can cross Shadow DOM boundaries. When set to true: 1. The event can bubble from inside a shadow DOM to its host element 2. Event listeners in the main DOM can catch events from shadow DOM elements 3. It enables communication between shadow DOM components and their containing page 4. It maintains encapsulation while allowing necessary event propagation This is particularly important when working with Web Components and custom elements that use Shadow DOM for encapsulation.
It composes event handlers