Web Components & Shadow DOM

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    const button = document.createElement('button');
    button.addEventListener('click', (e) => {
      this.dispatchEvent(new CustomEvent('my-event', {
        bubbles: true,
        composed: true,
        detail: { originalEvent: e }
      }));
    });
    this.shadowRoot.appendChild(button);
  }
}