Lifecycle

changed

The changed callback is called during the update cycle when all pending property value changes have been processed, but before the property targets have been updated. The argument passed to the callback is a Map of property names to their old values - the new values can be accessed directly:

class MyExample extends Wafer {
static get template() {
return '<span id="firstname"></span>';
}

static get props() {
return {
firstname: {
type: String,
targets: [
{
selector: "$#firstname",
text: true,
},
],
},
};
}

changed(changedProps) {
console.log({
old: changedProps.get("firstname"),
new: this.firstname,
});
}
}

customElements.define(`my-example`, MyExample);
const el = new MyExample();
el.firstname = "Ada";

document.body.appendChild(el);
// initial render occurs automatically on `connectedCallback`
// logs: { old: undefined, new 'Ada' }
el.firstname = "Alan";
// logs: { old: 'Ada', new 'Alan' }

Changes made to properties within the changed callback will not trigger another update cycle, but the new values will trigger another call to changed and the final values will be those used in the current update when there are no pending changes left to process.

An array of property names can optionally be returned from the changed callback to indicate that those properties should not have their targets updated:

  ...

changed(changedProps) {
/**
* The targets of the `firstname` property
* will not be processed in this case
*/

return ['firstname']
}

...
Next: updated Previous: requestUpdate