dialog默认不显示因其是惰性渲染元素，浏览器设display: none且不参与布局；必须调用showmodal()激活模态行为，safari要求其为body直接子元素才能渲染backdrop，否则遮罩失效。
dialog标签为什么默认不显示
因为dialog不是普通容器，它是一个“惰性渲染”的语义化元素：浏览器默认将其设为display: none，且不参与文档流布局。写<dialog>内容</dialog>就像写<template></template>——DOM里存在，但视觉上完全不可见。这和<div>一插入就渲染、靠CSS控制显隐的逻辑完全不同。
<p>常见错误是只加<code>open属性却没调用showModal()，结果在Safari里遮罩不出现、Esc无响应；或者脚本提前执行，document.querySelector('dialog')返回null，直接报错Cannot read property 'showModal' of null。
- 必须用
showModal()触发，才能激活模态行为（焦点锁定、backdrop、Esc关闭） -
show()只是非模态可见，等同于手动设open，没遮罩、不锁背景 - 直接写
<dialog open></dialog>虽能初始显示，但Safari（v17.6前）不认这个open为“模态激活”，仍无backdrop
点击遮罩关闭必须手写逻辑，不能依赖默认行为
原生dialog的::backdrop是伪元素，不是真实DOM节点——它不能绑定事件、不能读尺寸、也不能用e.target === dialog在Safari里可靠判断点击位置。Chrome/Edge偶尔能蒙对，但Safari（截至v17.6）中该判断基本失效，点遮罩常被识别成点内部按钮。
正确做法是监听dialog自身的click事件，再结合坐标计算：
dialog.addEventListener('click', (e) => {
const rect = dialog.getBoundingClientRect();
if (
e.clientX rect.right ||
e.clientY rect.bottom
) {
dialog.close();
}
});
- 别给
dialog::backdrop写click监听——语法合法但永远不触发 - 禁用
stopPropagation()或preventDefault()，否则破坏屏幕阅读器和Esc行为 - 如果只要“点按钮关”，就别监听遮罩，专注绑定
close()到取消按钮
Safari对DOM结构有硬性限制
Safari（v17.6及更早）只在dialog是的**直接子元素**时，才生成并渲染::backdrop。嵌套在<div id="app">、<code><main></main>甚至<section></section>里，遮罩层直接消失，用户点击空白处无响应，键盘Esc也无效——这不是样式问题，是浏览器解析规则。
- 动态插入时必须用
document.body.appendChild(dialogEl)，别插进React/Vue根节点 - 检查DevTools：确认
dialog父节点确实是，不是<div class="root"> <li>父级若有<code>transform、will-change或overflow: hidden，会导致弹窗偏移或被裁剪，尤其在iOS Safari上 - 简单场景（单个弹窗、可控DOM结构）优先用
dialog，省心且可访问性原生达标 - 复杂场景（多层嵌套、动态挂载、需精细控制遮罩交互）不如老实用
div+focus-trap+aria-modal - polyfill（如
dialog-polyfill）能补老浏览器，但会引入focus-trap冲突风险，慎用
传统div弹窗反而更可控，但代价是代码量和可访问性
用<div class="modal">模拟弹窗，所有行为都由你控制：定位、遮罩、焦点管理、键盘支持、ARIA属性。但它没有原生语义，必须手动补全<code>aria-modal="true"、aria-labelledby、inert、焦点锁定循环、Esc监听等——漏一项，屏幕阅读器或键盘用户就卡住。
而dialog把这些都内置了，但前提是：你得按它的规则来。一旦违反（比如删open、乱嵌套、误判e.target），它就退化成一个普通div，还带兼容性陷阱。
showModal()，而是让整个页面结构、脚本时机、CSS上下文都配合它——稍有偏差，Safari就静默失败，连错误提示都不给。
