<p>data-* 属性是HTML5唯一合法的自定义属性载体，必须以data-开头、使用kebab-case命名，CSS需用带引号的属性选择器匹配，JS可通过setAttribute或dataset操作，但不可存储敏感信息或复杂结构。</p>
data-* 属性是唯一合法的自定义属性载体
HTML 标准只允许使用以 data- 开头的自定义属性，其他如 role、custom-style 或直接写 theme="dark" 都属于非法 HTML，可能触发验证警告，且部分浏览器或工具链（如 React 的 JSX 解析）会忽略或报错。
合法写法必须是：data-theme="dark"、data-status="loading"、data-index="3"。注意：连字符后首字母不强制大写，但后续单词建议用 kebab-case（全小写+短横线），避免大小写混用导致 CSS 选择器匹配失败。
-
data-user-id="123"✅ 合法，CSS 中可写[data-user-id="123"] -
data-userId="123"❌ 非标准，虽部分浏览器能读取，但不符合 HTML5 规范，XPath 或某些 SSR 渲染环境可能无法识别 -
theme="dark"❌ 不会被视为自定义属性，多数 CSS 选择器引擎不匹配
CSS 中用属性选择器精准绑定样式
不能靠 JS 动态插入 class，而是直接用 CSS 属性选择器响应 data- 值变化——前提是属性值变更后 DOM 已更新，CSS 引擎会自动重匹配。
常见误写：[data-state=active] 缺少引号，当值含空格、点、括号时会解析失败；正确写法一律加双引号。
立即学习“前端免费学习笔记（深入）”；
[data-loading="true"] { opacity: 0.6; pointer-events: none; }[data-size="large"] button { padding: 12px 24px; font-size: 1.1em; }[data-theme="dark"] .card { background: #2d2d2d; color: #f0f0f0; }- 支持部分匹配：
[data-variant~="primary"]匹配空格分隔的单词（类似 class）；[data-path^="/admin"]匹配开头为 /admin 的路径
JS 修改 data-* 后样式自动生效，但要注意同步时机
用 element.setAttribute('data-loading', 'true') 或 element.dataset.loading = 'true' 都能触发样式更新，但有细微差异：
-
dataset会自动转换驼峰命名：设置el.dataset.userId实际写入data-user-id，读取时也自动转回驼峰 - 直接
setAttribute更可控，尤其当属性名含数字或特殊符号（如data-1st-load）时，dataset无法访问 - 批量更新多个
data-属性时，用setAttribute更明确，避免dataset的隐式映射歧义 - 不要用
innerHTML或outerHTML替换整个元素来“刷新” data 属性——这会销毁事件监听器和状态，纯属性修改即可触发样式重计算
避免在 data-* 中存复杂结构或敏感信息
data- 属性本质是字符串容器，不是状态管理机制。存 JSON 字符串（如 data-config='{"size":"m","mode":"edit"}'）看似方便，但带来三个实际问题：
- CSS 无法解析嵌套结构，只能做字符串全匹配，无法按
size或mode单独样式绑定 - JS 解析需
JSON.parse(el.dataset.config)，出错即中断，且每次读取都触发解析开销 - 所有
data-属性对用户可见（查看源码/DevTools），不应存放 token、密码、用户 ID 等敏感字段 - 真正需要动态逻辑时，优先用
class切换 + CSS 自定义属性（--bg-color），或结合aria-表达语义，data-只承载简单标记位
data-* 是轻量标记通道，不是数据仓库。样式绑定越简单，越可靠。
