Decorators

Class decorator factory that defines the decorated class as a custom element.

Import

import { customElement } from 'lit-element';

Signature

customElement(tagName): (classOrDescriptor: Constructor< HTMLElement> | ClassDescriptor) => any

Parameters

tagName

string

The name of the custom element to define.

Details

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

Adds event listener options to a method used as an event listener in a lit-html template.

Import

import { eventOptions } from 'lit-element';

Signature

eventOptions(options): any

Parameters

options

AddEventListenerOptions

An object that specifies event listener options as accepted by EventTarget#addEventListener and EventTarget#removeEventListener.

Current browsers support the capture, passive, and once options. See: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters

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

Import

import { internalProperty } from 'lit-element';

Signature

internalProperty(options?): (protoOrDescriptor: Object | ClassElement, name?: PropertyKey) => any

Parameters

options?

InternalPropertyDeclaration

Details

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 the Closure Compiler.

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

Import

import { property } from 'lit-element';

Signature

property(options?): (protoOrDescriptor: Object | ClassElement, name?: PropertyKey) => any

Parameters

options?

PropertyDeclaration

Details

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

A property decorator that converts a class property into a getter that executes a querySelector on the element's renderRoot.

Import

import { query } from 'lit-element';

Signature

query(selector, cache?): (protoOrDescriptor: Object | ClassElement, name?: PropertyKey) => any

Parameters

selector

string

A DOMString containing one or more selectors to match.

cache?

boolean

An optional boolean which when true performs the DOM query only once and caches the result.

See: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

A property decorator that converts a class property into a getter that executes a querySelectorAll on the element's renderRoot.

Import

import { queryAll } from 'lit-element';

Signature

queryAll(selector): (protoOrDescriptor: Object | ClassElement, name?: PropertyKey) => any

Parameters

selector

string

A DOMString containing one or more selectors to match.

See: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

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>.

Import

import { queryAssignedNodes } from 'lit-element';

Signature

queryAssignedNodes(slotName, flatten, selector): (protoOrDescriptor: Object | ClassElement, name?: PropertyKey) => any

Parameters

slotName

string

A string name of the slot.

flatten

boolean

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

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>
    `;
  }
}

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.

Import

import { queryAsync } from 'lit-element';

Signature

queryAsync(selector): (protoOrDescriptor: Object | ClassElement, name?: PropertyKey) => any

Parameters

selector

string

A DOMString containing one or more selectors to match.

See: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

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

Import

import { state } from 'lit-element';

Signature

state(options?): (protoOrDescriptor: Object | ClassElement, name?: PropertyKey) => any

Parameters

options?

InternalPropertyDeclaration<unknown>

Details

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 the Closure Compiler.

Import

import { Constructor } from 'lit-element';

Type

Import

import { InternalPropertyDeclaration } from 'lit-element';