dialog.open仅反映open属性值，不代表弹窗已显示；真正激活需调用showmodal()或show()，判断可见需同时满足open为true、getboundingclientrect().width>0且焦点在dialog内。
dialog.open 属性只能反映 open 特性，不能代表“已激活”状态
很多人以为 dialog.open 为 true 就说明弹窗正显示着，但这是错觉。它只是同步 HTML 的 open 属性值，而原生 <dialog></dialog> 的“真正打开”必须靠 showModal() 或 show() 触发——open 属性本身不触发渲染、不加 backdrop、不锁焦点。
比如你写 <dialog open></dialog>，dialog.open 是 true，但它在 DOM 中仍处于 display: none（甚至不参与布局），getBoundingClientRect() 返回全零，offsetParent 为 null。
-
dialog.open === true只表示“有 open 属性”，不是“可见”或“模态激活” - 手动设
dialog.open = true不会触发任何 UI 变化，等同于白写 - 调用
showModal()后，dialog.open会自动变为true；但反过来不成立
判断是否真正可见且模态激活：用 getBoundingClientRect() + document.activeElement
要确认 dialog 是否“真正在屏幕上呈现并处于模态状态”，得组合两个信号：
-
dialog.open === true（基础前提） -
dialog.getBoundingClientRect().width > 0（排除 display:none / 未渲染） -
document.activeElement === dialog || dialog.contains(document.activeElement)（检查焦点是否落在它内部或自身）
三者同时满足，基本可断定它已被 showModal() 激活且用户可见。注意 Safari 中若父容器有 transform 或 will-change，getBoundingClientRect() 可能失准，此时需 fallback 到 dialog.offsetParent !== null 辅助判断。
监听 open/closed 状态变化要用事件，而不是轮询
open 属性变化不会触发事件，但 showModal() 和 close() 会分别触发 toggle 和 close 事件（注意：没有 open 事件）。
- 监听打开：目前无标准事件，只能在调用
showModal()后立即执行逻辑，或用MutationObserver监听open属性变更（不推荐，性能差） - 监听关闭：必须写
dialog.addEventListener('close', () => { /* 关闭后清理 */ })，否则按 Esc、点 backdrop、调用close()都收不到通知 -
dialog.returnValue在关闭后才可读取，但 Safari（v17.6 及之前）始终返回空字符串，不可依赖传值
Safari 兼容陷阱：e.target === dialog 在 backdrop 点击中不可靠
判断 dialog 是否“当前被用户操作中”，常想靠点击事件反推——但这在 Safari 中极易误判。Safari 15.4–17.6 的 backdrop 不是一个真实可交互的 DOM 节点，e.target 很可能永远是 body，哪怕你点了灰层正中央。
所以别写：
dialog.addEventListener('click', e => {
if (e.target === dialog) dialog.close(); // Safari 下几乎永不触发
});
正确做法是加坐标 fallback：
dialog.addEventListener('click', e => {
const rect = dialog.getBoundingClientRect();
if (
e.target === dialog ||
(e.clientX rect.right ||
e.clientY rect.bottom)
) {
dialog.close();
}
});
这个判断逻辑才是真正跨浏览器可靠的“点击外部关闭”。真正难的从来不是怎么打开，而是怎么让 Safari 用户也觉得弹窗“跟手”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
