• Version 3.1.1
  • Published
  • 173 kB
  • 2 dependencies
  • BSD-3-Clause license


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


A simple base class for creating fast, lightweight web components



variable UpdatingElement

const UpdatingElement: any;


    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 [[properties]] property or the [[property]] decorator.

    property ['_$litElement$']

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

      property ['finalized']

      protected static ['finalized']: boolean;
      • Ensure this class is marked as finalized as an optimization ensuring it will not needlessly try to finalize.

        Note this property name is a string to prevent breaking Closure JS Compiler optimizations. See @lit/reactive-element for more information.

      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() {
        addEventListener('keydown', this._handleKeydown);

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


      method createRenderRoot

      protected createRenderRoot: () => Element | ShadowRoot;
      • 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() {
        window.removeEventListener('keydown', this._handleKeydown);

        An element may be re-connected after being disconnected.


      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

      Package Files (2)

      Dependencies (2)

      Dev Dependencies (13)

      Peer Dependencies (0)

      No peer dependencies.


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

      You may also use to create a custom badge linking to

      • Markdown
      • HTML
        <a href=""><img src="" alt=""></a>