<p>data-* 属性是静态字符串容器，非响应式绑定机制；需在 DOMContentLoaded 后读取、遵循 kebab-case 命名、用 setAttribute 写入、自定义元素才支持变更监听。</p>
data-* 属性不是绑定机制，它只是字符串容器；所谓“业务参数绑定”，本质是手动桥接 DOM 属性与 JS 逻辑的初始化过程，必须控制读取时机、处理类型转换、明确所有权边界。
什么时候读 dataset 才不会拿到 undefined
在 DOMContentLoaded 之前读 dataset，尤其是从 <body> 或根元素上取值，大概率返回空对象或缺失字段——哪怕 HTML 源码里明明白白写了 data-config='{"api":"/v1"}'。
- 脚本放在
<head>里？必须加defer或监听DOMContentLoaded事件 - 脚本放在
</body>前？仍建议包裹在DOMContentLoaded回调中，避免 SSR 渲染未完成时的竞态 - 用
document.body.dataset.config取值前，先确认document.body存在且已解析（document.body?.dataset是安全写法） - 服务端渲染（SSR）场景下，
dataset是静态快照，后续 JS 修改不会触发重渲染，别指望它响应式更新
data-user-id 写对了但 dataset.userId 还是 undefined？检查命名规范
浏览器只识别符合 kebab-case（小写+连字符）的 data- 属性名。写成 data-userId、data-user_id、data-UserID，dataset 都不会映射对应字段，getAttribute('data-userId') 虽能取到，但已脱离标准路径。
- 正确写法：
data-user-id→dataset.userId，data-api-endpoint→dataset.apiEndpoint - 数字开头不行：
data-2024-active无法用点语法访问，只能写dataset["2024Active"] - 双连字符如
data-foo--bar会被转成fooBar，语义丢失，禁止使用 - 大小写混用（
data-Api-Key）不被识别，必须全小写：data-api-key→dataset.apiKey
为什么改了 dataset.userId = '1025'，DOM 里还是旧值
dataset 是只读代理，不是双向绑定。赋值操作只修改内存副本，不写入真实 DOM 属性节点。刷新页面后，一切回到 HTML 初始状态。
立即学习“前端免费学习笔记（深入）”；
- 持久化写入唯一方式：
element.setAttribute('data-user-id', '1025') - 删除属性：
element.removeAttribute('data-user-id') - 读取推荐用
dataset.userId（自动驼峰、语义清晰），但写入必须绕过dataset - 混用风险：先
dataset.userId = 'a'，再setAttribute('data-user-id', 'b')，后续dataset.userId仍返回'a'—— 因为dataset不会重新同步 DOM
自定义元素里怎么让 data-user-id 变化时自动触发加载
原生 HTML 元素不监听 data- 变更。只有通过 customElements.define() 注册的自定义元素，才能靠 observedAttributes + attributeChangedCallback 实现响应式感知，但规则极严。
-
observedAttributes必须返回去掉data-的裸名：['user-id']，不是['data-user-id'] -
attributeChangedCallback(name, oldValue, newValue)中，name是小写连字符形式（'user-id'），不是驼峰 - 首次从 HTML 解析也会触发该回调，
oldValue为null，需判空 -
newValue恒为字符串，parseInt(newValue, 10)或newValue === 'true'才能转目标类型 - 别在
constructor里发请求或操作子节点——此时元素未挂载，shadowRoot可能为null
最易被忽略的点是：data-* 从不参与任何框架的响应式系统，也不触发 DOM 重绘；它只是一次性字符串注入入口。所有“绑定感”都来自你写的那一段桥接代码，而这段代码的健壮性，取决于你是否卡准了生命周期、守住了命名规范、做实了类型转换。
