data-*属性不能绑定，仅为静态元数据容器；正确用法是HTML中手写或JS用dataset.id="value"动态设置，值恒为字符串，须手动类型转换，不可替代id属性。
data-* 属性不能“绑定”，只能静态写或用 JS 动态设置
HTML 的 data-* 属性是纯静态的元数据容器，浏览器不会自动解析、响应或“绑定”它——它不参与 DOM 更新逻辑，也不像 Vue 的 v-bind:data-id 或 React 的 data-id={id} 那样有响应式机制。所谓“绑定自定义 ID”，实际只有两种可靠做法：手写 HTML 时直接写死，或用 JS 在运行时赋值。
怎么给元素加 data-id 并确保值正确
常见错误是把 data-id 当成可双向同步的属性，结果 JS 改了但没生效，或服务端渲染和客户端不一致。关键点在于：值必须明确、唯一、可预测。
- 服务端渲染（如 PHP/SSR）时，直接在模板里写：
<div data-id="user_123"></div> - 客户端动态创建时，用
element.dataset.id = "user_456"（注意：这里去掉data-前缀，且自动转为 camelCase） - 避免用
element.setAttribute('data-id', value)处理含空格或特殊字符的值，dataset会自动做基础转义 - 如果 ID 来自用户输入，务必先校验/过滤，
data-id不是 XSS 免疫区
dataset.id 和 getAttribute('data-id') 有什么区别
两者读取结果通常一样，但行为差异会影响调试和兼容性：
-
element.dataset.id只读取合法命名的data-属性（比如data-user-id→dataset.userId），不支持大写字母或特殊符号 -
element.getAttribute('data-id')是原始字符串读取，大小写敏感，能拿到任意内容，包括空格、JSON 字符串等 - IE11 不支持
dataset，必须用getAttribute回退 - 修改
dataset.id会同步更新 DOM 属性，反之亦然，但中间若手动调用setAttribute改了非标准名（如data-ID），dataset就读不到
为什么 data-id 不能替代 id 属性
这是最容易混淆的点：id 是全局唯一、可被 document.getElementById 和 CSS #id 直接定位的；而 data-id 只是自定义标记，没有原生查找能力。
立即学习“前端免费学习笔记（深入）”；
- 想用
data-id查元素？得写document.querySelector('[data-id="abc"]')，性能比getElementById差一个数量级 -
id参与锚点跳转、label 关联、ARIA 引用；data-id不参与任何这些 - 同个页面多个元素用相同
data-id不报错，但用相同id会破坏 DOM 完整性 - 如果只是为了 JS 逻辑标识，
data-id足够；如果还要样式控制或无障碍支持，该用id还得用id
真正麻烦的不是怎么设 data-id，而是后续用它做条件判断或批量操作时，忘了它只是字符串——比如 if (el.dataset.id === 123) 永远 false，因为 dataset 读出来永远是字符串。
