Web Components & Shadow DOM

How do you observe attribute changes in a Custom Element?

class MyElement extends HTMLElement {
  static get observedAttributes() {
    return ['size', 'color'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'size') this.style.fontSize = newValue + 'px';
    if (name === 'color') this.style.color = newValue;
  }
}

Using event listeners
Through the observedAttributes static getter
To observe attribute changes in Custom Elements: 1) Define a static observedAttributes getter that returns an array of attribute names to watch, 2) Implement attributeChangedCallback to handle changes to those attributes, 3) The callback receives the attribute name, old value, and new value, 4) Only attributes listed in observedAttributes will trigger the callback. This provides an efficient way to react to attribute changes.
With a MutationObserver
By overriding setAttribute

Next Question (11/20)