在safari 15.3及更早、ie、部分安卓webview中完全无效，必须调用showmodal()才能激活模态逻辑；其兼容性应检测'showmodal' in htmldialogelement.prototype，且dialog.open为只读字符串属性，恒为空字符串，不可用于状态判断。
dialog.open 属性在 Safari 和旧版浏览器中根本不起作用
写了 <dialog open></dialog>，Safari 15.3 及更早版本、所有 IE、部分安卓 WebView 完全忽略该属性，页面上什么都不会显示。这不是 CSS 没生效，是浏览器压根不解析 <dialog></dialog> 的模态逻辑——open 在这些环境里只是个无意义的字符串属性，既不触发渲染，也不激活 backdrop 或焦点管理。
必须用 showModal() 才能真正“启动” dialog
showModal() 是唯一被现代标准（Chrome 97+、Firefox 99+、Safari 15.4+）一致支持的激活方式。它会：强制渲染元素、注入 dialog::backdrop、锁定 Tab 焦点、响应 Esc 键、自动聚焦第一个可聚焦子元素。
常见错误操作包括：
- 只设
open属性，不调showModal()→ 弹窗不可见 - 调用
dialog.show()→ 无遮罩、不锁背景、Esc 不关闭，和普通 div 几乎一样 - 动态插入
<dialog></dialog>后立刻showModal()→ 报Cannot read property 'showModal' of null，因为 DOM 还没挂载完成
稳妥写法：
const modal = document.getElementById('myDialog');
if (modal && 'showModal' in modal) {
modal.showModal();
} else {
// 降级：手动显示 + 模拟遮罩 + 焦点控制
modal.style.display = 'block';
document.body.style.overflow = 'hidden';
}
检测兼容性不能只看 <dialog></dialog> 标签是否存在
<dialog></dialog> 标签本身可能被解析（不报错），但 showModal() 方法未必存在。正确检测方式是：
- ✅
'showModal' in HTMLDialogElement.prototype—— 最可靠 - ❌
document.createElement('dialog') instanceof HTMLDialogElement—— Safari 15.3 返回 true，但showModal不存在 - ❌
typeof document.querySelector('dialog').showModal === 'function'—— 元素可能为 null，且未挂载时取不到实例
兼容性兜底建议：
- 静态 HTML 中先写
<dialog id="xxx" hidden></dialog>，避免初始渲染干扰布局 - JS 中统一用
getElementById获取，再判断方法是否存在 - 降级方案别只改
display，记得同步处理document.body.style.overflow和tabindex管理
open 属性的真假值容易误判
dialog.open 是只读属性，类型为字符串（不是布尔值）。即使弹窗已通过 showModal() 打开，dialog.open 的值也是 ''（空字符串），而非 true。直接写 if (dialog.open) 会恒为 true；写 if (dialog.open === true) 则恒为 false。
正确判断方式：
- ✅
dialog.hasAttribute('open')—— 检查是否声明了open属性（仅适用于初始化状态） - ✅
dialog.open !== ''—— 实际运行中更稳定（但注意：调用close()后该值不变） - ✅ 监听
close事件，配合布尔状态变量管理真实打开/关闭逻辑
最易被忽略的一点：无论你用 showModal() 还是 show()，只要没调 close()，dialog.open 就一直为 '' —— 它不是实时反映可见状态的“开关”，只是初始化标记。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
