Properties

Introduction

The props static object of a Wafer component defines the reactive properties of the component that will trigger updates to the template when their value changes:

class MyExample extends Wafer {
  static get props() {
    return {
      count: {
        type: Number,
        initial: 10,
        reflect: true,
        targets: [],
        triggers: [],
        attributeName: "my-count",
      },
    };
  }
}

• type is used to indicate the type of the property.
• initial is used to initialise the property value.
• reflect is used to reflect the property value to an attribute with the same name.
• targets is used to indicate which elements should be updated when the property changes.
• triggers is used to indicate which other property updates should be triggered when the property changes.
• attributeName is used to indicate the name of the attribute which can be used to initialise a property and/or be reflected to when a property changes.

All are optional.