data-属性仅适合传递简单不可变的初始化参数，因其值全为字符串且不响应后续变更；hidden和class是可靠的状态输出通道；customElements配合attributeChangedCallback可实现data-变更监听；模板热更新需手动缓存并恢复DOM状态。
data-*属性不能当状态源，只适合初始化传参
直接把data-user-id或data-config当作响应式状态用，会立刻踩到类型和时序两个坑：读出来全是字符串，"true"不是true，"42"不是42；而且dataset只映射 HTML 初始值，后续 JS 改了el.setAttribute('data-id', '500')，组件内部不会自动感知。
常见错误现象：
- SSR 渲染的
data-count="10"被客户端 JS 读成字符串，再参与计算导致10 + 1 === "101" - 把
data-filters='{"sort":"date"}'直接JSON.parse()，没加try/catch，解析失败整个组件挂掉 - 在自定义元素
constructor()里就调this.dataset.id，此时 DOM 还没挂载，值为undefined
实操建议：
- 仅用
data-*传递简单、不可变的初始化参数（如data-theme="dark"），并在组件 mount 后立刻转成对应类型存入内部state - 结构化数据一律走
JSON.parse(el.getAttribute('data-config')) || {}，且必须包try/catch - 避免在 SSR 模板里写动态
data-值——服务端和客户端初始值不一致时，框架 diff 会出错
hidden 和 class 是能触发视图更新的可靠输出通道
hidden和class是少数几个浏览器原生支持“属性变更 → 视图重绘”的全局属性。它们不是数据容器，但能可靠地作为状态输出通道。
立即学习“前端免费学习笔记（深入）”；
关键差异：
-
hidden是布尔属性：存在即隐藏，删除即显示；旧版 Safari 需 fallback 到style.display = 'none' -
class支持增删切换：el.classList.toggle('loading')比直接操作className更安全，且能触发 CSS 重绘 -
id和tabindex也能触发行为（焦点流、样式选择器），但语义受限，不适合承载业务状态
实操建议：
- 状态机迁移后，用
el.hidden = true/false同步显隐，别用setAttribute('hidden', '')—— property 和 attribute 容易不同步 - 多状态 UI（如 loading / success / error）用
class控制，配合 CSS 的.state-loading .spinner这类命名空间化规则 - 避免用
title或lang控制显示逻辑——它们只影响辅助技术，不触发重绘
customElements + attributeChangedCallback 是唯一可控的手动同步路径
如果非要用data-传参并响应变更，必须走自定义元素路线。原生div或span加data-，没有任何机制通知 JS “它变了”。
实操建议：
- 在
observedAttributes里声明要监听的data-名，例如['data-status', 'data-mode'] - 在
attributeChangedCallback里做类型转换和副作用触发，比如this.status = this.dataset.status === 'active' - 不要在 callback 里直接操作 DOM 或发请求——先更新内部状态，再由状态驱动视图或副作用
模板热更新时状态丢失的根本原因与手动保状态动作
DOM 树在模板热更新时“丢状态”的根本原因是新旧节点无引用关联，innerHTML或replaceChildren()销毁旧节点导致事件、光标、滚动等全部清零。
实操建议：
- 对每个要保留状态的元素，提前缓存：
input.value、textarea.scrollTop、select.selectedIndex、element.dataset（非 DOM 属性）、getSelection().toString()（仅contenteditable） - 用
replaceChildren()或innerHTML更新后，按 selector 重新querySelector出新节点，再把缓存值赋回去；不能依赖旧引用，因为节点已销毁 - 避免对整个容器粗暴操作——比如给
ul换innerHTML，却想保留某个li内input的焦点；应只更新变动的li子集，用insertAdjacentElement或replaceWith
复杂点在于：你得自己判断哪些状态值得保、哪些可以丢；容易被忽略的是 selection 和 scroll 相关字段，它们不像 value 那样直观，但用户感知极强。
