attributeChangedCallback是唯一能响应属性变更的原生机制，仅适用于继承HTMLElement的自定义元素，需配合observedAttributes声明监听列表，且仅支持字符串值监听。
attributeChangedCallback 是唯一能响应属性变更的原生机制
原生 HTML 元素（如 div、input）对 data- 或自定义属性的修改完全无感知——改了 setAttribute('status', 'loading')，不会触发任何回调。只有继承 HTMLElement 的自定义元素，配合 observedAttributes 静态 getter 和 attributeChangedCallback，才能真正监听属性变更。
必须显式声明要监听的属性名，且仅限字符串值（布尔/数字需手动转换）：
class SyncToggle extends HTMLElement {
static get observedAttributes() {
return ['disabled', 'data-sync-key'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'disabled') {
this._updateUI(); // 比如同步子 input 的 disabled 状态
} else if (name === 'data-sync-key') {
this._bindStorage(newValue); // 绑定 localStorage key
}
}
}- 属性名必须全小写，
dataSyncKey不会匹配data-sync-key -
oldValue和newValue恒为字符串，即使设的是true，读出来也是"true" - 首次初始化时（HTML 解析阶段），该回调也会触发，需判断
oldValue === null来区分初始值和后续变更
data-* 属性不能直接驱动状态，但可作为初始化入口
data- 属性在自定义元素中只适合做初始化参数，不是运行时状态源。比如 <sync-toggle data-sync-key="theme"> 可用于启动时读取 localStorage.getItem('theme')，但后续主题切换不能靠反复改 setAttribute('data-sync-key', 'lang') 来触发逻辑。
常见错误是把 dataset 当响应式变量用：
立即学习“前端免费学习笔记（深入）”；
- 在
connectedCallback里读this.dataset.syncKey是安全的，但之后再改这个属性，attributeChangedCallback不会自动更新内部状态 - 不要在
attributeChangedCallback里直接调用this.dataset.xxx—— 此时 DOM 还未完成同步，可能读到旧值 - 结构化数据（如 JSON 字符串）必须用
JSON.parse(this.getAttribute('data-config')) || {}，且包try/catch，因为dataset.config会把连字符转驼峰，导致键名错位
同步逻辑必须由 JS 主动控制，而非依赖属性值本身
自定义元素的属性只是“信号”，不是“状态”。例如一个 <sync-input data-sync-id="username">，它不自动读写 localStorage，也不广播变更——这些都得你写：
- 监听
input事件，拿到新值后调用localStorage.setItem(this.dataset.syncId, value) - 用
BroadcastChannel广播变更，同时监听其他窗口消息并更新自身 UI - 在
attributeChangedCallback中只做轻量映射：比如把disabled属性变化同步到内部<input>的disabledproperty - 避免在回调里执行异步操作（如
fetch），否则竞态难控；复杂逻辑应封装成独立方法，由事件或定时器触发
hidden 和 class 才是可靠的状态输出通道
自定义元素内部状态变更后，应优先通过 this.hidden = true 或 this.classList.toggle('loading') 输出，而不是设置 data-state="loading"。因为：
-
hidden是布尔属性，存在即隐藏，删除即显示，浏览器原生支持视图重绘 -
classList改变会触发 CSS 重排，且比操作className更安全（避免覆盖其他 class） -
data-属性变更既不触发重绘，也不被 CSS 选择器实时匹配（[data-state="loading"]不会自动生效，除非你手动force reflow） - 多状态场景（如
idle/loading/error）必须用 class 控制，用data-存状态会导致 CSS 规则冗余且难以维护
真正复杂的同步逻辑，永远发生在 JS 层；HTML 属性只是边界接口，不是状态容器。最容易被忽略的是：自定义元素创建后，attributeChangedCallback 不会回溯已存在的属性——如果服务端渲染时写了 disabled，但没在 connectedCallback 里补初始化，UI 就会和实际状态脱节。
