html自定义属性data-*是唯一标准的数据嵌入方式，必须全小写、连字符分隔；dataset自动转驼峰但值恒为字符串，需手动类型转换；css选择器仅支持连字符写法，大小写敏感需统一小写。
HTML 自定义属性（data-*）不是“可有可无的装饰”，而是你在不污染语义、不破坏结构的前提下，把数据稳稳塞进 DOM 的唯一标准方式。用对了，JS 逻辑更干净；用错了，dataset 读出来全是字符串，getAttribute 拿不到驼峰名，CSS 选择器也匹配不上。
data-* 属性怎么写才合法
浏览器只认以 data- 开头、全小写、连字符分隔的命名。大小写混用、驼峰、下划线、特殊符号都会被忽略或导致读取失败。
-
data-user-id✅ 合法，JS 中对应dataset.userId -
data-UserID❌ 非法，dataset.userid读不到（大小写敏感，且规范要求全小写） -
data_user_id⚠️ 虽能被getAttribute读到，但dataset.userId不会自动映射（下划线不触发驼峰转换） -
data-config-json✅ 合法，值可以是 JSON 字符串，比如data-config-json='{"theme":"dark"}'，但 JS 里得手动JSON.parse()
dataset.userId 和 getAttribute("data-user-id") 有什么区别
本质都是读字符串，但访问路径和行为不同。别以为换种写法就自动类型转换了——它俩都不转类型。
-
element.dataset.userId：只暴露以data-开头的属性，自动把连字符转驼峰，但所有值仍是字符串；删属性用delete element.dataset.userId -
element.getAttribute("data-user-id")：能读任意data-*属性，包括含下划线或大写的非标写法（只要 HTML 里写了），但必须拼写完全一致，大小写敏感 - 写入时：
dataset.userId = "123"会同步更新 HTML 属性为data-user-id="123"；而setAttribute("data-user-id", 456)也会生效，但不会影响dataset缓存（实际中几乎立刻同步，但逻辑上是两套机制）
为什么 data-is-active="true" 读出来不是布尔值
因为 HTML 属性值永远是字符串。dataset.isAvailable 返回的是字符串 "true"，不是 true。这是最常踩的坑，尤其在条件判断里直接写 if (el.dataset.isAvailable) —— 只要属性存在，哪怕值是 "false"，这个表达式也成立。
- 正确做法：显式转换，比如
el.dataset.isAvailable === "true"或JSON.parse(el.dataset.isAvailable)（前提是确保值是合法 JSON） - 布尔类状态建议用存在性判断：
el.hasAttribute("data-is-active")，比读值更可靠 - 数值同理：
parseInt(el.dataset.price, 10)或parseFloat(el.dataset.price)，别信自动转换
CSS 怎么用 data-* 做样式分流
靠属性选择器，但注意语法细节——必须用连字符写法，不能用驼峰。
-
[data-status="pending"]✅ 匹配<div data-status="pending"> <li> <code>[data-user-id="1001"]✅ 匹配<span data-user-id="1001"></span> -
[data-is-active="true"]✅ 可用，但更推荐[data-is-active]表示“只要存在该属性” - 组合使用：
button[data-action="submit"][data-disabled="true"]可精准命中禁用提交按钮
真正容易被忽略的是：CSS 选择器不区分大小写，但 HTML 属性名本身是大小写敏感的；如果你写了 DATA-STATUS="pending"（全大写），浏览器会把它标准化为小写，CSS 还是能匹配，但 JS 里 getAttribute("DATA-STATUS") 就拿不到——统一用小写最稳妥。
