dialog不能直接替代alert，因其非阻塞、无自动聚焦、不返回值，需手动挂载到body、监听close事件读取returnvalue，并补全::backdrop样式。
dialog 标签不能直接替代 alert()——它不阻塞脚本，也不自动聚焦、不自带按钮逻辑，更不会返回布尔值。想用它“一键替换”，反而会引发交互断裂和逻辑错乱。
dialog 为什么不能简单调用就完事
-
alert()是同步阻塞的：JS 执行停在那句，等用户点确定才继续；dialog.showModal()是异步的，调用后 JS 立刻往下走 -
alert()没有 DOM 节点，无法加样式、插 HTML、绑定事件；dialog是真实元素，必须手动写结构、绑关闭、读返回值 -
alert("xxx")返回undefined；dialog.close("ok")后，得靠监听close事件再读dialog.returnValue，且这个值只在关闭后有效一次
你真正需要的，不是“怎么把 alert 换成 dialog”，而是“怎么用 dialog 实现一个非阻塞、可定制、能带回结果的提示流程”。
dialog 必须挂载在
这是 Safari 和部分 Chrome 版本里最常失效的原因：
-
dialog元素必须是的直接子元素，不能嵌套在<div id="app">、<code><main></main>或 Vue/React 根容器里 - 错误写法：
<div id="root"><dialog>...</dialog></div>
- 正确写法：
<dialog id="alertDialog">...</dialog><div id="app"></div>
- 若用框架（如 React/Vue），需用
createPortal或document.body.appendChild()动态挂载，否则 backdrop 不渲染、Esc 不响应、点击外部不关闭 - 调用
dialog.close("confirmed")→ 关闭后，dialog.returnValue变为"confirmed" - 用户按 Esc 或点 backdrop 关闭 →
dialog.returnValue是空字符串""，不是"canceled" - 必须在
dialog.addEventListener('close', ...)回调里读，且只能读一次；之后再访问就是上一次的残留值
dialog.returnValue 怎么安全读取
dialog 关闭后，返回值不是事件参数，也不是属性实时更新的值：
常见错误写法：
dialog.close("yes"); console.log(dialog.returnValue); // ❌ 还没触发 close 事件，值仍是旧的
正确模式：
dialog.addEventListener('close', () => {<br> const result = dialog.returnValue;<br> if (result === "confirmed") { /* 处理确认 */ }<br> else if (!result) { /* Esc 或 backdrop 关闭 */ }<br>});<br>dialog.showModal();
Safari 的 ::backdrop 必须手动补样式
Safari 15.3–16.x 对 dialog::backdrop 的支持极弱：默认不渲染、无遮罩、点击外部无效。
必须加全局 CSS（不能 scoped，不能在 shadow DOM 里）：
dialog::backdrop {<br> background: rgba(0, 0, 0, 0.5);<br>}
如果项目用 CSS-in-JS 或组件 scoped 样式，这行规则会被隔离失效——得注入到 的 <style></style> 标签里，或确保选择器全局生效。
dialog 的价值不在“替代 alert”，而在于它把焦点管理、键盘交互（Esc）、语义化、可访问性都内置了；但代价是，你不能再假装它是函数调用，得把它当做一个需要显式生命周期控制的真实 DOM 组件来对待。
