原生 标签仅设 open 属性仅初始显示，无模态行为；必须用 showmodal() 激活模态栈，close() 关闭并监听 close 事件清理，safari 对 backdrop 支持差需降级处理。
原生 <dialog></dialog> 标签不会因写上 open 属性就“真正可用”——它只是初始显示，不带模态行为、无 backdrop、不锁焦点、不响应 Esc。真正常用的开启方式只有 showModal()，关闭必须靠 close()，且需手动补全关键交互逻辑。
为什么只加 open 属性弹窗不工作
open 属性仅控制初始可见性（类似 CSS display: block），它绕过了浏览器对 <dialog></dialog> 的模态状态管理：没有灰色遮罩、背景可点击滚动、Tab 键能穿出、Esc 无效、close 事件不触发。这本质上是个“假弹窗”，和 <div hidden> + <code>hidden=false 几乎没区别。
- 常见错误：
<dialog open><p>内容</p></dialog>—— 页面加载后能看到内容，但点背景、按 Esc 都无反应 -
showModal()才会激活浏览器内置模态栈，自动设置open属性、注入::backdrop、接管焦点流 - 若 DOM 尚未就绪就调用
showModal()，会报Cannot read property 'showModal' of null
关闭 dialog 必须显式调用 close()，且要监听 close 事件
close() 是唯一标准关闭入口，但它不自动绑定任何用户行为。用户按 Esc 或点 backdrop 关闭时，close() 会被浏览器内部调用并触发 close 事件；但如果你只在按钮里写 onclick="dialog.close()"，就漏掉了另外两种关闭路径。
- 必须统一监听
dialog.addEventListener('close', handler)做清理，比如重置表单、恢复按钮状态、发埋点 -
dialog.returnValue在close('confirmed')后才可读，未传参时是空字符串''，不是undefined，别用== null判断 - 不要用
dialog.open = false关闭——它不移除 backdrop，也不触发close事件，视觉上“关了”，但逻辑上仍是模态状态
点击 backdrop 关闭在 Safari 中不可靠，得降级处理
Chrome/Edge 支持 e.target === dialog 判断是否点在 backdrop 上，但 Safari（截至 17.6）根本不把 backdrop 暴露为事件目标，e.target 永远是 或其他元素。这意味着纯原生方案在 Safari 里点遮罩完全没反应。
- 稳妥做法：放弃依赖
dialog::backdrop做交互判断，改用包裹一层透明<div class="backdrop"> 手动控制显隐和点击 <li>或做支持检测：<code>if ('showModal' in HTMLDialogElement.prototype)，不支持时 fallback 到自定义 div 弹窗 - 别在
<dialog></dialog>内用position: fixed子元素——Safari 渲染异常，按钮可能消失 - 必须确保
<dialog></dialog>是直接子元素；嵌套在<main></main>、<div style="transform: scale(1)"> 或 <code>position: relative容器里，会导致居中错位、backdrop 不渲染 - 打开后建议立即
dialog.querySelector('input, button')?.focus()，避免 Safari 首次聚焦失败 - 关闭后手动
document.body.focus()，否则焦点可能卡在空白处，影响后续 tab 导航
focus 管理和父容器限制容易被忽略
<dialog></dialog> 默认聚焦第一个可聚焦子元素（如 <button></button>），但如果内部没写 autofocus，又没手动 focus()，首次打开时焦点可能落在 ，导致键盘操作失效、屏幕阅读器无法识别。
