How to get proper type support for imported custom elements?

[backfromexile]

In my project I am using a bunch of custom elements from another package.
The library exports types that support an augmentation of HTMLElementTagNameMap. Die to the library allowing for a custom prefix thief library itself cannot augment the Tag name map.
However, In all cases I tried I don't get proper type support for props or events, Vue barely accepts the in tag itself.

The elements are defined as so for example

declare global {
    interface HTMLElementTagNameMap {
        'my-element': HTMLElement & {
            value?: number;
            label?: string;
        }
    }
}

But this and any other augmentation I tried has no real effect.

How do I make type checking and autocompletion/intellisense work with custom elements when they are used in Vue?

[official-burak]

HTMLElementTagNameMap only types document.querySelector. Vue templates read GlobalComponents, and the compiler needs isCustomElement so the tag is not treated as a missing Vue component.

// vite.config.ts
vue({
  template: {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith('my-') // your prefix
    }
  }
})

// a .d.ts file included by tsconfig
import type { DefineComponent } from 'vue'

declare module 'vue' {
  interface GlobalComponents {
    'my-element': DefineComponent<{
      value?: number
      label?: string
    }>
  }
}

export {}

Use the prefix you actually register. The library cannot ship this map if the prefix is chosen by the app. Events go on that component type too, not on HTMLElementTagNameMap.

Docs: https://vuejs.org/guide/extras/web-components.html (Non-Vue Web Components and TypeScript).