data-*属性是HTML5唯一合规的自定义属性方式，必须以data-开头、用kebab-case命名，通过dataset API读写，适用于轻量UI元数据，禁存敏感信息或高频状态。
data-*属性是唯一合规且安全的自定义属性方式
HTML里不能随便加 user-id、status 这类裸属性——浏览器不认，JS读取不可靠，还可能和未来标准冲突。真正能用、该用的只有以 data- 开头的属性，这是 HTML5 官方规范强制要求的。
常见错误现象：直接写 <div user-id="123">，然后用 element.user-id 或 element.getAttribute('user-id') 试图读取，结果是 null 或 undefined；更隐蔽的问题是，某些框架（比如 Vue）会把这类非标准属性当指令解析，导致意外行为。
-
data-后面必须至少有一个字符，且只能用小写字母、数字、连字符（-），不能用下划线、大写字母或点号 - 多词命名统一用 kebab-case（如
data-account-balance），JS 中通过dataset读取时自动转为 camelCase（element.dataset.accountBalance） - 值始终是字符串；若需存对象或数组，必须先
JSON.stringify()，读取后手动JSON.parse() - 不要用纯数字作属性名，例如
data-123是非法的，data-id123才合法
dataset API 比 getAttribute() 更可靠也更方便
虽然 getAttribute('data-user-id') 能读取，但容易漏掉大小写转换、连字符处理等细节；dataset 是专为 data- 属性设计的接口，自动做标准化映射，推荐优先使用。
典型陷阱：写成 <div data-user-id="456">，然后误用 element.dataset.userid（少连字符）或 element.dataset.userId（驼峰错位），实际正确写法是 element.dataset.userId —— 连字符被自动删去，后续单词首字母大写。
立即学习“前端免费学习笔记（深入）”；
- 设置属性：
element.dataset.userId = '789'，浏览器会自动转成data-user-id="789" - 删除属性：
delete element.dataset.userId，比removeAttribute('data-user-id')更直观 - 检查是否存在：
'userId' in element.dataset，比hasAttribute('data-user-id')少拼写风险 - 注意：
dataset只反映当前 DOM 状态，不会响应通过setAttribute()的异步变更（极少见，但需知悉）
别用点语法直接挂属性到 DOM 元素上
像 element.myFlag = true 或 element.counter = 0 这种写法看似简单，但它是 JS 对象属性，不是 HTML 属性——不会出现在 outerHTML 里，无法被 CSS 选择器匹配，也无法被服务端渲染或 SSR 工具识别，调试时也看不到。
适用场景极少：仅限临时状态缓存（比如节流函数里的上次触发时间戳），且必须明确知道它只在当前 JS 执行上下文有效。一旦涉及跨组件通信、服务端同步、或需要被 CSS 响应（比如 [data-active] 控制样式），就必须回到 data- 路线。
- 点语法赋值不触发 DOM 变更事件，
MutationObserver监听不到 - 框架（React/Vue）通常忽略这类属性，可能导致状态不一致
- 同名属性冲突风险高：比如
element.className是内置属性，element.classname是你加的，极易混淆
自定义属性不是万能的数据容器
它适合存轻量、静态、与 UI 行为强相关的元数据，比如 data-modal-target、data-track-id、data-price。不适合存大量 JSON、用户敏感信息、或频繁更新的状态。
性能影响常被低估：每个 data- 属性都会增加元素的内存占用，DOM 查询（尤其是 querySelectorAll('[data-xxx]')）在节点多时明显变慢；CSS 中用 [data-loaded] 做样式切换，比 class 切换开销更大。
- 敏感数据（如 token、用户邮箱）绝不能放
data-属性——前端可被任意查看 - 高频更新的计数器（如实时倒计时）建议用 JS 变量 +
textContent更新，而非反复 setAttribute - 复杂状态（如表单校验结果对象）优先走组件 state，而不是塞进
data-validation-result - 如果属性值要参与 CSS 计算（比如
calc(100% - var(--gap))），得用 CSS 自定义属性（style="--gap: 12px"），不是data-
真正容易被忽略的点：data-* 属性在服务端渲染（SSR）或静态生成（SSG）时是可见且可索引的，但 dataset 操作只在客户端生效——这意味着依赖 dataset 初始化的逻辑，必须确保 DOM 已就绪，且不能假设服务端已执行过 setAttribute。
