npmpackage.info

Gathering detailed insights and metrics for @lit/reactive-element

Other packages similar to @lit/reactive-element

@spectrum-web-components/reactive-controllers

1.6.0

ReactiveControllers for powering common UI patterns

element-vir

26.0.0

Heroic. Reactive. Declarative. Type safe. Web components without compromise.

@3mo/disabled-property

1.1.4

A decorator to add a disabled property to a reactive element.

lit-forms

0.4.1

Lit forms inspired by angular reactive forms

Gathering detailed insights and metrics for @lit/reactive-element

@lit/reactive-element - 2.1.0 | npmpackage.info

@lit/reactive-element

Lit is a simple library for building fast, lightweight web components.

2.1.0

19,796

BSD-3-Clause

TypeScript

2.85 kB

205,778,811 6

Installations

npm install @lit/reactive-element

Developer Guide

BETA

Typescript

No

Module System

ESM

Node Version

20.19.0

NPM Version

10.8.2 Score

99.7

Supply Chain

100

Quality

85.7

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

151

Total

2,508

Closed

534

Merged

1,823

Issues

Open

426

Total

1,964

Closed

1,538

Releases

549

lit@3.3.0

Updated on Apr 11, 2025

@lit/reactive-element@2.1.0

Updated on Apr 11, 2025

lit-html@3.3.0

Updated on Apr 11, 2025

lit-element@4.2.0

Updated on Apr 11, 2025

@lit/context@1.1.5

Updated on Apr 11, 2025

@lit-labs/nextjs@0.2.3

Updated on Apr 11, 2025

View All 549 releases

Languages

TypeScript

JavaScript

HTML

CSS

Vue

Shell

TypeScript (58.93%)

JavaScript (38.48%)

HTML (2.19%)

CSS (0.23%)

Vue (0.17%)

Shell (0.01%)

Developer

lit

Download Statistics

Total Downloads

205,778,811

Last Day

100,807

Last Week

2,475,428

Last Month

10,916,704

Last Year

104,304,403

GitHub Statistics

BSD-3-Clause License

19,796 Stars

2,567 Commits

969 Forks

210 Watchers

216 Branches

194 Contributors

Updated on Jun 09, 2025

Bundle Size

7.64 kB

Minified

2.85 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 194 Contributors

Package Meta Information

Latest Version

2.1.0

Package Id

@lit/reactive-element@2.1.0

Unpacked Size

841.93 kB

Size

171.22 kB

File Count

179

NPM Version

10.8.2

Node Version

20.19.0

Published on

Apr 11, 2025

Total Downloads

Cumulative downloads

Total Downloads

205,778,811

Last Day

7.5%

100,807

Compared to previous day

Last Week

-10.2%

2,475,428

Compared to previous week

Last Month

4.1%

10,916,704

Compared to previous month

Last Year

58%

104,304,403

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@lit-labs/ssr-dom-shim

Dev Dependencies

@babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-transform-class-static-block @babel/plugin-transform-typescript @lit-internal/scripts @webcomponents/shadycss @webcomponents/template @webcomponents/webcomponentsjs esbuild

ReactiveElement 1.0

ReactiveElement

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

About this release

This is a pre-release of Lit 3.0, the next major version of Lit.

Lit 3.0 has very few breaking changes from Lit 2.0:

Drops support for IE11
Published as ES2021
Removes a couple of deprecated Lit 1.x APIs

Lit 3.0 should require no changes to upgrade from Lit 2.0 for the vast majority of users. Once the full release is published, most apps and libraries will be able to extend their npm version ranges to include both 2.x and 3.x, like "^2.7.0 || ^3.0.0".

Lit 2.x and 3.0 are interoperable: templates, base classes, directives, decorators, etc., from one version of Lit will work with those from another.

Please file any issues you find on our issue tracker.

Documentation

Full documentation is available at lit.dev.

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

1import {
2  ReactiveElement,
3  html,
4  css,
5  customElement,
6  property,
7  PropertyValues,
8} from '@lit/reactive-element';
9
10// This decorator defines the element.
11@customElement('my-element')
12export class MyElement extends ReactiveElement {
13  // This decorator creates a property accessor that triggers rendering and
14  // an observed attribute.
15  @property()
16  mood = 'great';
17
18  static styles = css`
19    span {
20      color: green;
21    }
22  `;
23
24  contentEl?: HTMLSpanElement;
25
26  // One time setup of shadowRoot content.
27  createRenderRoot() {
28    const shadowRoot = super.createRenderRoot();
29    shadowRoot.innerHTML = `Web Components are <span></span>!`;
30    this.contentEl = shadowRoot.firstElementChild;
31    return shadowRoot;
32  }
33
34  // Use a DOM rendering library of your choice or manually update the DOM.
35  update(changedProperties: PropertyValues) {
36    super.update(changedProperties);
37    this.contentEl.textContent = this.mood;
38  }
39}

1<my-element mood="awesome"></my-element>

Note, this example uses decorators to create properties. Decorators are a proposed standard currently available in TypeScript or Babel. ReactiveElement also supports a vanilla JavaScript method of declaring reactive properties.

Installation

1$ npm install @lit/reactive-element

Or use from lit:

1$ npm install lit

Contributing

Please see CONTRIBUTING.md.

No vulnerabilities found.

10

Code-Review

Determines if the project requires code review before pull requests (aka merge requests) are merged.

10

Maintained

Determines if the project is "actively maintained".

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dependency-Update-Tool

Determines if the project uses a dependency update tool.

8

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

7

Pinned-Dependencies

Determines if the project has declared and pinned its dependencies.

Reason

dependency not pinned by hash detected -- score normalized to 7

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/benchmarks.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/benchmarks.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/benchmarks.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/benchmarks.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/benchmarks.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/benchmarks.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/benchmarks.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/benchmarks.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/benchmarks.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/benchmarks.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/benchmarks.yml:72: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/benchmarks.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/benchmarks.yml:88: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/benchmarks.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/benchmarks.yml:104: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/benchmarks.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-image.yaml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/release-image.yaml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-image.yaml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/release-image.yaml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release-image.yaml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/release-image.yaml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-image.yaml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/release-image.yaml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yaml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/release.yaml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yaml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/release.yaml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yaml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/release.yaml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yaml:68: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/release.yaml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/sauce-ie11.yaml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/sauce-ie11.yaml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/sauce-ie11.yaml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/sauce-ie11.yaml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/sauce-ie11.yaml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/sauce-ie11.yaml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/sauce.yaml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/sauce.yaml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/sauce.yaml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/sauce.yaml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/sauce.yaml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/sauce.yaml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/starter-kits.yaml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/starter-kits.yaml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/starter-kits.yaml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/starter-kits.yaml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/starter-kits.yaml:64: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/starter-kits.yaml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/tests.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/tests.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/tests.yml:79: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/tests.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/tests.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/tests.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/tests.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/tests.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/tests.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/tests.yml/main?enable=pin
Warn: npmCommand not pinned by hash: packages/benchmarks/generator/scripts/generate.sh:11
Info: Dockerfile dependencies are pinned
Info: no insecure (not pinned by hash) dependency downloads found in Dockerfiles
Info: no insecure (not pinned by hash) dependency downloads found in shell scripts

0

CII-Best-Practices

Determines if the project has a CII Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

Score

6

/10

Last Scanned on 2022-08-15

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More