You're viewing docs for an older version of Lit. Click here for the latest version.

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:

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

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

Are equivalent to:

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

The decorators proposal. Decorators are a stage 2 proposal for addition to the ECMAScript standard, which means they're neither finalized nor implemented in browsers yet. Compilers like Babel and TypeScript provide support for proposed features like decorators by compiling them into standard JavaScript a browser can run.

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

Enabling emitDecoratorMetadata is not required and not recommended.

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

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

LitElement provides the following decorators:

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