Types for Custom Elements declared on the HTMLElementTagNameMap

[steveworkman]

I'm working with a large custom element library based on Lit and built with TypeScript. The team have created types for all elements and have exposed the types like this:

declare global {
    interface HTMLElementTagNameMap {
        'mc-button': McButton;
    }
}

However, the elements still appear as any types when using them within SFCs with Volar.

Can Volar pick up these tags, and if so, what config is required to make it happen?

[johnsoncodehk]

You can try:

declare module 'vue' {
  export interface GlobalComponents {
    McButton: McButton;
  }
}

See https://github.com/vuejs/language-tools/tree/master/packages/vscode-vue#usage

[steveworkman]

@johnsoncodehk thanks for that, good to know the context too - When we do that it resolves the tags but it doesn't check the properties - any way to do that?