data-*属性名仅允许小写字母、数字和连字符，非法命名（如驼峰、下划线）导致dataset访问失败；读取需用getattribute()兜底，数字开头须用方括号访问，值恒为字符串。
data-* 属性名只能用小写字母、数字和连字符
浏览器在解析 HTML 时，对 data-* 属性名有硬性校验：只接受 data- 后跟小写字母（a–z）、数字（0–9）或连字符（-）的组合。其他字符——包括大写字母、下划线（_）、点号（.）、冒号（:）、空格、中文、emoji——一律被忽略，且不报错。
常见错误现象：element.dataset.userId 返回 undefined，但你在 HTML 里写了 data-userId="123"；根源不是 JS 写错了，是浏览器压根没把它当合法 data-* 属性解析，DOM 中查不到，DevTools 里也看不到该属性。
-
data-user-id✅ 合法，映射为dataset.userId -
data-api-url✅ 合法，映射为dataset.apiUrl -
data-userId❌ 非法，dataset.userId不存在 -
data_user_id❌ 非法，不触发驼峰映射，dataset.userId仍为undefined -
data-User-ID❌ 非法，大小写混用直接被丢弃
为什么 dataset.userId 读不到，但 getAttribute('data-user-id') 可以
因为 getAttribute() 是原生属性读取接口，不校验命名规范，只要 HTML 字符串里写了，它就尝试返回；而 dataset 是浏览器专为合法 data-* 属性构建的代理对象，只映射通过解析校验的属性。
这意味着：你写了个不合规的 data-userId，getAttribute('data-userId') 可能取到值（取决于浏览器是否保留非法属性），但 dataset.userId 绝对为空——这不是兼容性问题，是设计如此。
- 读取兜底必须用
getAttribute('data-user-id')，拼写必须完全一致（大小写+连字符） - 写入不能依赖
dataset.xxx = 'val'来持久化，它只是缓存副本；真正更新 DOM 必须用setAttribute('data-user-id', 'val') - SSR 或某些构建工具（如 Next.js）会严格过滤非法
data-*，导致服务端渲染后属性消失，客户端读不到
含数字开头的 data-* 属性怎么访问
像 data-2024-report 这类属性，命名本身合法（数字在连字符后允许），但 JS 中无法用点号访问 dataset.2024Report——语法错误。必须用方括号语法。
-
data-2024-report→ 正确访问：dataset["2024Report"]，不是dataset.2024Report -
data-1st-place→ 访问：dataset["1stPlace"] -
data-addval（无连字符）→ 访问：dataset.addval，不是dataset.addVal；连字符是触发驼峰转换的必要条件
连续连字符如 data-foo--bar 会被转成 fooBar，但语义模糊，不推荐使用。
dataset 的驼峰转换不是“删短横线+首字母大写”
它的规则是：把每个连字符（-）后的第一个字母转为大写，其余所有字母强制小写。写错一个大小写，JS 就找不到对应 key，且静默返回 undefined。
-
data-order-status→dataset.orderStatus（不是orderstatus或OrderStatus） -
data-xml-ns→dataset.xmlNs（xml是保留前缀，ns单独大写） -
data-last-modified-at→dataset.lastModifiedAt（每段都转，不只是第一个） -
data-API-Key❌ 非法命名，浏览器标准化为data-api-key，但若手误写成data-Api-Key，部分解析器会直接忽略
最易被忽略的一点：所有值永远是字符串。哪怕你写 data-count="42"，dataset.count 拿到的仍是 "42"；类型转换必须手动，if (el.dataset.active) 对 "false" 也成立。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
