Nutritious Pomegranate Muffins

    @lit/reactive-element
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.1 • Public • Published

    ReactiveElement 1.0

    Build Status Published on npm Join our Slack Mentioned in Awesome Lit

    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.

    Keywords

    none

    Install

    npm i @lit/reactive-element

    Homepage

    lit.dev/

    DownloadsWeekly Downloads

    475,969

    Version

    1.4.1

    License

    BSD-3-Clause

    Unpacked Size

    591 kB

    Total Files

    151

    Last publish

    Collaborators

    • taylorv
    • lit-robot
    • kevinpschaaf
    • jbingham
    • sorvell
    • rictic
    • graynorton
    • justinfagnani
    • aomarks