Creating Custom Events

class CustomComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <button id="action">Click Me</button>
    `;
    
    this.shadowRoot.getElementById('action')
      .addEventListener('click', () => {
        this.dispatchEvent(new CustomEvent('component-action', {
          bubbles: true,
          composed: true,
          detail: { source: this.id }
        }));
      });
  }
}