data-* 属性是标准化的元数据容器，专为存储与渲染无关但 javascript 需用的上下文数据而设计，非样式控制或语义替代，是 dom 元素自带的“便签纸”，浏览器原生支持且 w3c 验证通过。
data-* 属性不是“随便加的 class”，而是标准化的元数据容器
它专为在 HTML 元素上存**与渲染无关、但 JS 需要用到的上下文数据**而设计。不是用来控制样式，也不是替代 id 或 class 的语义占位符；它是 DOM 元素自带的“便签纸”。浏览器原生支持，W3C 验证通过，旧版 IE（getAttribute()。
dataset 读写时连字符自动转驼峰，但值永远是字符串
比如 data-user-id="123" → element.dataset.userId 返回 "123"（字符串），不是数字；data-is-active="true" → element.dataset.isActive 是 "true"，不是布尔值。容易踩的坑：
- 忘记类型转换：
if (el.dataset.isActive === "true")才安全，直接if (el.dataset.isActive)会恒为真 - 属性名含数字或大写字母无效：
data-userID合法，但dataset.userid不可访问（必须小写+连字符） -
dataset不支持嵌套对象或数组，只能存字符串；想存结构化数据得手动JSON.stringify()/JSON.parse()
别把 data-* 当数据库，也别拿它传敏感信息
它本质是公开暴露在 HTML 源码里的字符串，任何用户右键“查看页面源代码”都能看到。适用场景很明确：
- 按钮上存
data-action="delete"+data-item-id="42"，配合事件委托统一处理 - 卡片元素带
data-category="news"，供筛选逻辑过滤 DOM - 懒加载图片前存
，JS 拿到后才赋给src
不适合：存 token、用户手机号、未脱敏的订单号——这些该走 API 或服务端 session。
CSS 里也能用 data-*，但仅限属性选择器和 content
比如 [data-status="pending"] { opacity: 0.7; } 或 ::before { content: attr(data-label); }。注意：
-
attr()只能取字符串值，不能做计算或条件判断 - 不支持在
@media或伪类逻辑中动态响应 dataset 变化（dataset 改变不会触发 CSS 重绘） - 大量使用会增加 HTML 体积，影响首屏解析速度，尤其移动端要克制
真正关键的一点：data-* 的价值不在“能存多少”，而在“让数据和它所属的 DOM 节点绑定得足够紧”——删掉那个元素，数据就自然消失，不用手动清理变量或缓存。
