# lit-element

> A simple base class for creating fast, lightweight web components

Latest version **4.2.2** (published 2025-12-23) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install lit-element
pnpm add lit-element
yarn add lit-element
bun add lit-element
```

## Health

**Score 75/100 (B)** — status: stable.

Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score; high quality score; popular repo.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.2.2 |
| Published | 2025-12-23 |
| First published | 2017-09-07 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 120.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 21816 |
| Author | Google LLC |
| Maintainers | aomarks, emarquez, sorvell, bicknellr, usergenic, polymer-devs, azakus, kevinpschaaf, justinfagnani, rictic, graynorton, lit-robot, augustjk |

## Links

- npm: https://www.npmjs.com/package/lit-element
- Repository: https://github.com/lit/lit
- Homepage: https://lit.dev/
- Issues: https://github.com/lit/lit/issues
- npm.io page: https://npm.io/package/lit-element

## Dependencies (3)

- [lit-html](https://npm.io/package/lit-html.md) ^3.3.0
- [@lit/reactive-element](https://npm.io/package/@lit/reactive-element.md) ^2.1.0
- [@lit-labs/ssr-dom-shim](https://npm.io/package/@lit-labs/ssr-dom-shim.md) ^1.5.0

## Recent versions

- 4.2.2 (latest) — 2025-12-23
- 4.0.0-pre.1 (pre) — 2023-09-29
- 3.2.3-next.1 (next) — 2022-07-25
- 3.0.0-rc.4 (next-major) — 2021-09-03
- 4.2.1 — 2025-07-11
- 4.2.0 — 2025-04-11
- 4.1.1 — 2024-10-07
- 4.1.0 — 2024-08-05
- 4.0.6 — 2024-06-04
- 4.0.5 — 2024-04-15
- 4.0.4 — 2024-01-31
- 4.0.3 — 2024-01-09
- 4.0.2 — 2023-11-16
- 4.0.1 — 2023-10-28
- 4.0.0 — 2023-10-10
- … 72 more at https://npm.io/package/lit-element/versions

## README

# LitElement

A simple base class for creating fast, lightweight web components.

[![Build Status](https://github.com/lit/lit/workflows/Tests/badge.svg)](https://github.com/lit/lit/actions?query=workflow%3ATests)
[![Published on npm](https://img.shields.io/npm/v/lit-element.svg?logo=npm)](https://www.npmjs.com/package/lit-element)
[![Join our Discord](https://img.shields.io/badge/discord-join%20chat-5865F2.svg?logo=discord&logoColor=fff)](https://lit.dev/discord/)
[![Mentioned in Awesome Lit](https://awesome.re/mentioned-badge.svg)](https://github.com/web-padawan/awesome-lit)

LitElement is the base class that powers the [Lit](https://lit.dev) library for building fast web components.

Most users should import `LitElement` from the [`lit`](https://www.npmjs.com/package/lit) package rather than installing and importing from the `lit-element` package directly.

## Documentation

Full documentation is available at [lit.dev/docs/components/overview/](https://lit.dev/docs/components/overview/).

## Overview

LitElement is a base class for custom elements that extends the Lit project's
core ReactiveElement (from
[`@lit/reactive-element'](https://www.npmjs.com/package/@lit/reactive-element)) base class with
lit-html templating. ReactiveElement enhances HTMLElement with reactive
properties, additional lifecycle callbacks, convenient inline CSS authoring, and
a set of useful class decorators, while lit-html provides fast, declarative HTML
templating.

### Example

```ts
import {LitElement, html, css} from 'lit';
import {customElement, property} from 'lit/decorators.js';

// Registers the element
@customElement('my-element')
export class MyElement extends LitElement {
  // Styles are applied to the shadow root and scoped to this element
  static styles = css`
    span {
      color: green;
    }
  `;

  // Creates a reactive property that triggers rendering
  @property()
  mood = 'great';

  // Render the component's DOM by returning a Lit template
  render() {
    return html`Web Components are <span>${this.mood}</span>!`;
  }
}
```

## Contributing

Please see [CONTRIBUTING.md](../../CONTRIBUTING.md).

---
_Source: https://npm.io/package/lit-element · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._