ReactiveElement

A simple low level base class for creating fast, lightweight web components.


Documentation

Full documentation is available at lit.dev/docs/api/ReactiveElement/.

Overview

ReactiveElement is a base class for writing web components that react to changes in properties and attributes. ReactiveElement adds reactive properties and a batching, asynchronous update lifecycle to the standard web component APIs. Subclasses can respond to changes and update the DOM to reflect the element state.

ReactiveElement doesn't include a DOM template system, but can easily be extended to add one by overriding the update() method to call the template library. LitElement is such an extension that adds lit-html templating.

Example

``ts
import {
ReactiveElement,
html,
css,
customElement,
property,
PropertyValues,
} from '@lit/reactive-element';

// This decorator defines the element.
@customElement('my-element')
export class MyElement extends ReactiveElement {
// This decorator creates a property accessor that triggers rendering and
// an observed attribute.
@property()
mood = 'great';

static styles = css
span {
color: green;
}
;

contentEl?: HTMLSpanElement;

// One time setup of shadowRoot content.
createRenderRoot() {
const shadowRoot = super.createRenderRoot();
shadowRoot.innerHTML = Web Components are !;
this.contentEl = shadowRoot.firstElementChild;
return shadowRoot;
}

// Use a DOM rendering library of your choice or manually update the DOM.
update(changedProperties: PropertyValues) {
super.update(changedProperties);
this.contentEl.textContent = this.mood;
}
}
`

`html

`

Note, this example uses decorators to create properties. Decorators are a proposed
standard currently available in TypeScript or Babel. ReactiveElement also supports a vanilla JavaScript method of declaring reactive properties.

Installation

`bash
$ npm install @lit/reactive-element
`

Or use from lit:

`bash
$ npm install lit
``

Contributing

Please see CONTRIBUTING.md.