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

Usage no npm install needed!

<script type="module">
  import litReactiveElement from 'https://cdn.skypack.dev/@lit/reactive-element';


ReactiveElement 1.0

Build Status Published on npm Join our Slack Mentioned in Awesome Lit


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

About this release

This is a stable release of @lit/reactive-element 1.0.0 (part of the Lit 2.0 release). If upgrading from previous versions of UpdatingElement, please see the Upgrade Guide.


Full documentation is available at lit.dev.


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.


import {
} from '@lit/reactive-element';

// This decorator defines the element.
export class MyElement extends ReactiveElement {
  // This decorator creates a property accessor that triggers rendering and
  // an observed attribute.
  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 <span></span>!`;
    this.contentEl = shadowRoot.firstElementChild;
    return shadowRoot;

  // Use a DOM rendering library of your choice or manually update the DOM.
  update(changedProperties: PropertyValues) {
    this.contentEl.textContent = this.mood;
<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.


$ npm install @lit/reactive-element

Or use from lit:

$ npm install lit


Please see CONTRIBUTING.md.