Properties

Reflection

A property is 'reflected' to an attribute of the same name if reflect is set to true in the props object:

class MyExample extends Wafer {
  static get props() {
    return {
      count: {
        type: Number,
        initial: 10,
        reflect: true,
      },
    };
  }
}

How the attribute is set from the property value depends on the property type rules.

In this case, when the element is connected to the DOM, it will appear in HTML as:

<my-example count="10"></my-example>

If the count property is then changed, e.g.:

document.querySelector("my-example").count++;

then the HTML will update to:

<my-example count="11"></my-example>