Properties

Attributes

Attributes are the name/value pairs that appear on HTML elements, with the value always being a string:

<div id="test">
  <my-example firstname="Ada"></my-example>
</div>

Traditionally attributes and properties on built-in elements have no fixed relationship and the exact behaviour depends on the HTML element. Wafer takes a more consistent approach:

• setting/updating an attribute value will always update the associated property
• setting/updating a property value will only update the associated attribute if the property is reflected
• the string attribute value will be parsed to a property value, and vice versa, according to the defined property type
• the attribute associated with a property has the same name as the property unless overridden by attributeName:

class MyExample extends Wafer() {
  static get props() {
    return {
      surname: {
        type: String,
        reflect: true,
      },
      firstname: {
        type: String,
        reflect: true,
        attributeName: "first-name",
      },
    };
  }
}

Here the surname property is reflected to a surname attribute, while the firstname property is reflected to a first-name attribute.