Watch

Watch Changes

Alongside defining reactive properties in the properties() map, you can define a watcher for every property by implementing a watch() map in the same manner.

export class MyElement extends BaseElement {
    properties() {
        return {
            property: 'I am public & reactive'
        };
    }

    watch() {
        return {
            property: (newValue, oldValue) => {
                console.log('property changed', {newValue, oldValue});
            }
        };
    }
}

Whenever a property is changed (either from within the element or from outside) it will trigger the callback defined in the watch() map if present. The callback will be invoked with the old value and the new value as parameters.

element-js compares values by stringifying them rather than by reference and will only trigger update/render cycles if the value actually changed.

array or object data will not trigger changes if nested elements/keys are changed. Also methods like push() and shift() won't work.

Non-mutable operations like map() and shift() and the spread operator will however change the value and trigger an update cycle.

export class MyElement extends BaseElement {
    properties() {
        return {
            items: ['one', 'two']
        };
    }

    count() {
        this.items = [...this.items, 'three'];
    }
}

The spread operator works for objects and arrays.

If you want to make sure that an update will be triggered you can always request it manually by calling the requestUpdate() method.