Lifecycle

updated

The updated callback is called once all the targets of all the properties that have changed in the current update cycle 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,
          },
        ],
      },
    };
  }

  updated(updatedProps) {
    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 updated callback will trigger another update cycle.

If a promise is returned from the updated callback then it will be awaited. The main consequence of this is that the updateDone promise will not resolve until the promise returned from updated has also resolved. This is useful in the server context where all updates need to be processed before the response is sent to the client.