Allow type arguments to be specified in template literal for geneic custom elements
Author: jolleekinCreated May 17, 2023Updated Aug 11, 2026
Should this be an RFC?
- This is not a substantial change
Which package is this a feature request for?
Lit Core (lit / lit-html / lit-element / reactive-element)
Description
In TypeScript, custom elements can be defined as generic types. However, there is no way to specify the type arguments when using these elements in a template literal. This causes lit analyzer (before it stops working) to complain with errors such as number is not assignable to T.
import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
@customElement('my-element')
export class MyElement<T> extends LitElement {
@property()
value!: T;
protected override render(): unknown {
return html`${this.value}`;
}
}
declare global {
interface HTMLElementTagNameMap {
'my-element': MyElement<any>;
}
}
@customElement('my-app')
export class MyApp extends LitElement {
protected override render(): unknown {
return html`
<!-- Needs to specify 'number' as the type argument for this instance of 'my-element' -->
<my-element .value=${123}></my-element>
<!-- Needs to specify 'string' as the type argument for this instance of 'my-element' -->
<my-element .value=${'a'}></my-element>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'my-app': MyApp;
}
}Alternatives and Workarounds
The current workaround to prevent lit analyzer from complaining is to cast the expressions to any.
html`
<my-element .value=${123 as any}></my-element>
`Source: lit/lit