dataset不是响应式状态容器，仅是一次性字符串注入点；动态化需JS主动读取、类型转换并在connectedCallback或attributeChangedCallback中协调，data-*仅适合初始化轻量配置。
dataset 不是响应式状态容器，也不是组件通信通道——它只是一次性字符串注入点。真正在动态化方案中做属性映射与组件转换，必须靠 JS 主动读取、类型转换、生命周期协调，且只能在 connectedCallback() 或 attributeChangedCallback() 中安全操作。
data-* 属性在动态化中能干什么、不能干什么
它唯一可靠的作用，是在元素初始化时传递轻量配置：比如 <user-card data-user-id="1024" data-theme="dark">。但这些值全是字符串，this.dataset.userId 是 "1024"，不是数字；this.dataset.theme 是 "dark"，不会自动触发样式切换；改了 HTML 上的 data-user-id，JS 里也不会感知——除非你显式监听。
常见错误现象：
- 在
constructor()里直接读this.dataset并渲染子节点，结果 DOM 还没挂载，querySelector返回null - 用
v-bind:data-id="userId"同时又手动读dataset.id，导致数据流分裂：Vue 更新了 DOM，但自定义元素没重映射 - 把 token、API key 塞进
data-api-key，源码可查，违反最小权限
自定义元素中安全映射 data 属性的时机与方式
只有 customElements.define() 定义的元素，才能结构化承接 data- 属性。关键约束有三：
立即学习“前端免费学习笔记（深入）”；
- 初始化映射放
connectedCallback()：此时 DOM 已就绪，子节点可访问，适合一次性配置解析 - 后续变更监听用
attributeChangedCallback()，但必须配合static get observedAttributes()显式声明，例如return ['user-id', 'theme']（注意不是data-user-id） -
attributeChangedCallback(name, oldValue, newValue)中，name是小写连字符形式，newValue永远是字符串，需手动转类型：parseInt(newValue, 10)、JSON.parse(newValue)（加try/catch）、newValue === 'true'
HTML 结构如何支撑组件转换，而非依赖框架
纯 HTML 的“组件转换”本质是语义边界 + CSS 作用域 + JS 封装逻辑。比如一个卡片区块，应这样组织：
<article class="cmp-card" data-status="draft"> <header class="cmp-card__header"><h3></h3></header> <div class="cmp-card__body"><!-- 插入内容 --></div> <footer class="cmp-card__footer"><button data-action="publish">发布</button></footer> </article>
这里 data-status 和 data-action 不是状态源，而是视图指令锚点。JS 可据此添加类名、绑定事件，但真正状态仍由变量或 store 管理。CSS 用 .cmp-card__header 隔离作用域，避免全局污染；<article> 提供语义边界和默认无障碍角色。
容易被忽略的点：
-
data-值不参与 SSR 渲染一致性校验，服务端吐出的data-status="draft"和客户端 JS 解析后行为不一致，会触发 hydration mismatch - 多个同类型组件共享同一份
data-配置时，若未加唯一前缀（如data-product-id），极易在批量操作中误匹配 - 用
MutationObserver监听data-变更成本高、不可靠，不如用事件总线或状态派发
为什么别用 data-* 替代真正的组件 props 或 state
因为它的能力边界非常清晰：无类型、无响应、无跨组件同步、无环境适配、无加密能力。当你需要以下任一能力时，data- 就该退场：
- 状态要持久化到
localStorage或同步到后端 - 多个卡片共享“是否已选中”状态，点击一个影响其他
- 根据部署环境（dev/staging/prod）动态切换
data-api-host值 - 配置含敏感字段，需 runtime 注入而非静态 HTML 输出
真正可行的路径是：构建时注入环境变量 → JS 初始化时读取 → 转为 typed config object → 交由组件实例管理。DOM 属性只是启动入口，不是运行时真相。
