01

A reactive property is a property that triggers the component to update whenever the property's value changes.

The sample on the right includes a property, result, but it isn't reactive. Pressing the button changes the property value, but the component never changes its display.

To make it a reactive property, add the following code to the beginning of the class.

{% switchable-sample %}

  @property()
  result = '';

export class MyElement extends LitElement {

  static properties = {
    result: {},
  };

{% endswitchable-sample %}

Properties make up a big part of a web component's public API. Reactive properties are primarily used to render changes to the element's template efficiently and without any boilerplate.

For more information, see Reactive properties.