x-foo.ts

export default class XFoo extends HTMLElement {
  message: string;
  constructor() {
    super();
  }
  connectedCallback() {
    this.innerHTML = `<p>${this.message}</p>`;
    this.addEventListener('click', this.onClick);
  }
  onClick(e: Event) {
    this.innerHTML = `<p>I was clicked!</p>`;
    this.dispatchEvent(new CustomEvent('x-foo-changed', { detail: { foo: 'bar' } }));
  }
}

window.customElements.define('x-foo', XFoo);