form[method="dialog"]必须嵌在dialog的直接子元素form中且dialog需调用showModal()才生效；提交后dialog.returnValue为submit按钮的value值（字符串），需监听close事件读取。
form[method="dialog"] 必须嵌在
直接给 <dialog method="dialog"> 加这个属性毫无作用——method 不是 <dialog> 的合法属性，浏览器会静默忽略。真正起效的位置只有一处：<form> 标签上，且它必须是 <dialog> 的**直接子元素**（不能套 <div>、<section> 等中间容器）。否则点击提交按钮，页面照样刷新。
-
<dialog><form method="dialog">…</form></dialog>✅ -
<dialog><div><form method="dialog">…</form></div></dialog>❌（Safari/Chrome 均不触发关闭） -
<form method="dialog"><dialog>…</dialog></form>❌（完全无效）
dialog 必须先调用 showModal()，否则 form[method="dialog"] 静默失败
写了 <dialog open> 或手动设 dialog.open = true，form[method="dialog"] 依然不会关闭对话框。因为 open 属性只控制可见性，不激活模态栈；而 method="dialog" 的自动关闭逻辑，依赖浏览器内部对“已打开的模态 <dialog>”的识别——这只有 showModal() 调用后才成立。
- 脚本需放在
</body>前，或包裹在DOMContentLoaded中，避免Cannot read property 'showModal' of null - 别用
dialog.show()替代：它不加 backdrop，method="dialog"在部分浏览器中也不响应 - 验证是否生效：提交后若页面跳转或刷新，基本可断定
showModal()没成功执行
button[type="submit"] 的 value 决定 dialog.returnValue 的值
form[method="dialog"] 提交后，dialog.returnValue 不是表单数据，而是触发提交的 <button> 或 <input> 的 value 属性值（字符串类型）。想传字段内容，必须手动序列化——method="dialog" 本身不读取 <input>。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<button type="submit" value="confirm">确定</button>→dialog.returnValue === "confirm" -
<button type="submit">确定</button>（无 value）→dialog.returnValue === ""（空字符串，不是 undefined） - 监听
close事件读值：dialog.addEventListener('close', () => console.log(dialog.returnValue))，别在submit里读，此时还没关 - Chrome 125+ 支持
const result = await dialog.showModal()，result即返回值；Safari 目前仍不可靠，别依赖
点击 backdrop 关闭和 form[method="dialog"] 是两套独立机制
别指望 form[method="dialog"] 能接管 backdrop 点击行为——它只响应表单提交。点击灰色遮罩默认什么也不做，这是规范设计，不是 bug。要支持点背景关闭，必须额外写监听逻辑，且要注意 Safari 兼容性陷阱。
立即学习“前端免费学习笔记（深入）”；
- 基础写法：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }) - Safari 15.4–17.6 中
e.target常为body，需 fallback 判断坐标：const rect = dialog.getBoundingClientRect(); if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom) dialog.close(); - 绝对不要写
dialog.addEventListener('click', () => dialog.close())，这会让所有内部点击都关窗 -
::backdrop是伪元素，无法绑定事件，也不能读取状态，样式可用但交互必须作用于<dialog>本身
form[method="dialog"] 还是手动 dialog.close("data")，返回值永远是字符串。传对象、数字、null，都会被强制转成字符串，后续使用时得自己解析或校验。 
