data属性命名须以data-开头、全小写、短横线分隔，如data-order-id；JavaScript应通过dataset读取并自动转驼峰，如orderId；框架中需显式绑定，不可直接写在组件内；仅适用于轻量标识，非状态存储。
data属性命名必须以 data- 开头，且不能包含大写字母
HTML5 规范强制要求自定义 data- 属性名全部小写、用短横线分隔（kebab-case），浏览器会忽略含大写字母或下划线的写法。比如 data-orderId 会被当成 data-orderid 处理，data_order_id 则完全无效。
实际绑定时直接写在标签里即可：
<button data-order-id="ORD-2024-7890">确认订单</button>
-
data-order-id是合法命名；data-orderId或data_OrderId都不可靠 - 值可以是任意字符串，但避免嵌入未转义的双引号或尖括号（防止XSS或解析异常）
- 多个业务ID可叠加使用：
data-order-id、data-user-id、data-shop-id
JavaScript 读取 data 属性要用 dataset，不是 getAttribute
直接用 getAttribute('data-order-id') 虽然能拿到值，但无法自动处理驼峰转换；推荐统一走 dataset API —— 它会把短横线命名转成驼峰形式（如 data-order-id → orderId）。
注意大小写敏感和连字符规则：
立即学习“前端免费学习笔记（深入）”；
const btn = document.querySelector('button');<br>console.log(btn.dataset.orderId); // 'ORD-2024-7890'<br>console.log(btn.dataset.userId); // 若有 data-user-id，则对应 userId-
dataset只返回字符串，即使你写了data-count="123"，btn.dataset.count仍是"123"，不是数字 - 带数字或特殊前缀的命名（如
data-2nd-item）无法通过点语法访问，得用方括号：btn.dataset['2ndItem'] - 设置值要用
dataset.xxx = 'val'，不要用setAttribute覆盖整个属性（可能破坏其他 data 属性）
Vue/React 中绑定 data 属性要加 v-bind: 或 {...props} 显式透传
框架模板默认不自动展开 data 属性，直接写 data-order-id="xxx" 在组件内部会被忽略。必须显式绑定到根元素上。
Vue 示例（在 template 中）：
<MyButton :data-order-id="order.id" />
React 示例（JSX 中）：
<MyButton data-order-id={order.id} />- Vue 的
v-bind:（即:）前缀不能省，否则当成静态属性处理 - React 中若用 spread 操作符，确保
props包含data-*键，否则会被过滤掉 - 服务端渲染（SSR）时，data 属性会原样输出，但客户端 hydration 后仍需靠
dataset读取，别依赖 innerHTML 解析
别把 data 属性当状态存储，它只适合轻量标识
data- 属性本质是 HTML 标记，不是状态容器。DOM 更新后它不会自动同步 JS 变量，也不参与响应式系统。
- 修改
dataset.xxx只改 DOM 属性，不会触发 Vue 的响应更新或 React 的 re-render - 大量业务数据（如订单明细、用户权限列表）别塞进
data-json='{"items":[]}'—— 解析慢、易 XSS、难维护 - 真正需要联动的状态，该放
useState、ref或 store 就放那里，data-只管“这是哪个订单”“点的是第几行”这类轻量上下文
最常被忽略的一点：data 属性在 Shadow DOM 中默认不可继承，如果用了 Web Components，得手动用 cloneNode(true) 或 slot 透传，否则子组件拿不到父级 data 值。
