Defining a component
Define a Lit component by creating a class extending
LitElement and registering your class with the browser:
@customElement decorator is shorthand for calling
customElements.define, which registers a custom element class with the browser and associates it with an element name (in this case,
A Lit component is an HTML elementPermalink to “A Lit component is an HTML element”
When you define a Lit component, you're defining a custom HTML element. So you can use the new element like you'd use any built-in element:
LitElement base class is a subclass of
HTMLElement, so a Lit component inherits all of the standard
HTMLElement properties and methods.
LitElement inherits from
ReactiveElement, which implements reactive properties, and in turn inherits from
Providing good TypeScript typingsPermalink to “Providing good TypeScript typings”
TypeScript will infer the class of an HTML element returned from certain DOM APIs based on the tag name. For example,
document.createElement('img') returns an
HTMLImageElement instance with a
src: string property.
Custom elements can get this same treatment by adding to the
HTMLElementTagNameMap as follows:
By doing this, the following code properly type-checks:
We recommend adding an
HTMLElementTagNameMap entry for all elements authored in TypeScript, and ensuring you publish your
.d.ts typings in your npm package.