How to install LitElement

LitElement uses lit-html to render into shadow DOM, and adds API to manage properties and attributes. Properties are observed by default, and elements update asynchronously when their properties change.

That means we can use the OOP (Object-Oriented Programming) paradigm using JavaScript or even better: TypeScript.

Installation

You can download the latest version of LitElement from the GitHub releases.

Example

Code 1: - this example uses decorators to create properties. Decorators are a proposed standard currently available in TypeScript or Babel.

import { LitElement, html, css, customElement, property } from "lit-element";

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

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

  // Render element DOM by returning a `lit-html` template.
  render() {
    return html`Web Components are ${this.mood}!`;
  }
}

Why use LitElement?