400e0876de | ||
---|---|---|
.. | ||
decorators | ||
development | ||
node | ||
LICENSE | ||
README.md | ||
css-tag.d.ts | ||
css-tag.d.ts.map | ||
css-tag.js | ||
css-tag.js.map | ||
decorators.d.ts | ||
decorators.d.ts.map | ||
decorators.js | ||
decorators.js.map | ||
package.json | ||
polyfill-support.d.ts | ||
polyfill-support.d.ts.map | ||
polyfill-support.js | ||
polyfill-support.js.map | ||
reactive-controller.d.ts | ||
reactive-controller.d.ts.map | ||
reactive-controller.js | ||
reactive-controller.js.map | ||
reactive-element.d.ts | ||
reactive-element.d.ts.map | ||
reactive-element.js | ||
reactive-element.js.map |
README.md
ReactiveElement 1.0
ReactiveElement
A simple low level base class for creating fast, lightweight web components.
About this release
This is a stable release of @lit/reactive-element
1.0.0 (part of the Lit 2.0 release). If upgrading from previous versions of UpdatingElement
, please see the Upgrade Guide.
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
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.
Installation
$ npm install @lit/reactive-element
Or use from lit
:
$ npm install lit
Contributing
Please see CONTRIBUTING.md.