Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
@lit/reactive-element
Advanced tools
A simple low level base class for creating fast, lightweight web components
The @lit/reactive-element package provides a base class for creating lightweight, reactive components. It is part of the Lit library, which is designed for building fast, lightweight web components. The reactive-element package focuses on the reactive system that powers Lit components, allowing developers to create and manage properties that automatically update the component when changed.
Reactive properties
This feature allows the creation of reactive properties that trigger updates to the component when their values change. The example defines a custom element with a reactive property 'name'. When 'name' changes, the 'updated' method logs the new value.
import { ReactiveElement } from '@lit/reactive-element';
class MyElement extends ReactiveElement {
static properties = {
name: {type: String}
};
constructor() {
super();
this.name = 'Lit';
}
updated(changedProperties) {
if (changedProperties.has('name')) {
console.log(`Name updated to: ${this.name}`);
}
}
}
customElements.define('my-element', MyElement);
Lifecycle callbacks
Lifecycle callbacks provide hooks into the component's lifecycle. This example shows how to use 'connectedCallback' and 'disconnectedCallback' to perform actions when the element is added to or removed from the DOM.
import { ReactiveElement } from '@lit/reactive-element';
class MyElement extends ReactiveElement {
connectedCallback() {
super.connectedCallback();
console.log('Element added to the page.');
}
disconnectedCallback() {
super.disconnectedCallback();
console.log('Element removed from the page.');
}
}
customElements.define('my-element', MyElement);
React is a popular library for building user interfaces. It uses a virtual DOM for efficient updates, similar to how @lit/reactive-element uses reactive properties to manage updates. However, React is generally used for larger applications and offers a more comprehensive ecosystem of tools and extensions.
Vue is another popular framework that provides reactive components. Like @lit/reactive-element, Vue components automatically update when reactive data changes. Vue offers a more integrated solution with built-in directives and a more opinionated structure, which differs from the minimalistic and low-level approach of @lit/reactive-element.
This is a major version pre-release of ReactiveElement 1.0. This package has been migrated out of LitElement. See issue #1077 for more info.
This pre-release is not yet feature complete or API stable.
A simple low level base class for creating fast, lightweight web components.
Full documentation is available at lit.dev.
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.
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;
}
}
<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.
From inside your project folder, run:
$ npm install @lit/reactive-element
To install the web components polyfills needed for older browsers:
$ npm i -D @webcomponents/webcomponentsjs
@lit/reactive-element
includes a development mode which adds additional checks that are
reported in the console.
To enable development mode, add the development
exports condition to your node
resolve configuration.
{
nodeResolve: {
exportConditions: ['development'],
}
}
{
plugins: [
nodeResolve({
exportConditions: ['development'],
}),
],
}
NOTE: Requires Webpack v5
{
resolve: {
conditionNames: ['development'],
}
}
The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.
Edge and Internet Explorer 11 require the web components polyfills and the
polyfill-support
module included in this package.
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="node_modules/@lit/reactive-element/polyfill-support.js"></script>
<!-- load application code -->
Please see CONTRIBUTING.md.
FAQs
A simple low level base class for creating fast, lightweight web components
The npm package @lit/reactive-element receives a total of 1,855,074 weekly downloads. As such, @lit/reactive-element popularity was classified as popular.
We found that @lit/reactive-element demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 9 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.