data-*属性名必须全小写且仅含字母和连字符，大小写混用或含下划线/数字开头均非法；getAttribute严格逐字节匹配，dataset驼峰映射仅对合法命名生效。
data-* 属性名必须全小写，大小写混用直接失效
浏览器只解析严格符合规范的 data-* 属性：前缀 data- 后必须**全小写字母 + 连字符（-）**，不能含大写字母、下划线或数字开头。写成 data-userId、data-UserID 或 data-user_id，DOM 解析阶段就忽略——不是读不到，是压根没进 dataset，getAttribute("data-userId") 也返回 null。
-
data-user-id✅ 合法，JS 中对应el.dataset.userId -
data-api-url✅ 合法，对应el.dataset.apiUrl -
data-2024-report✅ 合法，但只能用el.dataset["2024Report"]访问（el.dataset.2024Report是语法错误） -
data-userId❌ 非法，el.dataset.userId和getAttribute("data-userId")均返回undefined或null
getAttribute 严格匹配字符串，大小写错一位就失败
getAttribute 不做任何归一化，它按你传入的字符串**逐字节比对属性名**。HTML 里写了 data-user-id="123"，就必须用 getAttribute("data-user-id")；写成 getAttribute("data-User-ID") 或 getAttribute("data_user_id") 全部返回 null。
- 这不是“大小写不敏感”的例外，而是设计使然：HTML 属性本身不区分大小写，但
getAttribute是 DOM API，要求精确匹配 - 常见踩坑：把 Vue/React 的驼峰习惯带进来，写
getAttribute("dataUserId")，结果永远拿不到值 - 调试建议：先用
console.log(el.attributes)看实际 DOM 中存的是什么名字
dataset 的驼峰映射只对合法命名生效，大小写错误不触发转换
dataset 的驼峰规则（如 data-user-id → userId）**仅作用于已通过 HTML 解析器认可的合法 data-* 属性**。一旦属性名不合规（比如含大写），它连 dataset 的键都不会生成，更不会尝试转驼峰。
-
data-addval→el.dataset.addval（不是addVal，连字符后无字母可大写） -
data-add-val→el.dataset.addVal（-v转V） -
data-addValue❌ 非法命名，dataset里完全不存在这个字段 - 没有警告、没有报错，只有静默的
undefined
为什么大小写问题在 SSR 或旧环境里更致命
服务端渲染（如 Next.js）、XML 解析器（如 DOMParser）或某些 WebView（如旧版 Android）对大小写更敏感。它们可能直接拒绝解析含大写 data-* 的 HTML，导致属性丢失、首屏 JS 读不到数据、甚至抛 SyntaxError。
立即学习“前端免费学习笔记（深入）”；
- 工具链（Prettier、ESLint +
eslint-plugin-html）强制小写，不是为了好看，是预防这类跨平台断裂 - 哪怕你在 Chrome 里看着能运行，也不能代表它在 SSR 输出或微信 WebView 里有效
- 最稳妥做法：所有
data-*属性名统一走kebab-case，JS 侧严格按驼峰规则访问，不靠“试试看”
复杂点在于，大小写错误不会报错，只会让值消失——你得同时检查 HTML 源码、DOM 实时结构、JS 访问路径三处是否完全一致，漏掉任何一环都查不出原因。
