dialog.close() 不支持传入复杂数据，必须先赋值 dialog.returnValue 再调用无参 close()；关闭后通过 modal.returnValue 读取，注意 undefined 检查与浏览器兼容性。
dialog.close() 无法直接传入复杂数据
dialog.close() 方法只接受一个可选的 returnValue 参数，但它在规范中被定义为仅支持 DOMString 类型（即字符串）。即使你传入对象、数组或数字，浏览器也会自动调用 .toString() 转换，导致 {id: 1, name: "foo"} 变成 "[object Object]"，原始结构完全丢失。
正确做法：用 dialog.returnValue 先赋值再 close
必须在调用 close() 前，手动给 dialog.returnValue 属性赋值。这个属性本身没有类型限制，可以存任意 JS 值（包括对象、数组、null、undefined），关闭后仍可读取。
实操建议：
- 确保
<dialog>已通过showModal()或show()打开，否则returnValue不会持久化 - 不要依赖
close("some string")的参数——它只覆盖returnValue字符串化结果，且不可逆 - 推荐统一使用显式赋值 + 无参
close()，避免歧义
const modal = document.querySelector('dialog');
modal.returnValue = { id: 42, tags: ['urgent', 'ui'], meta: null };
modal.close(); // 不传参
监听关闭后如何安全读取 returnValue
close 事件本身不携带返回值，必须从 event.target.returnValue 或直接从 dialog 元素上读取。注意：如果用户按 Esc 或点击 backdrop 关闭，returnValue 保持为 undefined（除非你提前设过默认值）。
立即学习“前端免费学习笔记（深入）”；
常见错误场景：
- 在
close事件回调里读event.returnValue—— 这个属性不存在，是无效写法 - 未检查
modal.returnValue === undefined就直接解构，导致运行时错误 - 在异步操作（如 fetch 后）才设置
returnValue，但此时 dialog 可能已被关闭，赋值无效
modal.addEventListener('close', () => {
const result = modal.returnValue; // ✅ 正确读取位置
if (result !== undefined) {
console.log('收到数据:', result.id, result.tags);
} else {
console.log('用户取消或意外关闭');
}
});
兼容性与 polyfill 注意点
原生 <dialog> 的 returnValue 在 Chrome 97+、Edge 97+ 支持良好，Firefox 从 112 开始支持（需启用 dom.dialog_element.enabled），Safari 仍不支持（截至 Safari 17.5）。若需兼容旧浏览器：
- 不要依赖 polyfill 对
returnValue的模拟——多数 polyfill（如 dialog-polyfill）只实现显示/隐藏逻辑，不支持任意类型返回值 - 更可靠的方式是改用自定义事件 + 外部状态管理，例如：
modal.dispatchEvent(new CustomEvent('submit', { detail: myData })) - 如果坚持用原生 dialog，务必做
'returnValue' in HTMLDialogElement.prototype检测，并降级到 hidden input 或全局变量暂存
复杂数据传递这件事，核心就一条：别信 close() 的参数，老老实实赋值 dialog.returnValue 再关。容易被忽略的是——它不是“传参”，而是“存状态”，而且这个状态只在你主动设的时候才存在。
