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, in a CMS, in Markdown, or in views built with frameworks like React and Vue.

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

@customElement('custom-greeting')
export class CustomGreeting extends LitElement { 
  @property() name = 'World';
  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

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

Why use LitElement?

Delightfully Declarative

Express your UI declaratively, as a function of state. Levergage the full expressiveness of JavaScript in your templates – no custom syntax required.

Elements update automatically when their properties change. And they update fast, without diffing.

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.

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!