[ts-lit-plugin] Types from `vscode-html-languageservice`

[ptu14]

Hi, I'm wondering why lit-analyzer that ts-lit-plugin using, uses type definitions from vscode-html-languageservice rather than typescript lib.dom or own type definitions.

For example role attribute case:

When i create Lit component with native input inside:

     render() {
        return html`
            <input role="${ifDefined(this.role || undefined)}" />
        `;
    }

lit-plugin in vscode and in Intellij highlight this as type error

when i run npx lit-analyzer

i get

    Type 'string' is not assignable to '"alert" | "alertdialog" | "button" | "checkbox" | "dialog" | "gridcell" | "link" | "log" | "marquee" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "option" | "progressbar" | "radio" | "scrollbar" | "searchbox" | "slider" | "spinbutton" | "status" | "switch" | ... 89 more ...'
    138:  <input role="${ifDefined(this.role
    no-incompatible-type-binding

but inside typescript/lib/lib.dom.d.ts we have role: string | null;

I understand that Lit doesn't always have a connection to TypeScript, but what it's doing now is also not accurate according to https://w3c.github.io/aria/#ARIAMixin. where type of role is DOMString.

maybe this bug should be reported to ts-lit-plugin, but from what I can see these projects are connected somehow.

[wszydlak]

Hi, this is not only connected to role property. This seems to be a problem with all ariamixin related attributes, eg:

[jesseditson]

FWIW this also appears to be true for all input, select, etc types from lib.dom.d.ts - for instance, a similar error will be reported when using:

const value: "hidden" | "text" = "hidden";
html`<input
    type={value as HTMLInputElement["type"]}
/>

This makes it quite hard to get both lit analyzer and typescript types passing on projects that use both.