About

Fast, lightweight web components

LitElement is a simple base class for creating fast, lightweight web components that work in any web page with any framework.

Using lit-html

For rendering, LitElement uses lit-html—a fast HTML templating library. To build an app out of LitElement components, check out PWA Starter Kit.

Who are we?

LitElement is brought to you by developers on the Google Chrome team with the input of web developers at organizations big and small around the world.

Get started

Define a component in JavaScript:

custom-greeting.js

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

// Create your custom component
class CustomGreeting extends LitElement {
  // Declare properties
  static get properties() {
    return {
      name: { type: String }
    };
  }
  // Initialize properties
  constructor() {
    super();
    this.name = 'World';
  }
  // Define a template
  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}
// Register the element with the browser
customElements.define('custom-greeting', CustomGreeting);

Include the component in your web page:

index.html

<custom-greeting></custom-greeting>

Why use LitElement?

Made to share

Web components built with LitElement are made to share with the world and with others across your organization, no matter what libraries or frameworks they use.

Interoperable

LitElement follows the web components standards, so your components will work with any framework.

LitElement uses custom elements for easy inclusion in web pages, and shadow DOM for encapsulation. There’s no new abstraction on top of the web platform.