data-*属性名必须全小写加连字符，否则js读不到；如data-userid无效，仅data-user-id✅可映射为dataset.userid，数字开头需用方括号访问，修改须用setattribute确保dom真实更新。
data-* 属性名写错，JS 就读不到
element.dataset.userId 返回 undefined，但 HTML 里明明写了 data-userId="123"？不是 JS 有问题，是这个属性压根没进 DOM。浏览器只认严格符合规范的 data- 名：前缀后必须全小写 + 连字符，不能有大写字母、下划线、点号或数字开头。
-
data-user-id✅ → JS 中读作element.dataset.userId -
data-api-url✅ →element.dataset.apiUrl -
data-2024-start✅ → 必须用element.dataset["2024Start"]（点语法不支持数字开头） -
data_user_id❌、data-userId❌、data-UserID❌ —— 全部无效，DOM 中不存在该属性
dataset 赋值不更新 DOM，getAttribute 才是“真实快照”
element.dataset.foo = "bar" 看似改了值，其实只是操作内存映射副本；刷新页面后，HTML 源码里的 data-foo 还是旧值。真正要让 getAttribute() 或 CSS 选择器看到新值，必须调用 element.setAttribute("data-foo", "bar")。
- 读取服务端渲染（SSR）或框架初始输出的静态值 → 优先用
getAttribute("data-user-id")，它不依赖 DOM 解析阶段，更可靠 - 属性名含下划线或大写字母 →
dataset完全忽略，只能用getAttribute("data-user_id") - 需要原始字符串（比如带前导空格、JSON 格式未 parse）→
getAttribute直接返回，不加工 -
dataset赋值不触发MutationObserver，监听 attr 变化的逻辑捕获不到
动态拼接 HTML 时，属性值不加引号会直接失效
<img src="logo.png"> 不会被当成 src="logo.png"，浏览器解析时会截断为 src=""，后面 logo.png> 变成纯文本。哪怕 data- 名写对了，HTML 结构本身不合法，JS 读取逻辑也会意外中断。
- 拼接字符串时强制用双引号包裹所有属性值：
<div data-user-id="${id}"> ✅，<code><div data-user-id="${id}"> ❌<li>避免手动拼接，改用模板字面量 + 转义函数：<code>${escapeHtml(title)}，而非${title} - 富文本场景必须走
DOMPurify.sanitize()，不能靠正则过滤——<scr>ipt></scr>这类绕过太常见 -
v-html或innerHTML前若没做净化，data-再规范也救不了 XSS -
必须显式声明，不可省略 -
<meta charset="UTF-8">必须是的第一个子元素，否则后续 script 中dataset读取非 ASCII 值可能失败 - 自定义
data-属性必须全小写+短横线：data-user-id合法，data-userID或data_userid不被标准认可 - 布尔属性如
required应写成required或required="required"，不能写required=""或required=false
lang 和 charset 缺失会让 data-* 的语义链断裂
标签缺 lang 属性，或 <meta charset> 不在 第一个子元素，会导致部分无障碍工具无法正确识别 data- 关联的上下文；更隐蔽的是，某些 WebView 对编码解析异常敏感，dataset 读取中文或特殊字符时可能返回空或乱码。
实际项目里最容易被忽略的，不是怎么写 dataset，而是整个 HTML 文档结构是否经得起解析器检验——data- 是挂在 DOM 上的，DOM 都被浏览器静默修正过了，还谈什么绑定可靠性。
