dialog.open是只读属性，不能赋值控制开关；必须用showModal()（模态）、show()（非模态）和close()方法控制显隐，且close()传参后需在close事件中读取returnValue。
dialog的open属性不是布尔值，别直接赋true/false
很多人以为dialog.open像input.disabled一样是可读写的布尔属性，实际不是。它是个只读属性，反映当前是否处于打开状态，不能通过dialog.open = true来控制开关——这样写不会报错，但完全无效。
正确做法是调用原生方法：show()、showModal()和close()。这三个方法才是控制显示/隐藏的唯一可靠途径。
-
show()：非模态显示（背景可点击，无遮罩） -
showModal()：模态显示（焦点锁定、ESC关闭、背景灰暗） -
close()：关闭对话框（触发close事件，可传参作为返回值）
如何用JS判断dialog当前是否打开
虽然不能写dialog.open = true，但可以安全读取dialog.open来判断状态。它在调用show()或showModal()后变为true，调用close()后变为false。
注意：页面加载时即使HTML里写了open属性，JS中首次读取dialog.open也是true；但如果没渲染完成就查，可能返回false（比如DOM未挂载完就执行脚本）。
立即学习“前端免费学习笔记（深入）”；
- 推荐在
DOMContentLoaded后检查，或监听dialog的toggle事件 - 不要依赖
getComputedStyle(dialog).display，因为dialog默认display: none，即使open为true也未必能准确反映
close()传参怎么在JS里拿到返回值
dialog.close()支持传一个字符串或任意值作为“关闭理由”，这个值会成为dialog元素的returnValue属性，并在close事件中可用。
myDialog.close('confirmed');
监听时要这样取：
myDialog.addEventListener('close', () => {
console.log(myDialog.returnValue); // 'confirmed'
});
-
returnValue只在close事件触发后才有效，show()或showModal()不会重置它 - 如果用户按ESC关闭，
returnValue为空字符串；点击外部遮罩关闭，也是空字符串 - 务必在
close事件回调里读取，否则可能拿到旧值
兼容性与fallback要注意什么
dialog在Chrome 94+、Firefox 97+、Safari 15.4+才原生支持。Edge基于Chromium所以没问题，但旧版Safari必须降级处理。
检测方式很简单：
if (!('showModal' in HTMLDialogElement.prototype)) {
// 加载polyfill或用div模拟
}
- 不要只靠
document.createElement('dialog').open检测，有些旧浏览器会创建元素但不支持方法 - polyfill如
@ungap/dialog能补全API，但不模拟样式，需额外加CSS重置 - 用
display: none手动控制可见性时，记得同步管理inert属性和焦点逻辑，否则可访问性会出问题
