Easily Create Fast, Lightweight Web Components

LitElement makes it easy to define Web Components – ideal for sharing elements across your organization or building a UI design system.

Use your components anywhere you use HTML: in your main document, a CMS, Markdown, or a framework like React or Vue.

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

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  @property() name = 'World';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

<simple-greeting name="Everyone"></simple-greeting>

Why use LitElement?

Delightfully declarative

LitElement’s simple, familiar development model makes it easier than ever to build Web Components.

Express your UI declaratively, as a function of state. No need to learn a custom templating language – you can use the full power of JavaScript in your templates. Elements update automatically when their properties change.

Fast and light

Whether your end users are in emerging markets or Silicon Valley, they’ll appreciate that LitElement is extremely fast.

LitElement uses lit-html to define and render HTML templates. DOM updates are lightning-fast, because lit-html only re-renders the dynamic parts of your UI – no diffing required.

Seamlessly 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.

Next Steps

One.

Try LitElement in our live tutorial. You don’t need to install anything.

Two.

When you’re ready to dive in, set up LitElement locally and start building components!