Lifecycle

attributeChangedCallback

The attributeChangedCallback is called when one of the observed attributes, returned by a static getter method called observedAttributes, is changed.

In Wafer components all properties are automatically observed as attributes, either using the property name itself or the name defined as the attributeName in the props declaration:

import Wafer from "@lamplightdev/wafer";

class MyExample extends Wafer() {
  static get props() {
    return {
      surname: {
        type: String,
      },
      firstname: {
        type: String.
        attributeName: 'first-name'
      },
    }
  }
}
customElements.define("my-element", MyExample);

const el = document.createElement('my-element');

el.setAttribute('surname', 'Lovelace');
// updates the `surname` prop
// triggers update cycle

el.setAttribute('firstname', 'Ada');
// does *not* update the `firstname` prop
// does *not* trigger update cycle

el.setAttribute('first-name', 'Ada');
// updates the `firstname` prop
// triggers update cycle

Updating any attribute with a matching prop name (or a defined attributeName) always updates the prop value and triggers an update cycle.