data-*属性仅静态存储字符串，不自动记录或同步状态；必须用JavaScript显式读写dataset，且仅适用于轻量、静态、非敏感的DOM局部状态映射。
HTML 的 data-* 属性本身不记录用户交互状态，它只是个“记事本”——你得自己拿笔写、自己翻页看；不配 JavaScript 监听和读写，它就只是静态文本。
为什么直接写 data-is-open="true" 不等于状态已记录
很多人在点击按钮后手动改 data-is-open 值，却没意识到：这个动作本身不会触发任何逻辑，也不会自动同步到其他地方。它只是 DOM 上多了一个字符串，浏览器不解析、不响应、不持久化。
- 页面刷新后，
data-*值还在，但 JS 变量（比如isOpen）已经重置 —— 如果你没在初始化时主动读取它，状态就“断连”了 - 多个组件共用同一份
data-值（比如都读data-sort），但没人负责广播变更，很容易出现视图和数据不一致 - 写了
data-status="loading"，但没配套更新aria-busy或 class，屏幕阅读器和 CSS 都感知不到变化
怎么用 dataset 正确读写交互状态
必须通过 dataset（或 setAttribute/getAttribute）在 JS 中显式操作，且注意命名与类型陷阱。
- HTML 中写
data-is-open="true"，JS 里读要用el.dataset.isOpen（连字符自动转驼峰，首字母小写），不是el.dataset.isopen或el.dataset.IsOpen -
dataset返回值永远是字符串：el.dataset.count === "42"，需要Number(el.dataset.count)或JSON.parse(el.dataset.config)才能转类型，且必须包try/catch - 想动态更新 DOM 属性并触发
attributeChangedCallback（比如自定义元素中），必须用el.setAttribute("data-active", "false")，而不是el.dataset.active = "false"（后者不触发属性变更） - 如果属性名含数字开头（如
data-1st-place）或下划线（data_user_id），dataset无法访问，只能用el.getAttribute("data-1st-place")
哪些状态适合放 data-*，哪些绝对不行
核心判断标准：这个值是否「只供当前节点或直系子元素使用、无需加密、结构简单、可由 DOM 推导」。
立即学习“前端免费学习笔记（深入）”；
- ✅ 合适：折叠面板的开关状态（
data-is-open="true"）、列表项原始 ID（data-item-id="789"）、按钮行为类型（data-action="submit"）、服务端预埋 API 路径（data-api-root="/v2"） - ❌ 绝对不行：用户 token（明文暴露）、手机号（敏感信息）、嵌套对象（如
data-user-info='{"id":1,"name":"张三"}'—— 没人自动帮你JSON.parse，出错静默为undefined）、高频更新的滚动位置（DOM 读写比 JS 变量慢一个数量级） - ⚠️ 容易被忽略：表单控件（
input、select）本身就有浏览器原生状态记忆能力，优先用它们的 value / checked 属性，别画蛇添足塞data-
真正容易被忽略的是：哪怕你把所有交互都写进 data-，它也只是快照，不是活的状态机。一旦 JS 逻辑绕过它（比如直接修改变量、用 innerHTML 替换节点），DOM 和 JS 状态就立刻脱节——这种不一致很难 debug，尤其在 SSR 或微前端场景下。
