# @lit/reactive-element

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

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

## Install

```sh
npm install @lit/reactive-element
pnpm add @lit/reactive-element
yarn add @lit/reactive-element
bun add @lit/reactive-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 | 2.1.2 |
| Published | 2025-12-23 |
| First published | 2020-12-17 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 844.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 21815 |
| Author | Google LLC |
| Maintainers | kevinpschaaf, sorvell, rictic, graynorton, justinfagnani, aomarks, lit-robot, augustjk |

## Links

- npm: https://www.npmjs.com/package/@lit/reactive-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/reactive-element

## Dependencies (1)

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

## Recent versions

- 2.1.2 (latest) — 2025-12-23
- 2.0.0-pre.1 (pre) — 2023-09-29
- 1.4.0-next.1 (next) — 2022-07-25
- 1.0.0-pre.1 (next-major) — 2020-12-17
- 2.1.1 — 2025-07-11
- 2.1.0 — 2025-04-11
- 2.0.4 — 2024-01-31
- 2.0.3 — 2024-01-09
- 2.0.2 — 2023-11-16
- 2.0.1 — 2023-10-28
- 2.0.0 — 2023-10-10
- 1.6.3 — 2023-08-02
- 1.6.2 — 2023-06-01
- 2.0.0-pre.0 — 2023-04-27
- 1.6.1 — 2023-01-12
- … 27 more at https://npm.io/package/@lit/reactive-element/versions

## README

# ReactiveElement

A simple low level 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/reactive-element?logo=npm)](https://www.npmjs.com/package/@lit/reactive-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)

## Documentation

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

## Overview

`ReactiveElement` is a base class for writing web components that react to changes in properties and attributes. `ReactiveElement` adds reactive properties and a batching, asynchronous update lifecycle to the standard web component APIs. Subclasses can respond to changes and update the DOM to reflect the element state.

`ReactiveElement` doesn't include a DOM template system, but can easily be extended to add one by overriding the `update()` method to call the template library. `LitElement` is such an extension that adds `lit-html` templating.

## Example

```ts
import {
  ReactiveElement,
  html,
  css,
  customElement,
  property,
  PropertyValues,
} from '@lit/reactive-element';

// This decorator defines the element.
@customElement('my-element')
export class MyElement extends ReactiveElement {
  // This decorator creates a property accessor that triggers rendering and
  // an observed attribute.
  @property()
  mood = 'great';

  static styles = css`
    span {
      color: green;
    }
  `;

  contentEl?: HTMLSpanElement;

  // One time setup of shadowRoot content.
  createRenderRoot() {
    const shadowRoot = super.createRenderRoot();
    shadowRoot.innerHTML = `Web Components are <span></span>!`;
    this.contentEl = shadowRoot.firstElementChild;
    return shadowRoot;
  }

  // Use a DOM rendering library of your choice or manually update the DOM.
  update(changedProperties: PropertyValues) {
    super.update(changedProperties);
    this.contentEl.textContent = this.mood;
  }
}
```

```html
<my-element mood="awesome"></my-element>
```

Note, this example uses decorators to create properties. Decorators are a proposed
standard currently available in [TypeScript](https://www.typescriptlang.org/) or [Babel](https://babeljs.io/docs/en/babel-plugin-proposal-decorators). ReactiveElement also supports a [vanilla JavaScript method](https://lit.dev/docs/components/properties/#declaring-properties-in-a-static-properties-field) of declaring reactive properties.

## Installation

```bash
$ npm install @lit/reactive-element
```

Or use from `lit`:

```bash
$ npm install lit
```

## Contributing

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

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