method="dialog" 作用是点击按钮时自动调用父级 <dialog> 的 close() 方法，无需 JavaScript；需满足：dialog 已通过 showModal() 或 show() 显示、按钮为 submit 类型且在 dialog 直接子树内、关闭后可通过 dialog.returnValue 获取按钮 value 值。
dialog 元素里 method="dialog" 是什么作用
它不是表单提交方法，而是告诉浏览器：点击这个 <button> 时，自动调用父级 <dialog> 的 close() 方法，无需写 JS。前提是按钮必须在 <dialog> 内部，且 type="submit"（默认就是 submit）。
为什么点不了、关不掉？常见失效场景
看似加了 method="dialog" 却没反应，大概率踩了这几个坑：
-
<dialog>没调用过showModal()或show()—— 只有被“显示”后，内部的method="dialog"才生效；display: none或未插入 DOM 时无效 - 按钮不在
<dialog>直接子树内 —— 比如套了额外<div>但忘了设role="none"或影响事件冒泡，导致浏览器找不到宿主 dialog - 用了
type="button"—— 必须是type="submit"（显式声明或靠默认值），type="button"会直接忽略method属性 - dialog 被
open属性控制但没调用 JS 显示 —— 仅靠open属性打开的 dialog，method="dialog"仍有效，但需确保元素已渲染完成（避免 Vue/React 中节点异步挂载未就绪）
最简可行示例与关键细节
下面这段 HTML 点击 “Close” 就能关闭 dialog，零 JS：
<dialog id="myDialog">
<p>Hello, world</p>
<form method="dialog">
<button type="submit">Close</button>
</form>
</dialog>
<button onclick="myDialog.showModal()">Open</button>
注意三点：
立即学习“前端免费学习笔记（深入）”；
-
<form method="dialog">是推荐写法 —— 它让整个表单提交行为触发 dialog 关闭，比单个按钮更健壮（支持回车提交） - 按钮必须是
<form>的后代，且type="submit"；<input type="submit">同样有效 - 如果不用
<form>，直接写<button formmethod="dialog">也行，但兼容性略差（Safari 16.4+ 才支持formmethod）
关闭后如何获取按钮值？
当用户点击 method="dialog" 按钮时，dialog 的 close() 会被调用，并把按钮的 value 作为参数传入。所以你可以这样取值：
myDialog.addEventListener('close', () => {
console.log(myDialog.returnValue); // "cancel" / "confirm" / 自定义 value
});
这意味着：<button type="submit" value="confirm">OK</button> 关闭后，myDialog.returnValue === 'confirm'；没设 value 就是空字符串。这个机制常用来区分“确定”和“取消”操作，但要注意：只有通过 method="dialog" 触发的关闭才带值，JS 调用 close() 不带。
别漏掉 returnValue —— 它不会自动绑定到按钮 click 事件，只存在于 dialog 的 close 事件上下文里。
