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
@property decorators make a basic element definition more compact:
@customElement decorator defines a custom element, equivalent to calling:
@property decorator declares a reactive property. The lines:
Are equivalent to:
Enabling decoratorsPermalink to “Enabling decorators”
To use decorators, you need to use a compiler such as Babel or the TypeScript compiler.
To use decorators with TypeScriptPermalink to “To use decorators with TypeScript”
To use decorators with TypeScript, enable the
experimentalDecorators compiler option.
emitDecoratorMetadata is not required and not recommended.
To use decorators with BabelPermalink to “To use decorators with Babel”
To enable the plugins, you'd add code like this to your Babel configuration:
LitElement decoratorsPermalink to “LitElement decorators”
LitElement provides the following decorators:
@customElement. Define a custom element.
@eventOptions. Add event listener options for a declarative event listener.
@internalProperty. Define properties.
@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