data-*属性是仅字符串的元数据容器，需手动实现交互逻辑；命名须全小写加连字符，读取用dataset、写入删除必须用setAttribute/removeAttribute，值恒为字符串须显式转换。
data-* 属性不是“绑定机制”，只是字符串容器；所有交互逻辑必须手动实现，包括类型转换、DOM 同步与 UI 响应。
data-* 属性名怎么写才真正生效
浏览器只解析严格符合规范的 data- 属性：前缀后必须全小写 + 连字符，不能含大写字母、下划线、点号或空格。写错名字，DOM 树里根本不存在该属性，dataset 和 getAttribute 都读不到。
-
data-user-id✅ → JS 中用el.dataset.userId -
data-api-url✅ →el.dataset.apiUrl -
data-2024-start✅ → 但只能用el.dataset["2024Start"]（点号语法不支持数字开头） -
data-userId❌ → 浏览器忽略，el.dataset.userId返回undefined -
data_user_id❌ →getAttribute("data_user_id")可能读到，但dataset不映射
dataset 读取方便，但写入必须用 setAttribute
dataset 是只读映射，不是双向绑定。赋值如 el.dataset.loading = "false" 只改内存副本，不会更新 DOM 属性节点，CSS 选择器不响应，刷新后还原。
- 读取优先用
el.dataset.xxx（自动驼峰、语义清晰） - 写入必须用
el.setAttribute("data-xxx", "value")（唯一持久化方式） - 删除必须用
el.removeAttribute("data-xxx")，delete el.dataset.xxx不可靠 - 混用会立刻导致状态不一致：
dataset.foo = "a"后再setAttribute("data-foo", "b")，dataset.foo仍返回"a"
所有值都是字符串，类型转换不能省
哪怕 HTML 里写 data-count="42" 或 data-is-pending="false"，JS 拿到的永远是字符串 "42" 和 "false"。直接用于判断或计算必然出错。
立即学习“前端免费学习笔记（深入）”；
- 布尔判断别写
if (el.dataset.isPending)→ 改用el.dataset.isPending === "true"或el.hasAttribute("data-is-pending") - 数字运算别写
el.dataset.count + 1→ 改用+el.dataset.count + 1或Number(el.dataset.count) - 存 JSON 要先
JSON.stringify(obj)再setAttribute，取时必须JSON.parse(el.getAttribute("data-config") || "{}")，别用dataset.config（驼峰可能错位键名） - 服务端渲染（SSR）场景下，首次 JS 执行前
dataset为空，安全读值请用el.getAttribute("data-xxx")
data-* 不是状态管理，仅适合轻量元数据
它没有响应式、不触发重绘、不参与生命周期，也不隔离作用域。把它当“组件状态”或“替代 Redux”用，迟早掉坑里。
- 敏感字段如
data-token、data-phone绝对禁止——源码明文可见 - 表格中优先挂载在
<tr>上，而非分散在<td>里，语义更完整 - 自定义元素中，初始化配置可从
dataset读取，但逻辑必须在connectedCallback中执行（constructor里 DOM 尚未挂载） - 事件委托时用
data-action标记行为，比每个按钮单独绑定更轻量，但需手动解析btn.dataset.action并做类型转换
最常被忽略的是时机和所有权：SSR 输出后 dataset 为空、constructor 里操作 DOM 失效、混用 setAttribute 和 dataset 导致状态分裂——这些不是边缘 case，而是日常高频踩坑点。
