HTML不具备数据流管理能力，data-*属性仅为静态字符串容器，无法自动同步或响应状态变化；实现组件化数据流必须依赖JavaScript通过customElements.define()、observedAttributes和attributeChangedCallback等机制主动建立映射与更新逻辑。
HTML 本身不提供数据流管理能力，所谓“组件化数据流”必须靠 JavaScript 主动建立映射和响应链；data-* 只是静态字符串容器，不能自动同步、不能触发更新、也不感知状态变化。
data-* 属性不是响应式数据源，只是初始化参数
你在 <user-card data-user-id="1024"></user-card> 里写的值，JS 读出来永远是字符串 "1024"，改了属性也不会自动更新视图或内部状态。
- 所有
dataset值都是字符串，this.dataset.showAvatar === "true"≠true，得手动转：this.dataset.showAvatar === "true" -
data-user-id→this.dataset.userId（连字符自动驼峰），但data-UID不会变成dataset.uid，大小写敏感 - 在
constructor()中读dataset没问题，但此时子节点尚未解析，别急着操作this.innerHTML或查this.querySelector
自定义元素中实现最小可行数据流
真要让 HTML 标签具备“数据流”，得用 customElements.define() + observedAttributes + 手动更新逻辑，绕不开 JS 主动介入。
- 在类上声明
static get observedAttributes() { return ["user-id", "theme"]; }（注意：是"user-id"，不是"data-user-id"） -
attributeChangedCallback(name, oldValue, newValue)中，name是小写连字符形式，比如"user-id"，不是驼峰 - 每次变更都要手动同步到内部状态，并触发 DOM 更新：
this._userId = parseInt(newValue, 10); this.render(); -
render()方法里别直接拼字符串塞innerHTML，优先复用已有节点或用textContent/setAttribute局部更新
混用框架时，data-* 容易破坏数据流向
Vue/Angular 项目里再塞 data-id，极易造成数据源分裂——一边是响应式 props，一边是静态 dataset，调试时根本分不清谁在驱动谁。
立即学习“前端免费学习笔记（深入）”；
-
v-bind:data-id="userId"只是把当前值“渲染进 HTML”，后续userId改变它会更新，但dataset.id读出来仍是字符串，且不会反向影响userId - 如果 JS 逻辑又去读
el.dataset.id做判断，就等于绕过了响应式系统，数据流断裂 - 真正该传配置的地方，用
props或provide/inject；data-*只适合标记行为（如data-action="delete"）或做 SSR 初始值透传
真正麻烦的不是怎么写 data-*，而是什么时候不该用它——当你要“管理数据流”，就得承认：HTML 是被动载体，JS 才是主动调度者；依赖属性自动同步，迟早掉进类型错判、更新丢失、调试失焦的坑里。
