How to add global types for web components

[KonnorRogers]

Hello there! I work on https://shoelace.style and we recently received a PR for generating global types for Vue.

The proposed PR does the following in the tsconfig.json:

{
  "compilerOptions": {
    "types": ["@shoelace-style/shoelace/dist/vue/types"]
   }
}

However, it's my understanding this may affect other @types and in a project. I noticed there was a env.d.ts generated with new Vue projects and I think something like the following would work:

// env.d.ts
/// <reference types="vite/client" />
/// <reference types="@shoelace-style/shoelace/dist/vue/types" />

I was mostly curious what the best way is to add globally registering web component types that exist in a single .d.ts file.

I tried searching the documentation but couldn't find any examples of anything. This is the closest I found:

https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties

Full context:

shoelace-style/shoelace#1797