Back to Lit

01

packages/lit-dev-content/site/tutorials/content/reactivity/01.md

latest846 B
Original Source

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 %}

ts
  @property()
  result = '';
js
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.