Options
All
  • Public
  • Public/Protected
  • All
Menu

Module "lit-element"

The main LitElement module, which defines the LitElement base class and related APIs.

LitElement components can define a template and a set of observed properties. Changing an observed property triggers a re-render of the element.

Import LitElement and html from this module to create a component:

import {LitElement, html} from 'lit-element';

class MyElement extends LitElement {

  // Declare observed properties
  static get properties() {
    return {
      adjective: {}
    }
  }

  constructor() {
    this.adjective = 'awesome';
  }

  // Define the element's template
  render() {
    return html`<p>your ${adjective} template here</p>`;
  }
}

customElements.define('my-element', MyElement);

LitElement extends UpdatingElement and adds lit-html templating. The UpdatingElement class is provided for users that want to build their own custom element base classes that don't use lit-html.

Index

Type aliases

CSSResultOrNative

CSSResultOrNative: CSSResult | CSSStyleSheet

Constructor

Constructor<T>: { constructor: any }

Type parameters

  • T

Type declaration

  • constructor: function
    • new __type(...args: any[]): T

PropertyValues

PropertyValues<T>: keyof T extends PropertyKey ? Map<keyof T, unknown> : never

Map of changed properties with old values. Takes an optional generic interface corresponding to the declared element properties.

Type parameters

  • T

Variables

Const html

html: (strings: TemplateStringsArray, ...values: unknown[]) => TemplateResult

Interprets a template literal as an HTML template that can efficiently render to and update a container.

Type declaration

    • (strings: TemplateStringsArray, ...values: unknown[]): TemplateResult
    • Parameters

      • strings: TemplateStringsArray
      • Rest ...values: unknown[]

      Returns TemplateResult

Const supportsAdoptingStyleSheets

supportsAdoptingStyleSheets: boolean = (window.ShadowRoot) &&(window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow) &&('adoptedStyleSheets' in Document.prototype) &&('replace' in CSSStyleSheet.prototype)

Whether the current browser supports adoptedStyleSheets.

Const svg

svg: (strings: TemplateStringsArray, ...values: unknown[]) => SVGTemplateResult

Interprets a template literal as an SVG template that can efficiently render to and update a container.

Type declaration

Decorator Functions

Const customElement

  • customElement(tagName: string): (Anonymous function)
  • Class decorator factory that defines the decorated class as a custom element.

    @customElement('my-element')
    class MyElement {
      render() {
        return html``;
      }
    }

    Parameters

    • tagName: string

      The name of the custom element to define.

    Returns (Anonymous function)

eventOptions

  • eventOptions(options: AddEventListenerOptions): any
  • Adds event listener options to a method used as an event listener in a lit-html template.

    example
    class MyElement {
      clicked = false;
    
      render() {
        return html`
          <div @click=${this._onClick}`>
            <button></button>
          </div>
        `;
      }
    
      @eventOptions({capture: true})
      _onClick(e) {
        this.clicked = true;
      }
    }

    Parameters

    Returns any

internalProperty

  • Declares a private or protected property that still triggers updates to the element when it changes.

    Properties declared this way must not be used from HTML or HTML templating systems, they're solely for properties internal to the element. These properties may be renamed by optimization tools like closure compiler.

    Parameters

    Returns (Anonymous function)

property

  • A property decorator which creates a LitElement property which reflects a corresponding attribute value. A PropertyDeclaration may optionally be supplied to configure property features.

    This decorator should only be used for public fields. Private or protected fields should use the internalProperty decorator.

    example
    class MyElement {
      @property({ type: Boolean })
      clicked = false;
    }
    exportdecorateditems

    Parameters

    Returns (Anonymous function)

query

  • query(selector: string, cache?: undefined | false | true): (Anonymous function)
  • A property decorator that converts a class property into a getter that executes a querySelector on the element's renderRoot.

    example
    class MyElement {
      @query('#first')
      first;
    
      render() {
        return html`
          <div id="first"></div>
          <div id="second"></div>
        `;
      }
    }

    Parameters

    Returns (Anonymous function)

queryAll

  • queryAll(selector: string): (Anonymous function)

queryAssignedNodes

  • queryAssignedNodes(slotName?: string, flatten?: boolean, selector?: string): (Anonymous function)
  • A property decorator that converts a class property into a getter that returns the assignedNodes of the given named slot. Note, the type of this property should be annotated as NodeListOf<HTMLElement>.

    Parameters

    • Default value slotName: string = ""

      A string name of the slot.

    • Default value flatten: boolean = false

      A boolean which when true flattens the assigned nodes, meaning any assigned nodes that are slot elements are replaced with their assigned nodes.

    • Default value selector: string = ""

      A string which filters the results to elements that match the given css selector.

      • @example

        class MyElement {
        @queryAssignedNodes('list', true, '.item')
        listItems;
        
        render() {
          return html`
            <slot name="list"></slot>
          `;
        }
        }

    Returns (Anonymous function)

queryAsync

  • queryAsync(selector: string): (Anonymous function)
  • A property decorator that converts a class property into a getter that returns a promise that resolves to the result of a querySelector on the element's renderRoot done after the element's updateComplete promise resolves. When the queried property may change with element state, this decorator can be used instead of requiring users to await the updateComplete before accessing the property.

    example
    class MyElement {
      @queryAsync('#first')
      first;
    
      render() {
        return html`
          <div id="first"></div>
          <div id="second"></div>
        `;
      }
    }
    
    // external usage
    async doSomethingWithFirst() {
     (await aMyElement.first).doSomething();
    }

    Parameters

    Returns (Anonymous function)

Other Functions

Const css

  • Template tag which which can be used with LitElement's [[LitElement.styles | styles]] property to set element styles. For security reasons, only literal string values may be used. To incorporate non-literal values unsafeCSS may be used inside a template string part.

    Parameters

    • strings: TemplateStringsArray
    • Rest ...values: (number | CSSResult)[]

    Returns CSSResult

Const notEqual

  • notEqual(value: unknown, old: unknown): boolean
  • Change function that returns true if value is different from oldValue. This method is used as the default for a property's hasChanged function.

    Parameters

    • value: unknown
    • old: unknown

    Returns boolean

Const unsafeCSS

  • Wrap a value for interpolation in a css tagged template literal.

    This is unsafe because untrusted CSS text can be used to phone home or exfiltrate data to an attacker controlled site. Take care to only use this with trusted input.

    Parameters

    • value: unknown

    Returns CSSResult

Object literals

Const defaultConverter

defaultConverter: object

fromAttribute

  • fromAttribute(value: string | null, type?: unknown): unknown

toAttribute

  • toAttribute(value: unknown, type?: unknown): unknown

Generated using TypeDoc