HTML中不存在名为data的全局属性，只有以data-开头的自定义数据属性（data-*），其命名须全小写、仅含字母数字和连字符，读取需用dataset API并手动类型转换，不可用于实时状态管理。
HTML 中没有叫 data 的“全局属性”——真正存在的是以 data- 开头的**自定义数据属性**（data-*），它不是单个属性，而是一类命名规则。用错名字（比如写 data 或 data-id 拼错）会导致 JS 完全读不到值。
data-* 属性必须严格符合命名规范才能被 dataset 识别
浏览器只解析形如 data-user-id、data-api-endpoint 这样的写法：开头是 data-，后面只能跟小写字母、数字、连字符（-），不能有大写、下划线、点号或空格。
-
data-userId→ ❌ 浏览器忽略，element.dataset.userId是undefined -
data_user_id→ ❌ 同样被忽略，DevTools 里都看不到 -
data-2024-report→ ✅ 合法，但 JS 中必须用element.dataset["2024Report"]访问（点号无法读数字开头） -
data-is-pending→ ✅ 对应element.dataset.isPending
读取 data-* 值必须用 dataset，别混用 getAttribute
dataset 是专为 data- 设计的语义化 API，自动处理连字符→驼峰转换，并在 IE11+ 全面兼容；getAttribute 是通用方法，返回原始字符串，不参与驼峰映射，且和 dataset 在旧版 Chrome 中可能不同步。
- 安全读取：先检查
"userId" in element.dataset，再取element.dataset.userId - 避免陷阱：
element.setAttribute("data-is-pending", "false")后，element.dataset.isPending可能还是旧值 - 写入统一走
element.dataset.isLoading = "true"，它会自动同步到 DOM attribute - 删除用
delete element.dataset.isLoading，比removeAttribute("data-is-loading")更可靠
dataset 的值永远是字符串，类型转换必须手动做
无论你存的是布尔、数字还是 JSON，dataset 暴露出来的全是字符串。直接 + 或 Boolean() 会翻车。
立即学习“Java免费学习笔记（深入）”；
- 数字：
Number(element.dataset.count)或+element.dataset.count（注意+"0"是 0，+""是 0） - 布尔：
element.dataset.isActive === "true"，别用Boolean("false") === true - 对象/数组：
JSON.parse(element.dataset.config || "{}")，且必须加try/catch - 服务端渲染时，JSON 字符串要 HTML 实体编码，否则
JSON.parse()报SyntaxError
data-* 不是状态管理工具，只是初始化参数通道
它适合存静态、低频、与渲染无关的上下文信息，比如 data-product-sku、data-track-id、data-modal-target。一旦把它当状态用——比如实时更新 data-cart-count 或 data-is-loading——就会立刻掉进三重坑：
- DOM 和 JS 状态不同步（SSR 渲染的值 vs 客户端修改后的值）
- 频繁读写触发重排/重绘（尤其在循环中），性能明显下降
- UI 不响应变化：改
data-active="true"不会让元素变色，得靠class或hidden驱动视图
真正容易被忽略的是：dataset 是只读代理，修改它只影响内存映射，不会持久化回 HTML；若需服务端读取或 SEO 友好，必须显式调用 setAttribute 写回。
