Lifecycle

requestUpdate

To request a manual update to the component use requestUpdate. This will trigger the update cycle at the end of the current task, and by default will update the targets for every property. To only the update the targets for specific properties, an array of property names can be passed:

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

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

customElements.define(`my-example`, MyExample);

const el = new MyExample();

document.body.appendChild(el);
// initial render occurs automatically on `connectedCallback`

el.requestUpdate();
// all targets for all properties will be updated

el.requestUpdate(["greeting"]);
// only the targets of the `greeting` prop will be updated