data-*属性是静态标记而非隐式传递通道，需JavaScript显式读取dataset并手动处理；name属性才是表单原生数据流向的唯一协议，决定提交键名与分组逻辑。
HTML 本身不控制数据流向，它只提供承载和标记的骨架。真正决定数据怎么来、往哪去、谁更新谁的，是 JavaScript 驱动的逻辑层。但 HTML 的结构设计会直接影响这套逻辑是否稳健、可维护、无障碍友好。
data-* 属性是数据流向的“锚点”，不是传输通道
你不能靠 data-id 或 data-status 自动把值从 A 组件塞进 B 组件。它们只是静态标记，供 JS 读取后做判断或触发动作。
- 常见错误：写
<div data-user-id="123"></div>就以为子组件能自动拿到这个 ID —— 实际上得靠 JS 显式读取element.dataset.userId，再手动传给目标组件或发事件 - 正确用法：在表单提交前，用
form.dataset.submitUrl拿到后端地址；在步骤条里用ol.dataset.currentStep="2"做初始状态快照，避免 JS 初始化时竞态 - 性能影响：频繁读写
dataset不会卡顿，但若在 scroll 或 input 事件里反复查dataset又不做节流，可能拖慢响应
form 和 input 的 name 属性才是原生数据流向的“协议”
只有 <form> 内部带 name 的控件（<input>、<select>、<textarea>）才能被原生 submit 行为收集并序列化。这是 HTML 唯一内置的数据流向机制。
- 常见错误：用
id或class替代name→ 提交时字段直接消失 - 使用场景：后端接收
POST /api/order时，期望 body 是application/x-www-form-urlencoded格式，那前端就必须靠name="customer_name"而不是data-field="customer_name" - 注意：同名
name的多个 checkbox 会自动聚合成数组，而 radio 组则只提交选中的一个值 —— 这个行为是浏览器原生保障的，JS 不用额外处理
自定义事件是跨组件数据流向的“邮局”
当数据要从子组件反向通知父组件（比如按钮点击后要刷新列表），HTML 没有内置机制，必须用 dispatchEvent + addEventListener 搭建通信链路。
立即学习“前端免费学习笔记（深入）”；
- 容易踩的坑：事件没加
bubbles: true→ 父组件监听不到；事件类型名用太泛的"click"→ 和原生事件冲突 - 实操建议：统一前缀，比如
"ui:submit"、"data:loaded"；携带数据用detail字段：new CustomEvent("data:updated", { detail: { id: 42, status: "done" } }) - 兼容性注意：IE 不支持
CustomEvent构造函数，需 fallback 到document.createEvent，但 2026 年多数项目已可忽略 IE
shadow DOM 会切断默认数据流向，必须显式透传
如果你用 customElements.define 写了封装组件（比如 <permission-button>），它的 shadow root 默认隔离样式和事件。外部传进来的数据不会自动落到内部 input 上，内部变化也不会自动冒泡出去。
- 关键点：属性映射靠
observedAttributes+attributeChangedCallback；事件透传靠this.dispatchEvent(new Event("change", { bubbles: true })) - 典型问题：“我给
<my-input value="test">设了 value，但内部<input>还是空的” —— 因为没在attributeChangedCallback里同步到this.shadowRoot.querySelector("input").value - 别依赖
slot传递运行时数据：slot 是静态内容投影，不能响应式更新；动态数据必须走属性或事件
实际项目里最常被忽略的，是把“HTML 结构能表达什么”和“JS 逻辑该做什么”混为一谈。比如用 data-status 控制按钮禁用，却忘了同时设 aria-disabled="true" 和移除 tabindex —— 数据流看似通了，但键盘用户和读屏器已经掉队了。
