data-*属性必须用kebab-case格式，JS中通过dataset.xxxYyy访问；仅支持字符串，复杂数据需JSON.stringify后setAttribute；CSS选择器需加引号；SSR时须HTML编码避免解析错误。
data-* 属性必须带连字符，不能写成 camelCase
浏览器会把 data-userid 当作合法自定义属性，但 data-userId 或 data-userID 在 HTML 解析时虽不报错，用 JavaScript 读取时会变成 dataset.userid（全小写+去连字符），根本拿不到原意。这是最常被忽略的映射规则。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- HTML 中一律用
data-xxx-yyy格式，比如data-api-endpoint、data-item-index - JS 中通过
element.dataset.xxxYyy访问，注意首字母小写、后续单词首字母大写（驼峰转换由浏览器自动完成） - 避免用数字开头，如
data-1st-load无效；也不能用纯数字，data-123会被忽略
dataset 读写有局限：只支持字符串，且不触发 DOM 更新监听
element.dataset.foo = 'bar' 看似能写，但实际只是同步更新了 DOM 属性值，不会触发 MutationObserver，也不影响 CSS 的 [data-foo] 选择器实时匹配（除非你手动 setAttribute）。更关键的是，它强制转字符串——传 true、null、对象都会变成 "true"、"null"、"[object Object]"。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只用
dataset做简单配置传递，比如开关标记data-enabled="true" - 需要存复杂结构？改用
element.setAttribute('data-config', JSON.stringify(obj)) - 要监听变化？别依赖
dataset赋值，改用setAttribute+MutationObserver
CSS 里用 [data-*] 选中时，值必须加引号才可靠
写 [data-status=active] 看似简洁，但一旦 data-status 的值含空格、点号或连字符（比如 data-status="in-progress"），这个选择器就完全失效。CSS 规范要求属性值含特殊字符时必须加引号。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有
[data-*]选择器统一写成[data-status="active"]或[data-role="menu-item"] - 避免用
[data-id]这种无值判断——它匹配任意含该属性的元素，包括data-id=""，容易误伤 - 想排除空值？用
[data-id]:not([data-id=""])
服务端渲染（SSR）时 data-* 不是状态容器
很多人把 data-* 当“前端状态暂存区”，比如后端吐出 <div data-initial-state='{...}'>，再让 JS 解析。这在 SSR 场景下极危险：如果字符串含单双引号、未转义 Unicode 或换行，直接 JSON.parse(el.dataset.initialState) 就会报 SyntaxError。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- SSR 输出 data 属性前，必须对 JSON 字符串做 HTML 实体编码，比如用
JSON.stringify()后替换"→" - 更稳妥的做法：把初始数据放
<script type="application/json" id="initial-data">里，和 data-* 分离 - 永远不要信任
dataset里的内容可直接执行或解析——先typeof === 'string'再校验格式
data-* 的真正价值不在“藏数据”，而在建立 HTML 元素和行为之间的语义桥梁。写错格式、滥用类型、忽略 SSR 上下文，比“没用上”更麻烦。
