Использование декораторов

Декораторы — это специальные выражения, которые могут изменять поведение объявлений классов, методов и полей классов. LitElement предоставляет набор декораторов, сокращающих количество шаблонного кода, который нужно написать при определении компонента.

Например, декораторы @customElement и @property делают определение базового элемента более компактным:

import {LitElement, html, customElement, property} from 'lit-element';

@customElement('my-element')
class MyElement extends LitElement {

 // Declare observed properties
 @property()
 adjective = 'awesome';

 // Define the element's template
 render() {
   return html`<p>your ${this.adjective} template here</p>`;
 }
}

Декоратор @customElement определяет пользовательский элемент, что эквивалентно вызову:

customElements.define('my-element', MyElement);

Декоратор @property объявляет реактивное свойство. Строки:

 @property()
 adjective = 'awesome';

Эквивалентны:

static get properties() {
  return {
    adjective: {}
  };
}

constructor() {
  this.adjective = 'awesome';
}

Включение декораторов

Чтобы использовать декораторы, вам понадобится компилятор, например Babel или компилятор TypeScript.

Предложение о декораторах. Декораторы — это предложение на стадии 2 о добавлении в стандарт ECMAScript, а это значит, что они ещё не окончательно утверждены и пока не реализованы в браузерах. Компиляторы, такие как Babel и TypeScript, поддерживают предлагаемые возможности, например декораторы, компилируя их в стандартный JavaScript, который может выполнять браузер.

Использование декораторов с TypeScript

Чтобы использовать декораторы с TypeScript, включите параметр компилятора experimentalDecorators.

"experimentalDecorators": true,

Включать emitDecoratorMetadata не требуется и не рекомендуется.

Использование декораторов с Babel

Если вы компилируете JavaScript с помощью Babel, включить декораторы можно, добавив следующие плагины:

Чтобы включить плагины, добавьте в конфигурацию Babel код следующего вида:

plugins = [
  '@babel/plugin-proposal-class-properties',
  ['@babel/plugin-proposal-decorators', {decoratorsBeforeExport: true}],
];

Декораторы LitElement

LitElement предоставляет следующие декораторы:

@customElement. Определяет пользовательский элемент.
@eventOptions. Добавляет параметры прослушивателя событий для декларативного прослушивателя событий.
@property и @internalProperty. Определяют свойства.
@query, @queryAll и @queryAsync. Создают геттер свойства, возвращающий определённые элементы из корневого узла рендеринга компонента.
@queryAssignedNodes. Создаёт геттер свойства, возвращающий дочерние элементы, назначенные определённому слоту.

Все декораторы можно напрямую импортировать из модуля lit-element.

import {eventOptions} from 'lit-element';

Редактировать эту страницу

© Google LLC
Licensed under the Creative Commons Attribution 3.0 Unported License.
https://lit.dev/docs/v1/components/decorators/