dialog标签默认不渲染，必须调用showmodal()或show()才能激活；需确保其为body直系子元素、避免干扰样式、手动设置backdrop样式，并运行时检测api支持以降级。
dialog标签写了却看不到弹窗？必须调用showModal()才激活
只写<dialog></dialog>结构，页面上什么都不会出现——这不是 bug，是设计如此。<dialog></dialog>默认不渲染、不占布局、getBoundingClientRect()返回空值，它本质上是个“惰性容器”，不是隐藏的<div>。常见错误是复制完 HTML 就以为能用，结果上线才发现完全没反应。
<p>必须显式调用 JavaScript 方法才能触发渲染和模态行为：</p>
<ul>
<li>
<code>dialog.showModal()：启用完整模态链路（遮罩、焦点锁定、Esc 关闭、背景交互禁用）
dialog.show()：仅显示浮层（无遮罩、不锁焦点、Esc 无效），适合轻量提示两者都要求元素已挂载到 DOM：document.getElementById('my-dialog')不能为 null，否则报 Cannot read property 'showModal' of null。推荐在 DOMContentLoaded 事件中初始化，或绑定在按钮点击里，避免提前执行。
点击灰色遮罩关闭弹窗为什么经常失效
原生 <dialog></dialog> 的 ::backdrop 不是真实 DOM 节点，浏览器对点击它的事件冒泡处理差异极大：Chrome/Edge 可靠，Safari 15.4–17.6 基本不可靠，Firefox 根本不触发。直接监听 click 到 dialog 元素上，再判断 e.target === dialog 是目前最兼容的做法。
示例代码：
const dlg = document.getElementById('my-dialog');
dlg.addEventListener('click', (e) => {
if (e.target === dlg) dlg.close();
});
注意：showModal() 才会生成 backdrop；show() 没有 backdrop，这段逻辑无效。别指望靠 oncancel 或 preventDefault() 控制关闭行为——它会同时禁掉 Esc 和 backdrop 点击，得不偿失。
样式和 DOM 结构不合规，会导致 backdrop 错位、焦点逃逸
<dialog></dialog> 的模态行为强依赖浏览器原生机制，一旦结构或样式违规，整个功能就断裂。最容易被忽略的硬性前提有三个：
- 必须是
的直接子元素（不能嵌套在<div class="app"> 或 <code>shadow DOM里） - 父容器不能有
transform、position: relative、overflow: hidden，否则 Safari 中 backdrop 被裁剪或弹窗偏移 - 必须手动声明
dialog::backdrop { background-color: rgba(0, 0, 0, 0.6); }，否则 Chrome/Safari 遮罩极淡甚至不可见，Firefox 默认不渲染 backdrop
另外，dialog 自身不能设 position: absolute 或 transform，否则 backdrop 错位、Esc 失效。内部至少要有一个可聚焦元素（如 <button></button>），否则 showModal() 无法锁定焦点，键盘用户会被卡住。
兼容性检测不能只靠 @supports，iOS 16.4 才真正支持 showModal()
@supports (display: dialog) 只能检测语法支持，无法判断 showModal() 是否可用。Safari 对 <dialog></dialog> 的支持长期滞后：showModal() 直到 iOS 16.4 和 macOS Ventura 13.3 才正式支持；更早版本调用会静默失败（无报错，但不显示）。而 show() 在 Safari 中始终不可用，会抛 DOMException: The element does not support showing.
安全检测方式是运行时判断：
if (typeof HTMLDialogElement !== 'undefined' && 'showModal' in HTMLDialogElement.prototype) {
// 可以放心用 showModal()
} else {
// 降级方案：用 position: fixed + aria-modal="true" 的 div 模拟
}
降级不是简单地 display: none 原生 dialog 再 show 一个 div——你得自己补全焦点管理、Esc 监听、backdrop 渲染、returnValue 传递等逻辑，复杂度接近手写弹窗库。如果项目需兼容 iOS 15 或旧版 Android Webview，建议直接用 dialog-polyfill 或成熟 UI 库。
