<p>data-* 属性用于存储与当前元素强相关的轻量级元数据，如 data-product-id；不适合存大段 JSON、敏感信息或响应式状态。应优先使用 dataset API 读写，它自动处理驼峰转换且兼容性更好，但仅支持字符串值。</p>
data-* 属性用来存什么数据？
它只适合存与当前元素强相关的、不需要频繁读写的轻量级元数据。比如商品卡片的 data-product-id、列表项的 data-sort-order、按钮触发的弹窗 ID data-modal-target。不适合存大段 JSON、用户敏感信息或需要响应式更新的状态——那些该交给 JavaScript 变量或状态管理库。
怎么安全地读写 data-* 属性？
别直接用 element.getAttribute('data-xxx') 或 element.setAttribute('data-xxx', value) 手动拼字符串，容易出错且不处理类型转换。优先用 DOM API 提供的 dataset 对象：
const el = document.querySelector('[data-user-id]');
console.log(el.dataset.userId); // 自动驼峰化：data-user-id → userId
el.dataset.expiresAt = '2025-06-15'; // 写入后生成 data-expires-at 属性
delete el.dataset.tempFlag; // 删除后移除 data-temp-flag注意：dataset 仅支持字符串值，数字、布尔、对象都会被自动转成字符串；null/undefined 会被忽略；带连字符的 key 会转为驼峰命名（data-api-key → apiKey）。
为什么有时 getAttribute 读不到 dataset 设置的值？
这是常见混淆点：用 element.dataset.xxx = 'val' 设置后，属性确实写入了 DOM，但若原始 HTML 中没有该 data-* 属性，部分老版本浏览器（如 IE11）或某些 SSR 渲染场景下，getAttribute('data-xxx') 可能返回 null，而 dataset.xxx 始终可读。解决办法：
立即学习“前端免费学习笔记（深入）”；
- 统一用
dataset读写，避免混用 - 若必须用
getAttribute（比如调试时检查 DOM），确保初始 HTML 已声明该属性：<div data-status="active"></div> - 对关键数据，不要依赖 DOM 属性做逻辑判断，应在 JS 中维护一份可信状态
data-* 和自定义属性（Custom Elements）冲突吗？
不冲突，但要注意命名隔离。Web Components 的自定义属性（如 my-element 的 disabled）是组件内部定义的，而 data-* 是通用标准，始终属于 HTML 规范层。不过如果组件内部也用 dataset 存临时状态，建议加前缀避免覆盖，比如 data-mywidget-cache 而非 data-cache —— 尤其在第三方组件混用时，data-id 这类泛用名极易被意外覆盖或误读。
最常被忽略的是：data-* 属性不会触发 DOM 变更监听（MutationObserver 对 dataset 修改默认不响应），也不参与 CSS 选择器计算（[data-hidden="true"] 可以选中，但 data-hidden 本身不是伪类）。真要响应变化，得手动 dispatch CustomEvent 或用 Proxy 封装 dataset 访问。
