Декораторы

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

Импорт

import { customElement } from 'lit/decorators.js';

Сигнатура

customElement(tagName): (classOrDescriptor: ClassDescriptor | CustomElementClass) => any

Параметры

tagName

string

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

Подробности

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

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

Импорт

import { eventOptions } from 'lit/decorators.js';

Сигнатура

eventOptions(options): (protoOrDescriptor: ReactiveElement | ClassElement, name?: PropertyKey) => any

Параметры

options

AddEventListenerOptions

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

Декоратор свойства, создающий реактивное свойство, которое отражает соответствующее значение атрибута. При изменении декорированного свойства элемент обновится и выполнит рендеринг. Для настройки функций свойства можно дополнительно передать PropertyDeclaration.

Импорт

import { property } from 'lit/decorators.js';

Сигнатура

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

Параметры

options?

PropertyDeclaration<unknown, unknown>

Подробности

Этот декоратор следует использовать только для открытых полей. Открытые свойства следует считать предназначенными главным образом для установки пользователями элемента — через атрибут или непосредственно через само свойство. Как правило, свойства, изменяемые элементом, должны быть закрытыми или защищёнными полями и использовать декоратор state. Однако иногда коду элемента действительно необходимо устанавливать открытое свойство. Обычно это следует делать только в ответ на взаимодействие с пользователем и отправлять событие, информирующее пользователя; например, при щелчке флажок устанавливает свойство checked и отправляет событие changed. Как правило, открытые свойства не следует изменять, если они не являются примитивами (то есть объектами или массивами). В остальных случаях, когда элементу необходимо управлять состоянием, следует использовать закрытое свойство с декоратором state. При необходимости свойства состояния можно инициализировать через открытые свойства, чтобы обеспечить поддержку сложных взаимодействий.

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

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

Импорт

import { query } from 'lit/decorators.js';

Сигнатура

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

Параметры

selector

string

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

cache?

boolean

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

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

Импорт

import { queryAll } from 'lit/decorators.js';

Сигнатура

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

Параметры

selector

string

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

Декоратор свойства, преобразующий свойство класса в геттер, который возвращает assignedElements заданного slot. Предоставляет декларативный способ использования HTMLSlotElement.assignedElements.

Импорт

import { queryAssignedElements } from 'lit/decorators.js';

Сигнатура

queryAssignedElements(options?): (protoOrDescriptor: ReactiveElement | ClassElement, name?: PropertyKey) => any

Параметры

options?

QueryAssignedElementsOptions

Подробности

Можно передать необязательный объект QueryAssignedElementsOptions. Пример использования:

class MyElement {
  @queryAssignedElements({ slot: 'list' })
  listItems!: Array<HTMLElement>;
  @queryAssignedElements()
  unnamedSlotEls!: Array<HTMLElement>;
  render() {
    return html`
      <slot name="list"></slot>
      <slot></slot>
    `;
  }
}

Обратите внимание: тип этого свойства следует указать как Array<HTMLElement>.

Декоратор свойства, преобразующий свойство класса в геттер, который возвращает assignedNodes заданного slot.

Импорт

import { queryAssignedNodes } from 'lit/decorators.js';

Сигнатура

queryAssignedNodes(options?): TSDecoratorReturnType

Параметры

options?

QueryAssignedNodesOptions

Подробности

Можно передать необязательный объект QueryAssignedNodesOptions. Пример использования:

class MyElement {
  @queryAssignedNodes({slot: 'list', flatten: true})
  listItems!: Array<Node>;
  render() {
    return html`
      <slot name="list"></slot>
    `;
  }
}

Обратите внимание: тип этого свойства следует указать как Array<Node>.

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

Импорт

import { queryAsync } from 'lit/decorators.js';

Сигнатура

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

Параметры

selector

string

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

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

Импорт

import { state } from 'lit/decorators.js';

Сигнатура

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

Параметры

options?

InternalPropertyDeclaration<unknown>

Подробности

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

Импорт

import { InternalPropertyDeclaration } from 'lit/decorators.js';

Параметры декоратора queryAssignedElements. Расширяет набор параметров, передаваемых в HTMLSlotElement.assignedElements.

Импорт

import { QueryAssignedElementsOptions } from 'lit/decorators.js';

Параметры декоратора queryAssignedNodes. Расширяет набор параметров, передаваемых в HTMLSlotElement.assignedNodes.

Импорт

import { QueryAssignedNodesOptions } from 'lit/decorators.js';