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

1import {
2  ReactiveElement,
3  html,
4  css,
5  customElement,
6  property,
7  PropertyValues,
8} from '@lit/reactive-element';
9
10// This decorator defines the element.
11@customElement('my-element')
12export class MyElement extends ReactiveElement {
13  // This decorator creates a property accessor that triggers rendering and
14  // an observed attribute.
15  @property()
16  mood = 'great';
17
18  static styles = css`
19    span {
20      color: green;
21    }
22  `;
23
24  contentEl?: HTMLSpanElement;
25
26  // One time setup of shadowRoot content.
27  createRenderRoot() {
28    const shadowRoot = super.createRenderRoot();
29    shadowRoot.innerHTML = `Web Components are <span></span>!`;
30    this.contentEl = shadowRoot.firstElementChild;
31    return shadowRoot;
32  }
33
34  // Use a DOM rendering library of your choice or manually update the DOM.
35  update(changedProperties: PropertyValues) {
36    super.update(changedProperties);
37    this.contentEl.textContent = this.mood;
38  }
39}

1<my-element mood="awesome"></my-element>

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

1$ npm install @lit/reactive-element

Or use from lit:

1$ npm install lit

Contributing

Please see CONTRIBUTING.md.