Using decorators

Decorators are special expressions that can alter the behavior of class, class method, and class field declarations. LitElement supplies a set of decorators that reduce the amount of boilerplate code you need to write when defining a component.

For example, the @customElement and @property decorators make a basic element definition more compact:

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>`;
 }
}

The @customElement decorator defines a custom element, equivalent to calling:

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

The @property decorator declares a reactive property. The lines:

 @property()
 adjective = 'awesome';

Are equivalent to:

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

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

To use decorators, you need to use a compiler such as Babel or the TypeScript compiler.

To use decorators with TypeScript, enable the experimentalDecorators compiler option.

"experimentalDecorators": true,

Enabling emitDecoratorMetadata is not required and not recommended.

If you're compiling JavaScript with Babel, you can enable decorators by adding the following plugins:

• @babel/plugin-proposal-decorators.
• @babel/plugin-proposal-class-properties

To enable the plugins, you'd add code like this to your Babel configuration:

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

LitElement provides the following decorators:

• @customElement. Define a custom element.
• @eventOptions. Add event listener options for a declarative event listener.
• @property and @internalProperty. Define properties.
• @query, @queryAll, and @queryAsync. Create a property getter that returns specific elements from your component's render root.
• @queryAssignedNodes. Create a property getter that returns the children assigned to a specific slot.

All of the decorators can be imported directly from the lit-element module.

import {eventOptions} from 'lit-element';

Edit this page