Декораторы

Фабрика декораторов классов, которая определяет декорированный класс как пользовательский элемент.

Импорт

import { customElement } from 'lit-element';

Сигнатура

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

Параметры

tagName

string

Имя пользовательского элемента, который нужно определить.

Подробности

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

Добавляет параметры прослушивателя событий к методу, используемому в качестве прослушивателя событий в шаблоне lit-html.

Импорт

import { eventOptions } from 'lit-element';

Сигнатура

eventOptions(options): any

Параметры

options

AddEventListenerOptions

Объект, задающий параметры прослушивателя событий, принимаемые EventTarget#addEventListener и EventTarget#removeEventListener.

В настоящее время браузеры поддерживают параметры capture, passive и once. См.: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters

Объявляет свойство private или protected, изменение которого по-прежнему вызывает обновление элемента.

Импорт

import { internalProperty } from 'lit-element';

Сигнатура

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

Параметры

options?

InternalPropertyDeclaration

Подробности

Свойства, объявленные таким образом, нельзя использовать из HTML или систем шаблонов HTML: они предназначены исключительно для внутренних свойств элемента. Инструменты оптимизации, такие как Closure Compiler, могут переименовывать эти свойства.

Декоратор свойства, создающий свойство LitElement, которое отражает соответствующее значение атрибута. Для настройки возможностей свойства можно указать PropertyDeclaration.

Импорт

import { property } from 'lit-element';

Сигнатура

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

Параметры

options?

PropertyDeclaration

Подробности

Этот декоратор следует использовать только для общедоступных полей. Для полей private или protected следует использовать декоратор internalProperty.

Декоратор свойства, преобразующий свойство класса в геттер, который выполняет querySelector для renderRoot элемента.

Импорт

import { query } from 'lit-element';

Сигнатура

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

Параметры

selector

string

Строка DOMString, содержащая один или несколько селекторов для поиска совпадений.

cache?

boolean

Необязательное логическое значение, которое при значении true выполняет запрос DOM только один раз и кэширует результат.

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

Декоратор свойства, преобразующий свойство класса в геттер, который выполняет querySelectorAll для renderRoot элемента.

Импорт

import { queryAll } from 'lit-element';

Сигнатура

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

Параметры

selector

string

Строка DOMString, содержащая один или несколько селекторов для поиска совпадений.

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

Декоратор свойства, преобразующий свойство класса в геттер, который возвращает assignedNodes заданного именованного slot. Обратите внимание: тип этого свойства следует аннотировать как NodeListOf<HTMLElement>.

Импорт

import { queryAssignedNodes } from 'lit-element';

Сигнатура

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

Параметры

slotName

string

Строковое имя слота.

flatten

boolean

Логическое значение: если оно равно true, назначенные узлы уплощаются, то есть любые назначенные узлы, являющиеся элементами slot, заменяются назначенными им узлами.

selector

string

Строка, фильтрующая результаты: остаются только элементы, соответствующие заданному селектору CSS.

• @example

class MyElement {
  @queryAssignedNodes('list', true, '.item')
  listItems;

  render() {
    return html`
      <slot name="list"></slot>
    `;
  }
}

Декоратор свойства, преобразующий свойство класса в геттер, который возвращает промис. Промис разрешается результатом querySelector для renderRoot элемента после разрешения промиса updateComplete элемента. Если запрашиваемое свойство может меняться в зависимости от состояния элемента, этот декоратор можно использовать вместо того, чтобы требовать от пользователей ожидать updateComplete перед обращением к свойству.

Импорт

import { queryAsync } from 'lit-element';

Сигнатура

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

Параметры

selector

string

Строка DOMString, содержащая один или несколько селекторов для поиска совпадений.

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

Объявляет свойство private или protected, изменение которого по-прежнему вызывает обновление элемента.

Импорт

import { state } from 'lit-element';

Сигнатура

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

Параметры

options?

InternalPropertyDeclaration<unknown>

Подробности

Свойства, объявленные таким образом, нельзя использовать из HTML или систем шаблонов HTML: они предназначены исключительно для внутренних свойств элемента. Инструменты оптимизации, такие как Closure Compiler, могут переименовывать эти свойства.

Импорт

import { Constructor } from 'lit-element';

Тип

Импорт

import { InternalPropertyDeclaration } from 'lit-element';