LitElement API Documentation

Modules

lit-element

The main LitElement module, which defines the LitElement base class and related APIs.

LitElement components can define a template and a set of observed properties. Changing an observed property triggers a re-render of the element.

Import LitElement and html from this module to create a component:

import {LitElement, html} from 'lit-element';

class MyElement extends LitElement {

  // Declare observed properties
  static get properties() {
    return {
      adjective: {}
    }
  }

  constructor() {
    this.adjective = 'awesome';
  }

  // Define the element's template
  render() {
    return html`<p>your ${adjective} template here</p>`;
  }
}

customElements.define('my-element', MyElement);

LitElement extends UpdatingElement and adds lit-html templating.

lit-element/lib/updating-element.js

import {UpdatingElement} from 'lit-element/lib/updating-element.js';

Custom Element base class that supports declaring observable properties, reflecting attributes to properties, and the core update lifecycle methods.

If you want to build a custom element base class that includes these features but not lit-html templating, extend UpdatingElement.