Observed Attributes

การประกาศ attribute ที่ต้องการตรวจสอบ

Browser จะติดตามเฉพาะ attribute ที่คุณระบุอย่างชัดเจนเท่านั้น static getter observedAttributes ต้องคืนค่าเป็น array ของชื่อ attribute:

static get observedAttributes() {
  return ['color', 'label'];
}

เฉพาะ attribute ที่อยู่ใน array นี้เท่านั้นที่จะทำให้ attributeChangedCallback ถูกเรียก หาก array ว่างเปล่า หรือไม่มี getter นี้เลย การเปลี่ยนแปลง attribute จะถูกเพิกเฉยโดยไม่มีข้อผิดพลาด

Signature ของ attributeChangedCallback

เมื่อ attribute ที่ถูกตรวจสอบมีการเพิ่ม, เปลี่ยนแปลง หรือลบออก browser จะเรียก:

attributeChangedCallback(name, oldValue, newValue) {
  // name     — ชื่อ attribute เช่น 'color'
  // oldValue — ค่าเดิมเป็น string หรือ null เมื่อตั้งค่าครั้งแรก
  // newValue — ค่าใหม่เป็น string หรือ null เมื่อถูกลบออก
}

พารามิเตอร์ทั้งสามเป็น string (หรือ null) เมื่อตั้งค่า attribute เป็นครั้งแรก oldValue จะเป็น null เมื่อลบ attribute ด้วย removeAttribute แล้ว newValue จะเป็น null

รูปแบบที่สมบูรณ์

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

  connectedCallback() {
    this._render();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    this._render();
  }

  _render() {
    var color = this.getAttribute('color') || '#6366f1';
    var label = this.getAttribute('label') || '?';
    this.innerHTML =
      '<span style="' +
        'display:inline-block;' +
        'padding:.25rem .75rem;' +
        'border-radius:9999px;' +
        'background:' + color + ';' +
        'color:#fff;' +
        'font-weight:600;' +
        'font-family:sans-serif;' +
        'font-size:.875rem' +
      '">' + label + '</span>';
  }
}

customElements.define('attr-color', AttrColor);

เดโมใช้งานจริง

<attr-color color="#4f46e5" label="Indigo"></attr-color><br><attr-color color="#059669" label="Emerald"></attr-color>

ลองแก้ไข color="#4f46e5" เป็นค่าสี CSS อื่น หรือเปลี่ยนข้อความ label ในแผง HTML — badge จะ render ใหม่ทันที

ข้อแลกเปลี่ยน

ตัวเลือก	Benefit	Cost
ใช้ `observedAttributes` + `attributeChangedCallback`	Reactive ต่อการเปลี่ยน attribute จากภายนอกโดยอัตโนมัติ (เช่น จาก framework หรือ dev tools) เหมาะกับ declarative API	ต้อง parse ค่า string เองทุกครั้ง และเสี่ยง render ซ้ำถ้าไม่เช็ค `oldValue`/`newValue` ก่อน
ให้ผู้ใช้เรียก method/setter แทนการตั้ง attribute	ควบคุม type ได้ตรงกว่า (ไม่ใช่ string เสมอ) และไม่ต้อง re-render ทุกครั้งที่ attribute เปลี่ยน	ไม่ reactive ต่อการแก้ attribute ตรงๆ ใน HTML หรือ dev tools ผู้ใช้ต้องรู้ API เฉพาะของ element

ข้อผิดพลาดที่พบบ่อย

ลืมประกาศ static observedAttributes — ถ้าไม่มี getter นี้ หรือคืนค่า array ว่าง attributeChangedCallback จะไม่ถูกเรียกเลยไม่ว่า attribute จะเปลี่ยนกี่ครั้งก็ตาม โดยไม่มี error แจ้งเตือน ทำให้ debug ยาก
ลืมว่า observedAttributes เป็น static — ต้องประกาศเป็น static get observedAttributes() ไม่ใช่ instance method ถ้าใส่ผิดที่ getter จะไม่ถูกเรียกและพฤติกรรมจะเหมือนไม่ได้ประกาศเลย
ไม่เช็คว่า oldValue === newValue ก่อน re-render — บางกรณี browser อาจเรียก attributeChangedCallback แม้ค่าจะไม่เปลี่ยนจริง (เช่นตอน connectedCallback sync ค่าเริ่มต้น) การ render โดยไม่เช็คก่อนจะทำให้เปลือง CPU โดยไม่จำเป็น

💡 ตัวอย่างจากของจริง

GitHub — element <relative-time> ใช้ attributeChangedCallback เพื่อ re-render ข้อความเมื่อ attribute datetime ถูกอัปเดตจาก server-rendered HTML หรือ JavaScript ภายนอก

Shoelace / Web Awesome — design system component library ใช้ observedAttributes อย่างกว้างขวางเพื่อให้ property ของ component (เช่น size, variant, disabled) sync กับ attribute ใน HTML ได้แบบ two-way โดยอัตโนมัติ