data-* 属性仅是字符串挂载点，值恒为字符串且无响应性；需用 attributechangedcallback 配合 observedattributes 监听变更；name 属性才是表单数据流动的原生通道。
data-* 属性不是数据传递通道，只是字符串挂载点
很多人写 <user-card data-user-id="1024" data-theme="dark"></user-card> 就以为组件内部能自动拿到数字 1024 或布尔 true —— 实际上 this.dataset.userId 拿到的是字符串 "1024"，this.dataset.theme 是字符串 "dark"，且没有任何响应性。后续改 el.setAttribute('data-user-id', '1025') 不会触发更新，除非你手动监听并处理。
它本质是 HTML 提供的“元数据容器”，类似便签纸，贴上去就静止了。真正驱动数据流动的，是你写的 JS 逻辑。
- 所有值都是字符串，
data-show-avatar="true"→this.dataset.showAvatar === "true"，不是布尔true - 连字符自动转驼峰：
data-user-id→dataset.userId，但data-UID不会变成dataset.uid（大小写敏感） - 数字开头或含下划线的属性，如
data-2024-id或data-user_name，必须用getAttribute('data-2024-id')，dataset点语法无效
attributeChangedCallback 是唯一能响应 data-* 变更的入口
想让组件对 data- 属性变化做出反应，不能只靠读取 dataset。必须配合 static get observedAttributes() 声明监听项，并在 attributeChangedCallback(name, oldValue, newValue) 中处理。
关键点：observedAttributes 只认去掉 data- 后的属性名，且必须是合法小写+连字符格式。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 要监听
data-disabled，得写observedAttributes: ['disabled']，不是['data-disabled'] -
attributeChangedCallback在元素首次解析时也会触发，oldValue为null，需判空 - 值仍是字符串，
if (newValue)判空不可靠；应显式转换：const disabled = newValue === 'true' - 不要在回调里直接修改同名属性（如
this.setAttribute('disabled', 'false')），否则触发无限循环
name 属性才是表单级数据流向的原生协议
如果你的目标是提交数据、做分组、支持无障碍或原生序列化，name 才是 HTML 真正的数据流向锚点。它和 data- 完全不同层级：
-
<input name="email">的值会被form.submit()自动收集为email=xxx；<input data-email="xxx">什么都不会发生 - 同名
name的 checkbox 自动聚合成数组，radio 组自动互斥 —— 这些行为浏览器原生保障，无需 JS -
name必须是合法标识符（小写字母、连字符），不能含下划线或大写；data-没这限制但也没这能力 - 服务端渲染时，优先用
name传业务字段，data-只用于控制逻辑（如data-submit-url）或标记（如data-track-id）
框架中 data-* 默认不透传，需显式配置
Vue、React、Svelte 等框架默认过滤掉未声明的 data- 属性。你在父组件写 <my-comp data-id="123"></my-comp>，子组件根元素上根本不会出现这个属性。
透传必须主动干预：
- Vue：设
inheritAttrs: false，模板中用v-bind="$attrs"挂到目标元素 - React：函数组件需解构
props，再用{...rest}或显式data-id={props["data-id"]} - 自定义元素内嵌在框架中时，
data-不会自动进dataset，仍要靠getAttribute或事件参数带入
最易被忽略的一点：data- 值永远是字符串，且仅在初始渲染或 JS 显式操作时存在；它不参与响应式系统，也不触发 DOM 更新周期。把它当“初始化快照”用可以，当“实时管道”用一定会出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
