form[method="dialog"]提交不关闭dialog的根本原因是HTML结构不合规：form必须是dialog的直接子元素，dialog须用showModal()打开，且需type="submit"按钮。
form[method="dialog"] 为什么点了提交没关 dialog？
根本原因不是 JS 写错了，而是 HTML 结构不合规。method="dialog" 不是“开关”，它只在特定上下文中触发自动关闭逻辑。常见失败场景包括：
-
<form>没有直接放在<dialog>内部（中间隔了<div>、<section>等容器） -
<dialog>没调用showModal()或show()—— 单纯加open属性或设display:block不生效 - 表单里没有
<button type="submit">或等效控件（比如<input type="submit">），回车也不触发 - 写了
onsubmit="event.preventDefault()"或其他阻止默认行为的逻辑，直接掐断了原生关闭链路
如何让 form[method="dialog"] 正确赋值并关闭？
必须满足三件事：结构对、方法对、按钮对。缺一不可。
-
<form>是<dialog>的**直接子元素**（不能嵌套在任何其他标签里） -
<dialog>已通过dialog.showModal()打开（此时 DOM 中有open属性且焦点被捕获） - 提交按钮用
<button type="submit" value="ok">或<input type="submit" value="cancel">——value值会直接成为dialog.returnValue
示例结构：
<dialog id="confirmDialog">
<form method="dialog">
<p>确定要删除吗？</p>
<button type="submit" value="yes">是</button>
<button type="submit" value="no">否</button>
</form>
</dialog>
调用后：dialog.returnValue 就是字符串 "yes" 或 "no"，不是对象，也不是 FormData。
立即学习“前端免费学习笔记（深入）”；
想传表单字段数据，还能用 method="dialog" 吗？
不能。一旦你希望把 <input name="title"> 的值一起传出去，method="dialog" 就不再适用——它只认按钮的 value，无视其他字段。
- 若需传字段数据，必须放弃
method="dialog"，改用普通表单 +event.preventDefault() - 手动收集数据：
const data = new FormData(form)，再fetch()提交 - 成功后调用
dialog.close(JSON.stringify(result))，注意参数只能是字符串 - 读取时用
JSON.parse(dialog.returnValue)，别忘了 try/catch 处理解析失败
dialog.returnValue 什么时候能安全读取？
它不是 Promise，也不是事件参数，而是一个同步但**延迟写入**的属性。最常踩的坑是：在 submit 事件里就读它，结果还是空字符串。
- 正确时机是监听
close事件：dialog.addEventListener('close', () => console.log(dialog.returnValue)) - 如果用了
await dialog.showModal()（Chrome 125+ 支持），返回值就是close()的参数，但仍是字符串 - 别依赖
open属性变化去读 ——open变为false和returnValue赋值不是原子操作，有微小延迟
复杂点在于：返回值永远是字符串，哪怕你传的是 null、数字或对象；浏览器不会帮你序列化字段，也不会合并同名 checkbox；这些都得自己处理。
