dialog标签无method属性，仅form支持method="dialog"且须嵌套在showmodal()打开的dialog内；form提交才自动关闭dialog并设returnvalue为按钮value值。
dialog 标签本身**没有 method 属性**，写上去完全无效，浏览器会直接忽略。真正支持 method="dialog" 的是 form 元素——而且它必须嵌套在已通过 showModal() 打开的 dialog 内部。
为什么 form[method="dialog"] 提交后 dialog 没关闭
最常见原因就两个：dialog 没调用 showModal()，或 form 不在 dialog 的 DOM 子树里。
-
dialog必须已激活：仅加open属性或手动设dialog.open = true不行，showModal()是唯一触发模态行为的入口 -
form必须是dialog的后代（哪怕隔了几层div也行），但不能被移出、不能用innerHTML动态插入后再挂载——DOM 关系断裂即失效 - 按钮必须是
type="submit"；<input type="submit">可用，但<button></button>无type或type="button"不触发提交 - 表单不能同时声明
action或method="post"等其他 method——这些会被忽略，但若逻辑混乱（比如同时绑了onsubmit并return false），会阻断关闭行为
如何用 form[method="dialog"] 实现免 JS 关闭
这是唯一无需任何脚本就能关闭对话框的原生路径，核心是利用浏览器对 form[method="dialog"] 的硬编码行为：提交时自动调用最近的已打开 dialog.close()，并把 submit 按钮的 value 赋给 dialog.returnValue。
- 结构必须严格满足：
<dialog><form method="dialog"><button type="submit" value="confirm">确定</button></form></dialog> - 按钮的
value属性决定返回值：value="cancel"→dialog.returnValue === "cancel"（永远是字符串） - 不支持自动序列化表单字段；想传数据，必须手动监听
submit、e.preventDefault()、收集FormData、再dialog.close(JSON.stringify(data)) - 该行为只对
showModal()有效；show()打开的 dialog 完全不响应method="dialog"
dialog 必须挂在 body 下，否则 backdrop 失效
这不是样式问题，而是浏览器渲染限制：::backdrop 伪元素在 Safari 和部分 Chrome 中，只有当 dialog 是 body 的**直接子元素**时才可靠生成。
- 错误结构：
<main><dialog></dialog></main>或<div class="app"><dialog></dialog></div>→ backdrop 缺失，点击背景无反应 - 正确结构：
<dialog id="my-dialog"></dialog>，JS 中用document.body.appendChild(dialog)动态挂载也行 - 框架用户注意：React/Vue 组件内直接写
<dialog></dialog>很可能被包裹进 div，需用createPortal或teleport手动挂到document.body - 即使 backdrop 显示了，点击关闭仍需手动监听：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); })，Safari 15.4–16.3 还得 fallback 到坐标判断
最容易被忽略的点：返回值永远是字符串，哪怕你传的是 null、0 或对象；dialog.returnValue 是只读属性，且只在 close 事件后才稳定可读——别在 submit 事件里试图读它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
