data-*属性名须全小写加连字符，dataset仅识别此格式；值恒为字符串，需手动转换类型；读取用dataset，写入/删除必须用setAttribute/removeAttribute；CSS attr()仅限content且需引号。
data-* 属性命名必须全小写加连字符，否则 dataset 读不到
浏览器对 data-* 属性名有严格解析规则：只认以 data- 开头、后接小写字母和连字符（-）的组合。写成 data-userId、data_user_id 或 data-UserID，DOM 就会静默忽略——element.dataset.userId 返回 undefined，但 getAttribute('data-userId') 可能取到值（因为原生属性不校验，只是 dataset 映射失败）。
常见错误场景：
- 从后端模板或 JSON key 直接拼接属性名，没做 kebab-case 转换
- 用变量名习惯写驼峰，比如
dataOrderId，结果前端查不到 - 属性名含数字开头，如
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 字符串的镜像，而是运行时缓存。
真正可靠的做法：
- 读取用
dataset（方便、自动驼峰） - 写入一律用
el.setAttribute('data-foo', 'bar') - 删除用
el.removeAttribute('data-foo')，比delete el.dataset.foo更稳妥 - 混用
dataset.foo = 'a'和setAttribute('data-foo', 'b')会导致两者值不一致，后续读dataset.foo还是'a'
CSS 里用 attr() 显示 data 值，但 content 必须加引号
CSS 的 attr() 函数能直接把 data-* 值渲染到伪元素里，比如做动态 tooltip 或计数器，但有个硬性限制：content 中的 attr(data-value) 必须包裹在引号内，否则无效。
正确写法：
div::after {
content: "得分：" attr(data-score);
}
错误写法（不加引号，CSS 规则失效）：
div::after {
content: attr(data-score); // ❌ 缺少引号，浏览器忽略整条规则
}
注意：attr() 只支持 content，不能用于其他 CSS 属性（比如 width: attr(data-width) 是非法的）；值也始终是字符串，无法做计算或类型判断。
最常被忽略的一点：data 属性不是状态管理工具。它适合存轻量、静态、与当前元素强绑定的元数据，比如按钮的 target ID、卡片的原始 price、列表项的 sort-key。一旦需要响应式更新、跨组件共享或敏感校验，就该交给 JS 变量、Map 或状态库，而不是往 HTML 里塞越来越多的 data-*。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
