How I define custom events

main.ts

import {MyEvent} from './my-event.ts';

document.addEventListener(MyEvent.name, (e) => {...});

my-event.ts

export class MyEvent extends Event {
  static readonly name = 'my-event';

  #data;

  get data() { return this.#data }

  constructor(data: MyData, options: EventInit = {}) {
    super(MyEvent.name, {bubbles: true, ...options});

    this.#data = data;
  }
}

declare global {
  interface ElementEventMap {
    [MyEvent.name]: MyEvent;
  }
}