0Pricing
HTML Academy · Lesson

Observed Attributes and attributeChangedCallback

React to HTML attribute changes in custom elements.

Reacting to Attribute Changes

HTML elements expose state via attributes. To react when <my-card name="A"> becomes name="B", declare the observed attribute list and implement attributeChangedCallback on the class.

Static observedAttributes

Declare which attributes you care about via a static getter: static get observedAttributes() { return ["name", "open"]; }. Only attributes in this list trigger the callback — others are ignored for performance.

class MyCard extends HTMLElement {
  static get observedAttributes() { return ["name", "open"]; }
}

All lessons in this course

  1. Defining Elements with customElements.define
  2. The connectedCallback and disconnectedCallback
  3. Observed Attributes and attributeChangedCallback
  4. Extending Built-in Elements
← Back to HTML Academy