自定义元素状态同步需通过 observedattributes 声明 + attributechangedcallback 显式监听，再手动同步至内部 state；dataset 仅为静态快照，非响应式容器；hidden 和 class 才是驱动视图更新的正确出口。
自定义元素状态同步不是靠 dataset 自动更新，而是靠 attributeChangedCallback + observedAttributes 显式监听 + 手动同步到内部 state。想让 HTML 属性变更触发 JS 逻辑，必须走这条路。
attributeChangedCallback 为什么没触发？
它只响应 attribute 级变更（即 HTML 中写的属性），且必须提前声明。常见失效原因：
-
static get observedAttributes()返回的数组里漏写了属性名，比如写成['data-id']，但实际 HTML 是data-user-id→ 应该写['data-user-id'] - 用
this.userId = '123'赋值 property，而不是this.setAttribute('data-user-id', '123')→ 不会进回调 - 首次渲染时的初始属性值不会触发
attributeChangedCallback，oldValue为null，初始化逻辑得放在connectedCallback里兜底 - 在
constructor里调this.dataset.userId→ 此时 DOM 未挂载，永远是undefined
data-* 属性到底能不能存状态？
能存，但只是“静态快照”，不是响应式状态容器。JS 读取后必须立刻转成内部变量，后续所有逻辑基于该变量，而非反复读 dataset。
-
dataset是只读代理：赋值el.dataset.foo = 'bar'不会改 DOM，getAttribute('data-foo')仍返回旧值 - 写入必须用
el.setAttribute('data-foo', 'bar')，删除必须用el.removeAttribute('data-foo') - 驼峰转换规则要记牢：
data-user-id→dataset.userId；data-2024-config→dataset["2024Config"]（点号语法报错） - 存 JSON 必须
JSON.stringify()写入，读取必须try/catch包裹JSON.parse()，否则坏数据直接崩掉整个组件
hidden 和 class 才是真正驱动视图的“状态出口”
浏览器原生支持它们变更 → 视图重绘，所以状态机输出必须落在这两个属性上，而不是靠 data- 控制样式。
-
el.hidden = true/false比el.setAttribute('hidden', '')更安全，避免 property 与 attribute 不同步 - 多态状态（loading / error / success）统一用
el.classList.toggle('state-loading')，配合 CSS 的.state-loading .spinner规则 - 别用
title、lang或data-控制显隐或样式 —— 它们不触发重绘，只影响辅助技术或选择器匹配 -
id和tabindex可用于焦点流或样式锚点，但语义受限，不适合承载业务状态
真正难的不是写 attributeChangedCallback，而是判断哪些状态该由属性驱动、哪些该由 JS 变量管理。一旦状态需要跨组件通信或持久化，就该立刻切到 useState 或 store，别硬塞进 data- 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
