A simple base class for creating fast, lightweight web components
npm install lit-elementA simple base class for creating fast, lightweight web components.
LitElement is the base class that powers the Lit library for building fast web components.
Most users should import LitElement from the lit package rather than installing and importing from the lit-element package directly.
Full documentation is available at lit.dev/docs/components/overview/.
LitElement is a base class for custom elements that extends the Lit project's
core ReactiveElement (from@lit/reactive-element') base class with
lit-html templating. ReactiveElement enhances HTMLElement with reactive
properties, additional lifecycle callbacks, convenient inline CSS authoring, and
a set of useful class decorators, while lit-html provides fast, declarative HTML
templating.
`ts
import {LitElement, html, css} from 'lit';
import {customElement, property} from 'lit/decorators.js';
// Registers the element
@customElement('my-element')
export class MyElement extends LitElement {
// Styles are applied to the shadow root and scoped to this element
static styles = css
span {
color: green;
}
;
// Creates a reactive property that triggers rendering
@property()
mood = 'great';
// Render the component's DOM by returning a Lit template
render() {
return htmlWeb Components are ${this.mood}!;``
}
}
Please see CONTRIBUTING.md.