@reactiveProp

This is a decorator that allows you to define a reactive attribute on the element.

It takes an options object with the type of the attribute and whether it should be reflected to the attribute.

Once an update is made to the field, it will inform the component that an update occured.

In order to use this decorator, you need to declare the field with the type that you want to use, this defines how to read and write the attribute.

The accepted types are String, Number, Boolean, Object, and Array.

The reflect option is used to reflect the attribute to the DOM.

It is possible to define the attribute name if it is different from the field name using the attribute option.

It is also possible to define a default value for the attribute using the defaultValue option.

It plays well in combination with the @onUpdated decorator.

@reactiveProp({ type: Number, reflect: true, defaultValue: 5 }) declare count: number;

If in your markup you want to use a different attribute name, you can use the attribute option.

@reactiveProp({ type: Number, attribute: 'my-count', reflect: true, defaultValue: 5 }) declare count: number;