Define typed custom element

define.ts

type Tag = `${string}-${string}`;

type TagMap = HTMLElementTagNameMap;

interface CustomElement<T> extends CustomElementConstructor {
  new (...params: any[]): T;
}

function define<S extends Tag, K extends keyof TagMap>(selector: S, is?: K) {
  return (target: CustomElement<TagMap[K]>) => {
    customElements.define(selector, target, is ? { extends: is } : {});
  };
}