data-* 属性仅适用于初始化配置，无法自动同步js状态或响应后续变化，必须通过 customelements.define() 配合 connectedcallback() 和 attributechangedcallback() 实现安全映射。
data-* 属性只适合初始化配置，不是动态映射通道
HTML 模板里的 data-* 属性（比如 data-user-id="123"）根本不会自动同步到 JS 状态，也不会响应后续变化。它只是元素创建时的一次性字符串注入点——DOM 渲染完，值就定死了。
常见错误现象：
- 在自定义元素
constructor()里读this.dataset.userId并立刻渲染子节点，结果querySelector返回null（DOM 还没挂载） - 用 Vue 的
v-bind:data-id="id"渲染后，又手动读dataset.id做逻辑判断，导致数据流分裂：Vue 更新了 DOM，但你的 JS 没感知、没重映射 - 把
data-loading="true"当成开关，却没监听变更，状态卡死
自定义元素中安全映射 data 属性的时机必须明确
真正在 HTML 模板里做动态映射，得靠 customElements.define() 定义的自定义元素，并严格遵守生命周期钩子。
关键约束有三：
- 初始化映射放
connectedCallback()：此时 DOM 已就绪，子节点可访问，适合一次性解析this.dataset - 后续变更监听必须用
attributeChangedCallback()，且要配合static get observedAttributes()显式声明，例如return ['user-id', 'theme']（注意不是data-user-id） -
attributeChangedCallback(name, oldValue, newValue)中，name是小写连字符形式（如'user-id'），newValue永远是字符串，需手动转类型：parseInt(newValue, 10)、JSON.parse(newValue)（加try/catch）、newValue === 'true'
[data-state] 比 class 更适合标记瞬态视图状态
如果只是临时标记按钮加载中、卡片展开、Tab 激活这类单次、局部、语义明确的状态，优先用 data-state 而不是 class。
原因很实际：
- 浏览器原生支持
[data-state="loading"]这类选择器，CSS 可直接命中，不用 JS 加 class 或维护映射表 - 不和
btn-primary这类样式类冲突，避免复用污染或覆盖问题 - 服务端直出 HTML 就生效，无需等 JS 初始化
- 值建议用小写字母 + 连字符（如
data-state="error"），别用data-state="true"—— 它无法区分“加载中”和“失败”
模板中真正需要动态绑定的，交给框架或 JS 变量管
一旦状态涉及跨组件同步、异步更新、持久化（比如存 localStorage）、或依赖计算逻辑，data-* 就该退场了。
典型场景包括：
- 多个卡片共享同一个“选中 ID”，改一个就得通知其他响应 → 用
useState或 store - 表格行编辑状态需要保存草稿、校验、回滚 → 用组件内部
data或ref - 折叠面板状态要记住用户上次操作 → 存
localStorage，读写都绕过 DOM - API 请求返回后要更新整个视图结构 → 框架的响应式系统（Vue 的
ref/ React 的useState）才是主力
HTML 模板本身没有响应式能力，data-* 只是轻量映射的起点，不是终点。容易被忽略的是：你写的每个 dataset.xxx 都得配套做类型转换和变更监听，否则它就是个静态快照。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
