LitElement

class LitElementИсточник

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

Импорт

import { LitElement } from 'lit-element';

Подробности

Чтобы определить компонент, создайте подкласс LitElement и реализуйте метод render, который задаёт шаблон компонента. Определяйте свойства с помощью свойства properties или декоратора property.

Методы и свойства

new LitElement(): LitElement

readonly renderRoot: Element | DocumentFragmentИсточник

Узел или ShadowRoot, в который должен выполняться рендеринг DOM элемента. По умолчанию используется открытый shadowRoot.

static finalized: booleanИсточник

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

Подробности

Обратите внимание, что имя этого свойства представляет собой строку, чтобы не нарушать оптимизации компилятора Closure JS. Дополнительные сведения см. в файле updating-element.ts.

static properties: PropertyDeclarationsИсточник

Предоставляемый пользователем объект, сопоставляющий имена свойств с объектами PropertyDeclaration, содержащими параметры настройки свойств.

static render: (result: unknown, container: Element | DocumentFragment, options: ShadyRenderOptions) => voidИсточник

Ссылка на метод базовой библиотеки, используемый для рендеринга DOM элемента. По умолчанию указывает на метод render из модуля shady-render библиотеки lit-html.

Подробности

Большинству пользователей никогда не потребуется обращаться к этому свойству.

Не следует путать это свойство с методом экземпляра render, который нужно переопределить, чтобы задать шаблон элемента.

Опытные пользователи, создающие новый базовый класс на основе LitElement, могут переопределить это свойство, указав пользовательский метод рендеринга с сигнатурой, соответствующей методу render из shady-render.

static shadowRootOptions: ShadowRootInitИсточник

static styles?: CSSResultGroupИсточник

Массив стилей, применяемых к элементу. Стили следует определять с помощью теговой функции css или создаваемых таблиц стилей.

hasUpdated: numberИсточник

updateComplete: Promise<unknown>Источник

Возвращает Promise, который разрешается после завершения обновления элемента. Значение Promise — логическое значение true, если элемент завершил обновление, не вызвав нового обновления. Результат Promise — false, если свойство было задано внутри updated(). Если Promise отклонён, во время обновления было выброшено исключение.

Подробности

Чтобы дождаться завершения дополнительных асинхронных операций, переопределите метод _getUpdateComplete. Например, иногда полезно дождаться отображения элемента перед разрешением этого Promise. Для этого сначала дождитесь super._getUpdateComplete(), а затем любого последующего состояния.

static observedAttributes: Array<string>Источник

Возвращает список атрибутов, соответствующих зарегистрированным свойствам.

adoptStyles(): voidИсточник

Применяет стили к shadowRoot элемента, используя свойство styles. Если доступен shadowRoot.adoptedStyleSheets, стили применяются с его помощью; в противном случае используется запасной вариант. Если Shadow DOM полифиллен, ShadyCSS ограничивает область действия стилей и добавляет их в документ. Если Shadow DOM доступен, но adoptedStyleSheets недоступен, стили добавляются в конец shadowRoot, чтобы имитировать поведение, заданное спецификацией.

attributeChangedCallback(name, old, value): voidИсточник

Синхронизирует значения свойств при изменении атрибутов.

Параметры

name: string
old: null | string
value: null | string

connectedCallback(): voidИсточник

createRenderRoot(): Element | ShadowRootИсточник

Возвращает узел, в который должен выполняться рендеринг элемента; по умолчанию создаёт и возвращает открытый shadowRoot. Реализуйте этот метод, чтобы настроить место рендеринга DOM элемента. Например, чтобы выполнять рендеринг в дочерние узлы элемента, верните this.

disconnectedCallback(): voidИсточник

Позволяет выполнять super.disconnectedCallback() в расширениях, сохраняя возможность в будущем добавлять обратно совместимые функции, связанные с отключением элемента.

enableUpdating(): voidИсточник

firstUpdated(_changedProperties): voidИсточник

Вызывается при первом обновлении элемента. Реализуйте этот метод, чтобы выполнять разовые действия с элементом после обновления.

Параметры

_changedProperties: Map<string | number | symbol, unknown>
Карта изменённых свойств с их старыми значениями

Подробности

Изменение свойств внутри этого метода вызовет повторное обновление элемента после завершения текущего цикла обновления.

getUpdateComplete(): Promise<unknown>Источник

Метод для переопределения Promise updateComplete.

Подробности

