data-属性专用于存储与渲染无关的静态上下文信息，命名须以data-开头、小写连字符分隔，js中通过dataset访问（自动驼峰转换），适用于埋点、sku等元数据，禁用于动态状态或敏感信息，读写应优先用dataset api，css可据此做简单状态样式控制，需防范xss风险。
HTML 的 data- 属性不是用来“绑定数据”或替代 JavaScript 状态的，它是专为存储页面元素的、与渲染无关的**额外上下文信息**而设计的——用错场景（比如存大量动态状态、代替 dataset 操作）会直接导致维护困难和 DOM 膨胀。
data- 属性的命名规则和基本写法
所有自定义属性必须以 data- 开头，后接小写字母、数字、连字符（-），不能有大写字母或下划线。浏览器会自动把带连字符的名称转为驼峰式映射到 dataset。
例如：
<button data-user-id="123" data-modal-target="login" data-is-pending="true">提交</button>
对应 JS 中：element.dataset.userId === "123"，element.dataset.modalTarget === "login"，element.dataset.isPending === "true"（注意：值始终是字符串）。
- 连字符分隔的命名（如
data-api-endpoint）→dataset.apiEndpoint - 多个连续连字符（如
data-foo--bar）会被视为一个分隔符，变成fooBar，但不推荐这么写 -
data-后紧跟数字（如data-1st-item）是合法的，但 JS 里无法通过dataset.1stItem访问，得用dataset["1stItem"]
什么时候该用 data- 属性，什么时候不该用
它适合存那些“静态附着在 DOM 上、一次写入、很少变更、且需要被 JS 或 CSS 快速识别”的元信息。
- ✅ 适用场景：
data-track-id（埋点标识）、data-product-sku（服务端渲染后供 JS 补充交互）、data-tooltip-content（纯展示型提示文案） - ❌ 不该用：
data-cart-count随时变化 → 应该用 JS 状态管理，DOM 只负责呈现结果；data-user-permissions存敏感权限列表 → 有泄漏风险，应由后端控制或通过 API 获取 - ⚠️ 性能提醒：频繁读写
dataset会触发 DOM 重排/重绘（尤其在循环中），不如缓存到变量里再批量更新
用 JS 读写 data- 属性的正确姿势
优先使用 dataset API，而不是 getAttribute/setAttribute，它更语义化、自动处理命名转换，并兼容 IE11+。
- 读取：
el.dataset.userId（返回字符串），若不确定是否存在，先检查"userId" in el.dataset - 写入：
el.dataset.userId = "456"→ 自动转成data-user-id="456"；设为null或undefined会移除该属性 - 删除：
delete el.dataset.userId（比removeAttribute("data-user-id")更安全） - 避免陷阱：
dataset不支持布尔属性简写（如data-active不等于data-active="true"），没值就是空字符串，需显式判断el.dataset.active === "" || el.dataset.active === "true"
CSS 中怎么利用 data- 属性做样式控制
CSS 选择器可以直接匹配 data- 属性，适合做状态驱动的样式切换，比加一堆 class 更轻量、语义更明确。
button[data-loading="true"] { opacity: 0.6; cursor: not-allowed; }
div[data-theme="dark"] { background: #1a1a1a; color: #eee; }
- 只推荐用于简单状态（加载中、主题、禁用等），别用它实现复杂组件逻辑
- 属性值要可控：CSS 匹配的是完整字符串，
data-status="pending"和data-status="PENDING"是两个不同选择器 - 不要依赖
data-做响应式断点或媒体查询条件——那是@media和 class 的职责
真正容易被忽略的是：data- 属性一旦写进 HTML，就成为 DOM 的一部分，服务端渲染时若混入用户数据又没过滤，可能造成 XSS；客户端动态插入时若拼接字符串而非使用 dataset 或 textContent，同样危险。它的“简单”，恰恰藏在对边界和生命周期的清醒认知里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
