<p>data- 属性名必须全小写加连字符，否则 dataset 无法读取；dataset 值全为字符串，需手动转换类型；修改应使用 setAttribute 而非 dataset 赋值；CSS 可通过属性选择器和 attr() 直接使用 data-。</p>
data-* 属性名必须全小写加连字符，否则 dataset 读不到
浏览器对 data-* 属性名有硬性解析规则：只认以 data- 开头、后接小写字母和连字符（-）的组合。写成 data-userId、data_user_id 或 data-UserID，DOM 就会静默忽略——element.dataset.userId 返回 undefined，但 getAttribute('data-userId') 可能取到值（因为原生属性不校验，只是 dataset 映射失败）。
常见踩坑点：
- 从后端模板或 JSON key 直接拼接属性名，没做 kebab-case 转换（比如把
orderId直接当data-orderId写） - 用变量命名习惯写驼峰，如
dataOrderId，结果 JS 里查不到 - 属性名含数字开头，如
data-2024-id，JS 中无法用点号访问，得用dataset["2024Id"]
dataset 读出来全是字符串，布尔/数字要自己转
dataset 是个只读代理对象，所有值都强制为字符串类型。哪怕你在 HTML 里写 data-is-active="true" 或 data-price="299.99"，JS 里拿到的仍是 "true" 和 "299.99"，不是布尔值或数字。
安全转换建议：
立即学习“前端免费学习笔记（深入）”；
- 布尔值：用
el.dataset.active === 'true'，别信Boolean(el.dataset.active)（空字符串是 false，但"false"会被转成 true） - 数字：显式用
Number(el.dataset.count)或parseFloat()，避免隐式转换陷阱 - JSON 数据：先
JSON.parse(el.dataset.config || 'null')，并加try/catch防止格式错误崩溃
修改 data 属性要用 setAttribute，别只靠 dataset 赋值
element.dataset.foo = 'bar' 看似能改，但它只是更新内存映射，不保证同步到 DOM 属性节点。尤其在调试时想用 el.outerHTML 或 DevTools 查看实时值，经常发现没变——因为 dataset 不是 HTML 字符串的镜像，而是运行时缓存。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
真正可靠的做法：
- 写入一律用
el.setAttribute('data-foo', 'bar') - 删除用
el.removeAttribute('data-foo') - 读取优先走
dataset（语义清晰、驼峰友好），但需注意类型转换
CSS 也能直接用 data-* 做样式控制和内容注入
很多人以为 data-* 只是给 JS 用的，其实 CSS 完全能利用它做条件样式和动态内容展示。
典型用法：
- 属性选择器：
[data-is-vip="true"] { background: gold; } - 存在性判断：
[data-user-id] { cursor: pointer; } - 内容注入：
div::after { content: "分值：" attr(data-value); }
注意：attr() 只能取原始字符串值，不会经过 dataset 的驼峰转换，所以必须和 HTML 中写的属性名完全一致（比如 data-value 对应 attr(data-value)，不能写成 attr(value)）。
最常被忽略的是：data-* 在 CSS 和 JS 中的映射逻辑不一致，一个靠浏览器解析，一个靠 DOMStringMap 规则，混用时容易漏掉连字符或大小写细节。
