lit-element

  • Version 4.1.1
  • Published
  • 122 kB
  • 3 dependencies
  • BSD-3-Clause license

Install

npm i lit-element
yarn add lit-element
pnpm add lit-element

Overview

A simple base class for creating fast, lightweight web components

Index

Classes

class LitElement

class LitElement extends ReactiveElement {}
  • Base element class that manages element properties and attributes, and renders a lit-html template.

    To define a component, subclass LitElement and implement a render method to provide the component's template. Define properties using the property or the decorator.

property ['_$litElement$']

static ['_$litElement$']: boolean;

    property renderOptions

    readonly renderOptions: RenderOptions;
    • rendering

    method connectedCallback

    connectedCallback: () => void;
    • Invoked when the component is added to the document's DOM.

      In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

      connectedCallback() {
      super.connectedCallback();
      addEventListener('keydown', this._handleKeydown);
      }

      Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

      lifecycle

    method createRenderRoot

    protected createRenderRoot: () => HTMLElement | DocumentFragment;
    • rendering

    method disconnectedCallback

    disconnectedCallback: () => void;
    • Invoked when the component is removed from the document's DOM.

      This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

      disconnectedCallback() {
      super.disconnectedCallback();
      window.removeEventListener('keydown', this._handleKeydown);
      }

      An element may be re-connected after being disconnected.

      lifecycle

    method render

    protected render: () => unknown;
    • Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html's ChildPart - typically a TemplateResult. Setting properties inside this method will *not* trigger the element to update. rendering

    method update

    protected update: (changedProperties: PropertyValues) => void;
    • Updates the element. This method reflects property values to attributes and calls render to render DOM via lit-html. Setting properties inside this method will *not* trigger another update.

      Parameter changedProperties

      Map of changed properties with old values updates

    Namespaces

    namespace Unstable

    namespace Unstable {}
    • Contains types that are part of the unstable debug API.

      Everything in this API is not stable and may change or be removed in the future, even on patch releases.

    namespace Unstable.DebugLog

    namespace Unstable.DebugLog {}
    • When Lit is running in dev mode and window.emitLitDebugLogEvents is true, we will emit 'lit-debug' events to window, with live details about the update and render lifecycle. These can be useful for writing debug tooling and visualizations.

      Please be aware that running with window.emitLitDebugLogEvents has performance overhead, making certain operations that are normally very cheap (like a no-op render) much slower, because we must copy data and dispatch events.

    type Entry

    type Entry = LitUnstable.DebugLog.Entry | ReactiveUnstable.DebugLog.Entry;

      Package Files (2)

      Dependencies (3)

      Dev Dependencies (6)

      Peer Dependencies (0)

      No peer dependencies.

      Badge

      To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

      You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/lit-element.

      • Markdown
        [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/lit-element)
      • HTML
        <a href="https://www.jsdocs.io/package/lit-element"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>