method="dialog" 不能单独关闭<dialog>，它仅在<form>为<dialog>直接子元素且调用showModal()后，使表单提交时不跳转并自动调用close()，同时将数据赋给dialog.returnValue。
method="dialog" 是什么，它真能关闭 <dialog>？
不能单独用 method="dialog" 关闭 <dialog>——这是最常见的误解。这个属性只在 <form> 作为 <dialog> 的直接子元素时起作用，且仅影响表单提交后的行为：它会让浏览器**不触发页面跳转或刷新，也不调用 submit 事件**，而是直接将表单的 returnValue 赋给 <dialog> 实例，并自动调用 close()。
换句话说：method="dialog" 本身不是“关闭指令”，它是告诉浏览器：“这次提交只为传值并收起对话框，别干别的”。前提是整个结构必须合规。
必须满足的 HTML 结构条件
以下任意一条不满足，method="dialog" 就不会触发自动关闭：
-
<form>必须是<dialog>的**直接子元素**（不能套<div>或其他容器） -
<dialog>必须已通过showModal()或show()打开（open属性存在但未调用方法无效） - 表单内至少有一个
button[type="submit"]或回车触发的可提交控件 - 不能同时设置
onsubmit阻止默认行为（如event.preventDefault()），否则自动关闭逻辑被截断
正确结构示例：
立即学习“前端免费学习笔记（深入）”；
<dialog id="myDialog">
<form method="dialog">
<input name="query" required>
<button type="submit">确认</button>
<button type="button" onclick="this.closest('dialog').close()">取消</button>
</form>
</dialog>
提交后如何获取返回值？
点击 submit 按钮后，<dialog> 会自动关闭，同时把表单中所有 name 属性的字段序列化为一个 FormData 对象，并赋给 dialog.returnValue。你得在调用 showModal() 后用 await 捕获它：
const dialog = document.getElementById('myDialog');
dialog.showModal();
const result = await dialog.returnValue; // 注意：这里 result 是 FormData 实例
console.log(Object.fromEntries(result)); // { query: "hello" }
注意点：
-
dialog.returnValue在关闭前是undefined，关闭后才被赋值 - 如果表单里有多个同名
name（如多选 checkbox），FormData会保留全部，Object.fromEntries()只取最后一个——需要手动遍历result.getAll('name') - 若想传简单字符串（如
"cancel"），可用<button formmethod="dialog" value="cancel">取消</button>，此时returnValue是字符串而非FormData
为什么点了 submit 却没关闭？常见陷阱
最常踩的坑不是语法错，而是运行时上下文失效：
-
<dialog>没调用showModal()或show()—— 仅靠open属性无法激活method="dialog"逻辑 - 表单被 JS 动态插入到
<dialog>内，但插入时<dialog>已打开 → 浏览器不识别新表单的method="dialog"，需重新调用showModal() - 用了
event.preventDefault()或return false在表单上——这直接废掉浏览器原生的 dialog 提交流程 - 在非 Chromium 内核浏览器（如旧版 Safari）中，
method="dialog"完全不支持，会退化成普通表单提交 → 必须加降级处理（如监听close事件 + 手动清空）
兼容性差是硬伤：目前仅 Chrome 97+、Edge 97+、Firefox 112+ 原生支持 method="dialog"；Safari 仍无计划支持。生产环境务必准备 fallback。
