Properties

Targets

The targets of a property describe how the component is updated when the property changes.

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

  static get props() {
    return {
      count: {
        type: Number,
        initial: 10,
        reflect: true,
        targets: [{
          selector: '$#count',

          use: (value) => {
            return value;
          },

          text: true,

          property: 'count',

          attribute: 'count',

          dom: (el, value, self, isUpdate) {
            /* ... */
          }
        }]
      },
    };
  }
}

All 'targets' must have a selector property which must be a valid CSS3 selector that will be used to match element(s) in the component's DOM, and one or more of the following properties that indicate how to update the element(s) matched with the selector:

• text - update the textContent of the matched element(s)
• property - update a property on the matched element(s)
• attribute - update an attribute on the matched element(s)
• dom - perform a DOM operation on the matched element(s)

By default the value of the property is used when updating the matched element(s). The optional use function can be used to return a computed value that should be used instead.