dialog元素默认隐藏，需用showmodal()或show()触发显示；关闭须调用close()，模态遮罩点击不自动关闭；样式需重置，兼容性需运行时检测，焦点管理不可忽略。
dialog 元素必须配合 showModal() 或 show() 才会显示
直接写 <dialog>内容</dialog> 不会自动出现，它默认是隐藏的（display: none）。浏览器不会像 <div> 那样渲染它。必须用 JavaScript 调用方法触发：
<ul>
<li>
<code>dialog.showModal()：显示模态对话框（带背景遮罩、焦点锁定、Esc 关闭）
dialog.show()：显示非模态对话框（无遮罩、不锁定焦点、Esc 不关闭）DOMContentLoaded 里或按钮点击事件中关闭 dialog 必须显式调用 close()，不能只靠点击遮罩
模态 dialog 的遮罩层（backdrop）点击默认不关闭——这是和很多 JS 弹窗库的关键区别。必须手动绑定事件：
- 监听
click在遮罩上？不行，<dialog></dialog>的 backdrop 没有独立 DOM 节点，无法直接绑定 - 正确做法：监听
dialog自身的click，但要排除内部内容区域（否则点按钮也会关） - 更稳妥的是：只给「取消」按钮加
dialog.close()，再监听keydown捕获 Esc 键 - 注意：
close()触发close事件，但不会触发click；cancel事件只在 Esc 或点击 backdrop 时触发（仅showModal()）
dialog 的样式重置很必要，尤其 margin 和 padding
不同浏览器对 <dialog></dialog> 的默认样式差异大，Chrome 有 16px margin，Safari 可能偏移或无圆角。不重置容易布局错乱：
- 至少设置：
dialog { margin: 0; padding: 1em; border: none; border-radius: 8px; } - 背景和文字色务必声明，否则可能继承父级导致不可读（如深色背景+深色文字）
- 想居中？
dialog::backdrop可设背景色，但不支持 z-index；真正控制层级得靠dialog自身的z-index - 移动端需加
max-width: 90vw; max-height: 90vh;防止溢出
IE 和旧版 Safari 不支持 dialog，降级方案不能只靠 CSS
<dialog></dialog> 在 Safari 15.4+、Chrome 37+、Firefox 98+ 支持，但 iOS Safari 直到 16.4 才完整支持 showModal()。单纯用 @supports (display: dialog) 不够：
-
@supports只能检测语法支持，不能判断showModal()方法是否存在 - 安全做法：运行时检测
typeof HTMLDialogElement !== 'undefined' && 'showModal' in HTMLDialogElement.prototype - 降级时不要只隐藏原生 dialog 并 show 一个 div——要重新管理焦点、Esc 键、Backdrop 遮罩逻辑，复杂度接近手写弹窗
- 如果项目需兼容 iOS 15 或 Android Webview 旧版本，建议直接用成熟库（如
dialog-polyfill），它会自动 patch 原生 API
showModal() 会把焦点移到 dialog 内第一个可聚焦元素，但如果内部没有 button、input 等，焦点可能落到 body，导致键盘操作失效。记得检查 tabindex 或加 autofocus。
