<dialog open>仅控制可见性，不触发模态行为；必须用showModal()配合JS确保焦点锁定、Esc响应、遮罩关闭及可访问性。
dialog 的 open 属性只控制“是否可见”，不等于“已激活模态”
写了 <dialog open> 页面一加载就看到内容，不代表它是个可用的模态框。它只是绕过 JS、强制让元素从 display: none 变成 display: block，但没触发任何模态行为：没有灰色遮罩、背景可滚动、Tab 键能穿出、Esc 按下无反应、close 事件也不触发。
常见错误现象包括：
- 用户反复按 Esc 却没关闭，页面产生卡顿感
- 点击对话框外区域，背景仍可点击或滚动，导致误操作
- 屏幕阅读器读不到完整语义，因为缺少
aria-modal="true"和焦点锁定 - iOS Safari（16.3 及更早）会把
<dialog open>当普通<div>渲染，既不居中也不限制缩放
为什么不能靠 CSS 强行显示 <dialog>？
给 <dialog> 写 display: block 或 visibility: visible 完全无效。浏览器对 <dialog> 的渲染逻辑是硬编码的：open 属性或 showModal()/show() 调用是唯二触发渲染的入口。
即使你加 !important，getComputedStyle(dialog).display 仍返回 none（除非已设置 open）。试图用 position: fixed + z-index 手动模拟，会破坏 showModal() 后的自动居中逻辑，且 Safari 中可能引发子元素渲染异常。
立即学习“前端免费学习笔记（深入）”；
真要“默认弹窗”，JS 是绕不开的，且时机很关键
想一进页面就弹出带遮罩、锁焦点、支持 Esc 的对话框，必须用 JS。但直接在 <script> 标签里写 dialog.showModal() 极易失败——DOM 还没挂载完，document.getElementById("myDialog") 会返回 null。
正确做法：
- 把
<script>放在</body>前 - 或包裹在
DOMContentLoaded事件中 - 确保
<dialog>是<body>的直接子级（否则 Safari 可能不居中） - 别手动设
dialog.open = true或dialog.style.display = 'block'，这绕过原生焦点管理，Tab 键直接失效
点击遮罩关闭不了？得自己监听并判断 e.target === dialog
<dialog> 的 ::backdrop 默认不可点击，也不冒泡事件——规范里就没定义“点背景关窗”，这不是 bug，是设计如此。
正确监听方式：
dialog.addEventListener('click', e => {
if (e.target === dialog) dialog.close();
});
注意：
- Safari 15.4+ 才支持
e.target === dialog判断 backdrop；旧版 Safari 或某些 WebView 中，e.target可能始终是<body>，需 fallback 到坐标检测或dialog.hasAttribute('open') + event.composedPath()辅助判断 - 别写
dialog.addEventListener('click', () => dialog.close())——这会让点击内部按钮也关闭对话框 - Safari 中
dialog::backdrop样式支持不全，background: rgba(0,0,0,0.5)可能失效，建议额外加一层<div class="backdrop">模拟
真正难的不是让 dialog 显示出来，而是让它在各种浏览器、各种交互路径下都表现一致——尤其是焦点管理、Esc 响应、遮罩点击和可访问性语义，这些没法靠 open 属性一步到位，必须靠 JS 补全，且补得恰到好处。
