dialog 元素不自动收集表单数据，需手动绑定事件并读取子元素值；触发按钮应设 type="button" 或阻止默认行为；关闭后需主动清空或初始化 input 值。
dialog 元素本身不自动收集或传递表单数据，必须手动绑定事件并读取子元素值 —— 这是绝大多数人卡住的第一步。
dialog 打开后无法获取 input 值？检查是否漏了 event.preventDefault()
点击 触发 showModal() 时，若该按钮在表单内且未阻止默认行为，页面可能意外提交或刷新，导致 input 值丢失或 DOM 重置。
- 确保触发按钮不在
内，或显式添加type="button" - 若用
包裹 dialog 内容，submit 事件需event.preventDefault()，再手动提取数据 - dialog 关闭后 DOM 仍存在，input 值不会自动清空 —— 需要你主动处理
如何监听 dialog 关闭并读取用户输入？
不能依赖 close 事件直接拿值（此时 input 可能还没失焦），应在确认按钮点击时立即读取，或在 close 事件中同步抓取。
dialog.returnValue 的作用和常见误用
returnValue 是 dialog 的可写属性，用于在关闭时携带一个字符串标识（如 'confirm'、'cancel'），但它**不包含表单数据**，只用于区分关闭路径。
立即学习“前端免费学习笔记（深入）”；
- 调用
dialog.close('confirm')后，dialog.returnValue才是'confirm' - 点击 backdrop 或按 ESC 关闭时，
returnValue为空字符串，不可靠作为数据依据 - 不要试图把对象或 JSON 字符串赋给
returnValue—— 它只接受字符串，且长度无保障 - 真正要传的数据，始终得从 input/select/textarea 等元素上
.value或.checked拿
兼容性与 polyfill 注意点
Firefox 98+、Chrome 97+、Edge 97+ 原生支持 ；Safari 目前（2024）仍不支持，必须用 polyfill（如 @github/details-dialog）或降级方案。
- polyfill 通常不完全模拟
returnValue行为，建议统一用自定义事件或回调函数传递数据 - 原生 dialog 的
showModal()会阻塞后续 JS 执行，但**不阻塞用户对其他 tab 的操作** —— 别指望它像 alert() 那样“暂停整个浏览器” - 若需跨浏览器稳定取值，推荐封装一个函数：
getDialogData(dialogEl)，内部遍历dialogEl.querySelectorAll('input, select, textarea')统一收集
真正麻烦的不是怎么取值，而是忘记 dialog 关闭后 input 还在 DOM 里躺着 —— 下次再打开时，上次的脏数据还在那里，而你没做初始化。
