lit-analyzer
lit-analyzer copied to clipboard
[ts-lit-plugin] Types from `vscode-html-languageservice`
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.
Hi, this is not only connected to role property. This seems to be a problem with all ariamixin related attributes, eg:

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.