data-*属性仅作前端标记，不可替代权限控制；真实权限系统须满足后端鉴权、接口级访问控制、前端行为拦截三条件，且dataset值恒为字符串，需规范解析与使用。
data-* 属性不能当权限开关用
它只是前端标记，不是权限决策点。你看到 data-permission="edit:product"，不代表用户真有这个权限；后端没校验、API 没拦截、JS 没做兜底，光靠这个属性控制按钮显隐或表单可编辑性，等于把安全逻辑写在 HTML 注释里——看着像那么回事，一测就崩。
真实权限系统必须满足三个条件：后端鉴权（RBAC/ABAC）、接口级访问控制、前端行为拦截。data-* 只能出现在第三个环节，且仅用于辅助定位和状态映射，比如：
- 给编辑按钮加
data-action="update-product"，供权限 SDK 批量扫描并绑定禁用逻辑 - 在表格行上写
data-resource-id="prod_789"，让操作前的 JS 校验函数快速拿到上下文 - 配合
contenteditable="false"锁定不可编辑字段，但必须用beforeinput事件二次拦截粘贴和 Backspace
dataset API 读写时连字符转驼峰的坑
写 data-edit-scope="finance"，JS 里必须用 el.dataset.editScope，而不是 el.dataset["edit-scope"] 或 el.dataset.edit_scope。浏览器只认连字符 + 小写命名，下划线、大写、数字开头都会导致 dataset 返回 undefined。
常见翻车现场：
立即学习“前端免费学习笔记（深入）”；
-
<div data-user-id="1001">→el.dataset.userId✅，el.dataset.userid❌（大小写敏感） -
<div data-2fa-enabled="true">→ 必须用el.dataset["2faEnabled"]，点号访问会语法错误 -
<div data-team-name="backend">→el.dataset.teamName✅，但el.dataset.teamname❌（驼峰规则强制首字母小写后每个连字符后字母大写）
contenteditable + data-* 组合实现字段级编辑隔离
当整个容器设 contenteditable="true"，但其中某些字段（如创建人、时间戳、状态 badge）必须锁定时，不能只靠 CSS user-select: none 或 pointer-events: none ——这些拦不住键盘输入和粘贴。
正确姿势是三层防御：
- 子元素显式加
contenteditable="false" - 外层统一加语义化
data-locked-field="author"，便于 JS 批量识别 - 监听
beforeinput事件，对匹配data-locked-field的元素调用e.preventDefault()
Firefox 下即使加了 contenteditable="false"，Backspace 仍可能合并删除父节点内容，所以 beforeinput 拦截是刚需，不是可选项。
dataset 值永远是字符串，别直接当布尔或数字用
data-is-pending="false" 被读成字符串 "false"，Boolean("false") 是 true，所以 if (el.dataset.isPending) 永远为真。这不是 bug，是规范。
安全写法只有两种：
- 布尔判断：用
el.hasAttribute("data-is-pending")（存在即 true），或显式比值el.dataset.isPending === "true" - 数字转换：必须
Number(el.dataset.count)或+el.dataset.count，不能直接el.dataset.count > 5 - 对象解析：先
JSON.parse(el.dataset.config || "{}")，再加try/catch，因为任何格式错误都会导致JSON.parse报错中断流程
最常被忽略的是：dataset 不响应变化，也没有 getter/setter。你改了 el.dataset.isLoading = "true"，但另一个模块还在读旧缓存的 el.getAttribute("data-is-loading")，两者值可能不一致——这种隐式不同步，在复杂权限切换场景下极难排查。
