Декораторы

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

Импорт

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>. Используйте декоратор queryAssignedElements, чтобы получить только элементы и при необходимости отфильтровать их список с помощью CSS-селектора.

Декоратор свойства, преобразующий свойство класса в геттер, возвращающий промис, который разрешается результатом 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';