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.


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

Cloning a repository

You can clone a repository from to your local computer.
Cloning with HTTPS URLs
git clone
Cloning with SSH URLs
git clone [email protected]:Polymer/lit-element.git
Cloning with GitHub CLI
gh repo clone Polymer/lit-element

Install via NPM package

Run the following command to locally install the package and its dependencies with NPM.
Next Version:3.0.0-rc.2
Publish Time:2021-05-08 07:47:18
Unpacked Size:291.4 kB
Downloading and installing packages locally
npm i lit-element
npm install lit-element
yarn add lit-element
Downloading and installing packages globally
npm i -g lit-element
yarn global add lit-element
Install Specific Version of a Package
npm install [email protected]
bower install lit-element


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.
export class MyElement extends LitElement {
  // This decorator creates a property accessor that triggers rendering and
  // an observed attribute.
  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?

  • checkDelightfully declarative - LitElement’s simple, familiar development model makes it easier than ever to build Web Components.
  • checkFast and light - Whether your end users are in emerging markets or Silicon Valley, they’ll appreciate that LitElement is extremely fast.
  • checkSeamlessly 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.