Непосредственно переопределять геттер updateComplete небезопасно из-за ограничения TypeScript: при целевом языке ES5 невозможно вызвать геттер суперкласса (например, super.updateComplete.then(...)) (https://github.com/microsoft/TypeScript/issues/338). Вместо этого следует переопределить данный метод. Например:

class MyElement extends LitElement { async getUpdateComplete() { await super.getUpdateComplete(); await this._myChild.updateComplete; } }

initialize(): voidИсточник

Выполняет инициализацию элемента. По умолчанию вызывает createRenderRoot для создания узла renderRoot элемента и сохраняет все предварительно заданные значения зарегистрированных свойств.

performUpdate(): void | Promise<unknown>Источник

Выполняет обновление элемента. Обратите внимание: если во время обновления выброшено исключение, firstUpdated и updated вызваны не будут.

Подробности

Этот метод можно переопределить, чтобы изменить время выполнения обновлений. Если метод переопределён, необходимо вызвать super.performUpdate().

Например, чтобы запланировать обновления непосредственно перед следующим кадром:

protected async performUpdate(): Promise<unknown> {
  await new Promise((resolve) => requestAnimationFrame(() => resolve()));
  super.performUpdate();
}

render(): unknownИсточник

Вызывается при каждом обновлении для выполнения задач рендеринга. Этот метод может возвращать любое значение, допускающее рендеринг с помощью NodePart из lit-html, — обычно TemplateResult. Изменение свойств внутри этого метода не вызовет обновление элемента.

requestUpdate(name?, oldValue?): Promise<unknown>Источник

Запрашивает обновление, которое выполняется асинхронно. Этот метод следует вызывать, когда состояние элемента требует обновления, но изменение свойства его не вызвало. В этом случае не передавайте аргументы. Метод также следует вызывать при ручной реализации сеттера свойства. В этом случае передайте name свойства и oldValue, чтобы применить все настроенные параметры свойства. Возвращает Promise updateComplete, который разрешается после завершения обновления.

Параметры

name?: PropertyKey
(необязательно) имя свойства, инициирующего запрос
oldValue?: unknown
(необязательно) старое значение свойства, инициирующего запрос

requestUpdateInternal(name?, oldValue?, options?): voidИсточник

Эта защищённая версия requestUpdate не обращается к Promise updateComplete и не возвращает его. Этот Promise можно переопределить, поэтому он недоступен для свободного использования.

Параметры

name?: PropertyKey
oldValue?: unknown
options?: PropertyDeclaration<unknown, unknown>

shouldUpdate(_changedProperties): booleanИсточник

Определяет, нужно ли вызывать update при запросе обновления элемента. По умолчанию этот метод всегда возвращает true, но его можно настроить, чтобы управлять условиями обновления.

Параметры

_changedProperties: Map<string | number | symbol, unknown>
Карта изменённых свойств с их старыми значениями

update(changedProperties): voidИсточник

Обновляет элемент. Этот метод отражает значения свойств в атрибутах и вызывает render для рендеринга DOM с помощью lit-html. Изменение свойств внутри этого метода не вызовет новое обновление.

Параметры

changedProperties: Map<string | number | symbol, unknown>

updated(_changedProperties): voidИсточник

Вызывается при каждом обновлении элемента. Реализуйте этот метод, чтобы выполнять действия после обновления с помощью DOM API, например переводить фокус на элемент.

Параметры

_changedProperties: Map<string | number | symbol, unknown>
Карта изменённых свойств с их старыми значениями

Подробности

static createProperty(name, options): voidИсточник

Создаёт аксессор свойства в прототипе элемента, если он ещё не существует, и сохраняет для этого свойства PropertyDeclaration с указанными параметрами. Сеттер свойства вызывает параметр свойства hasChanged или использует строгое сравнение идентичности, чтобы определить, следует ли запросить обновление.

Параметры

name: PropertyKey
options: PropertyDeclaration<unknown, unknown>

Подробности

Этот метод можно переопределить для настройки свойств; однако при этом важно вызвать super.createProperty, чтобы свойство было настроено правильно. Внутри этого метода вызывается getPropertyDescriptor для получения устанавливаемого дескриптора. Чтобы настроить поведение свойств при чтении или записи, переопределите getPropertyDescriptor. Чтобы настроить параметры свойства, реализуйте createProperty следующим образом:

static createProperty(name, options) { options = Object.assign(options, {myOption: true}); super.createProperty(name, options); }

static finalize(): voidИсточник

Создаёт аксессоры для зарегистрированных свойств и гарантирует, что все суперклассы также будут окончательно настроены.

static getPropertyDescriptor(name, key, options): {configurable: boolean, enumerable: boolean, get: () => any, set: (value: unknown) => void}Источник

Возвращает дескриптор свойства, который следует определить для указанного именованного свойства. Если дескриптор не возвращён, свойство не станет аксессором. Например:

Параметры

name: PropertyKey
key: string | symbol
options: PropertyDeclaration<unknown, unknown>

Подробности

class MyElement extends LitElement { static getPropertyDescriptor(name, key, options) { const defaultDescriptor = super.getPropertyDescriptor(name, key, options); const setter = defaultDescriptor.set; return { get: defaultDescriptor.get, set(value) { setter.call(this, value); // custom action. }, configurable: true, enumerable: true } } }

static getPropertyOptions(name): PropertyDeclaration<unknown, unknown>Источник

Возвращает параметры, связанные с указанным свойством. Эти параметры задаются с помощью PropertyDeclaration в объекте properties или декоратора @property и регистрируются в createProperty(...).

Параметры

name: PropertyKey

Подробности

Обратите внимание: этот метод следует считать «окончательным» и не переопределять. Чтобы настроить параметры конкретного свойства, переопределите createProperty.

static getStyles(): undefined | CSSResultGroupИсточник

Возвращает массив стилей, применяемых к элементу. Переопределите этот метод для интеграции с системой управления стилями.

© Google LLC
Licensed under the Creative Commons Attribution 3.0 Unported License.
https://lit.dev/docs/v1/api/lit-element/LitElement/