data-*属性不参与表单提交，需javascript主动桥接；须手动转换类型、避开constructor读取时机，并手写同步逻辑。
data-* 属性不能直接映射到表单数据模型
HTML 表单提交时，data-* 属性完全不会被序列化进 FormData 或 request.POST。哪怕你写 <input name="email" data-user-id="1024">，后端收到的只有 email=xxx，data-user-id 会被彻底忽略。这不是浏览器 bug，而是规范行为：data-* 只是初始化元数据容器，不参与表单生命周期。
常见错误现象包括：
- 前端用
dataset.userId读出值，以为能随表单一起提交，结果后端收不到 - 把
data-validation-rules当成服务端校验依据，但实际只在 JS 里用了，后端根本没拿到 - 用
data-api-endpoint控制提交地址，却忘了在 JS 中显式读取并覆盖form.action
如何让 data-* 真正参与表单数据流
必须靠 JavaScript 主动桥接：在表单提交前，把 data-* 值注入到可提交字段中，或拼进请求体。关键不是“绑定”，而是“搬运”。
实操建议：
- 用隐藏域承载 data-* 值：
<input type="hidden" name="user_id" value="">，再用form.addEventListener('submit', e => { e.target.querySelector('[name="user_id"]').value = e.target.dataset.userId }) - 改用
FormData手动构造：const fd = new FormData(form); fd.append('user_id', form.dataset.userId) - 如果用
fetch提交，直接从 dataset 取值塞进 body：JSON.stringify({ email, user_id: form.dataset.userId }) - 避免在
input上重复写data-和name—— 容易不同步，优先用一个 source of truth（比如统一从父form的 dataset 读）
dataset 类型转换陷阱必须手动处理
this.dataset.userId 永远是字符串，哪怕 HTML 写的是 data-user-id="1024"。布尔值更危险：data-enabled="false" 读出来还是字符串 "false"，在 JS 里 Boolean("false") === true。
安全转换方式：
- 数字：
parseInt(el.dataset.count, 10)或Number(el.dataset.count)，注意NaN检查 - 布尔：
el.dataset.enabled === 'true'，不要用Boolean() - JSON 对象：
try { JSON.parse(el.dataset.config) } catch (e) { /* fallback */ } - 连字符命名别依赖自动转换：如果 HTML 是
data-UID="abc"，dataset.uid读不到，得用dataset["UID"]或getAttribute('data-UID')
自定义元素中 data-* 映射要避开 constructor 时机
在 customElements.define() 的 constructor() 里读 this.dataset 虽然可行，但子节点（比如内部的 <input>）很可能还没挂载，this.querySelector('input') 会返回 null。
正确时机是：
-
connectedCallback()：适合一次性初始化，此时 DOM 已就绪，可安全操作子节点和 dataset -
attributeChangedCallback()：需配合static get observedAttributes()，监听user-id（不是data-user-id），变更时手动同步到内部状态和表单值 - 如果组件要参与原生表单提交，必须调用
this.internals.setFormValue()，且该值应来自 dataset 转换后的结果，而非原始字符串
最易被忽略的一点：dataset 不触发响应式更新，也不联动 DOM 属性变化。它只是个快照——哪怕你在 JS 里改了 el.dataset.x = 'y'，HTML 源码里的 data-x 也会同步更新，但不会自动刷新组件 UI 或表单值。所有同步逻辑必须手写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
