data-*属性命名必须全小写加连字符，否则dataset无法读取；dataset自动转换驼峰但需严格匹配规则；值恒为字符串，存对象需JSON序列化；禁用作状态管理、样式控制或资源加载。
data-* 属性不是“随便加个属性就行”的快捷键，用错命名或读写方式，轻则 JS 读不到值，重则在 SSR、IE 或某些构建工具里静默失效。
data-* 属性名必须全小写 + 连字符，否则 dataset 读不到
浏览器只认严格小写的 data-user-id，写成 data-UserId 或 data-userId 都不会出现在 dataset 中。这不是大小写敏感的问题，而是解析阶段就被忽略——根本不会进 DOM 的 dataset 对象。
-
data-user-id✅ 正确，el.dataset.userId可读 -
data-userId❌ 不合法，el.dataset.userId返回undefined -
data-User-ID❌ 同样无效，哪怕 HTML 里能渲染出来，JS 也取不到 - 连字符是唯一推荐的分隔符；下划线
data-user_id虽然部分浏览器能转成userId，但 IE 和某些 SSR 框架（如 Next.js 的服务端渲染）会丢弃它
dataset 读写自动转换驼峰，但不能靠“猜”命名
dataset 不是简单删掉短横线，而是把短横线后第一个字母大写。写错名字，JS 就找不到对应字段，也不会报错，只会默默返回 undefined。
-
data-api-url→el.dataset.apiUrl（不是apiUrl也不是apiurl） -
data-xml-ns→el.dataset.xmlNs（xml是保留前缀，ns单独大写） -
data-last-modified-at→el.dataset.lastModifiedAt（每段都转，不只是第一个） - 写入时反向生效：
el.dataset.userId = "1002"会同步更新 HTML 中的data-user-id属性
值永远是字符串，JSON 要手动序列化/解析
dataset 只存字符串，哪怕你赋值 el.dataset.count = 42，实际存进去的是 "42"；同理，存对象必须先 JSON.stringify()，读出来再 JSON.parse()。
立即学习“前端免费学习笔记（深入）”；
- 错误示范：
el.dataset.config = { theme: "dark" }→ 实际存成"[object Object]" - 正确做法：
el.dataset.config = JSON.stringify({ theme: "dark", timeout: 3000 }) - 读取时必须判空再解析：
const config = el.dataset.config ? JSON.parse(el.dataset.config) : {} - 别存敏感信息：所有
data-*都明文暴露在 HTML 源码里，登录态、token、用户手机号都不能放
什么时候不该用 data-*？三个明确红线
data-* 是“静态上下文通道”，不是状态管理器。把它当全局变量或响应式数据用，很快就会失控。
- ❌ 存购物车数量：
data-cart-count—— 数量频繁变动，应走 JS state 或响应式框架，DOM 属性更新会触发 layout thrashing - ❌ 替代 class 控制样式：
data-active="true"代替class="active"—— CSS 无法用[data-active]精准响应伪类（如:hover），且失去语义可访问性 - ❌ 当 lazyload 的真实 src：
data-src必须由 JS 手动赋给src，浏览器自己不识别，也不参与预加载、资源优先级调度
真正适合的场景就三类：埋点 ID（data-track-id）、弹窗目标（data-modal-target）、排序字段（data-sort-by）——都是低频、静态、纯 JS 驱动的上下文信息。
