<p>data-* 属性需以 data- 开头、后缀全小写、仅含字母数字连字符下划线才有效；读取优先用 getAttribute() 保障兼容性，跨元素联动需手动通过 data 值定位目标，注意 DOM 加载时机与属性变更监听。</p>
data-* 属性是关联页面元素最轻量、最原生的方式，但它不是自动“绑定”的——你得自己读、自己用、自己维护关系。
data-* 属性怎么写才被浏览器认作有效关联
必须满足三要素：以 data- 开头、后缀全小写、只含字母/数字/连字符/下划线。比如 data-modal-id 合法，data-modalId 会被转成 dataset.modalid（全小写），data-123 直接无效。
-
data-target="sidebar"✅ 可用于标记目标元素 ID -
data-list-item="true"✅ 表明该元素属于某个列表项集合 -
data-parent-id="nav-menu"✅ 显式声明父子关系，比靠 DOM 层级更可靠 - 避免
data-id这种泛化命名——容易和后端返回的id字段混淆，建议带业务前缀如data-nav-id
用 dataset 还是 getAttribute 来读取关联值
优先用 getAttribute('data-xxx')，尤其在服务端渲染（SSR）或需要首次 JS 执行就取值时。因为 dataset 在 IE11 不支持，且某些 SSR 工具生成的初始 HTML 中，dataset 对象可能为空或未同步。
-
el.getAttribute('data-target')返回原始字符串，稳定、兼容性好 -
el.dataset.target写法简洁，但仅适用于已存在的属性；首次设置新属性必须用setAttribute，否则dataset.newKey = 'val'不会生成对应 HTML 属性 - 若属性名含多个连字符（如
data-api-key），dataset.apiKey可读，但写入时需用dataset["apiKey"] = 'abc'方括号语法
如何用 data 属性实现跨元素联动
典型场景：点击按钮触发另一个区域更新。关键不是“自动关联”，而是你主动用 data- 做索引桥梁。
立即学习“前端免费学习笔记（深入）”；
- 给按钮加
data-action="show-panel"和data-target="panel-2" - 给面板加
id="panel-2"或data-panel-id="2" - JS 中通过
document.getElementById(el.getAttribute('data-target'))或document.querySelector('[data-panel-id="' + targetId + '"]')定位目标 - 别依赖
dataset在事件回调里实时反映变化——它不会触发监听，改了属性值也不会自动刷新关联逻辑
容易被忽略的生命周期陷阱
data-* 属性本身没生命周期，但你的读取时机决定它是否“可用”。在 DOMContentLoaded 之前访问 dataset，很可能拿到空对象或 undefined，尤其 SSR 页面首屏 JS 执行早于 DOM 解析完成时。
- 批量初始化组件时，用
document.addEventListener('DOMContentLoaded', () => { ... })包裹读取逻辑 - 自定义元素中，首次取初始值应在
connectedCallback里用this.getAttribute('data-xxx')，而不是constructor - 如果要响应属性变更（如
data-status被 JS 修改），必须手动监听，比如用MutationObserver观察data-属性变化，或在 Custom Element 中实现observedAttributes和attributeChangedCallback
