Firefox 旧版不支持 dialog 标签需手动降级：检测 showModal 支持性，fallback 时设 display: block、position: fixed、管理焦点与 overlay；注意 returnValue 行为差异及 autofocus 时机问题。
Firefox 不支持 dialog 标签怎么办
Firefox 直到 98 版本才原生支持 dialog，旧版（尤其是企业内网常见 78–91 ESR）会直接忽略该标签、不渲染、不触发 showModal() 方法，且控制台无报错——这是最危险的情况：你以为它在工作，其实用户看到的是静默失败。
不用 polyfill 库也能解决，关键是把降级逻辑写进 JS 判断里：
- 先用
'showModal' in HTMLDialogElement.prototype检测原生支持 - 不支持时，手动设置
display: block、position: fixed、z-index和焦点管理（focus()+trapTab） - 别依赖
close事件自动清理：降级时要显式移除 overlay 元素或重置open属性
用 dialog 时 Firefox 的 returnValue 行为差异
Firefox 原生 dialog 支持 returnValue，但仅限于通过 close('confirm') 显式传参；而 Chrome/Safari 允许点击 dialog 外部或按 Esc 触发的关闭也携带默认值。这会导致你在监听 close 事件时，在 Firefox 里拿到空字符串，其他浏览器可能是 '' 或 undefined。
稳妥做法是统一用 event.target.returnValue || 'cancel'，而不是直接信任 dialog.returnValue。
立即学习“前端免费学习笔记（深入）”；
-
dialog.close('submit')→event.target.returnValue === 'submit'（全平台一致） - Esc 关闭 → Firefox 返回
''，Chrome 返回undefined，需做空值 fallback - 不要在
open状态下读取dialog.returnValue，它只在关闭后有效
polyfill 选 dialog-polyfill 还是自己手写
dialog-polyfill 是目前最轻量（~3KB gzipped）、维护活跃的方案，但它强制依赖 Custom Elements 和 Shadow DOM，在 Firefox ESR 78–91 上需额外引入 @webcomponents/webcomponentsjs，体积翻倍且有兼容风险。
如果项目已用现代构建工具（Vite/Webpack），推荐条件加载：
- 检测到
!('showModal' in HTMLDialogElement.prototype)时，动态import('dialog-polyfill') - 避免全局污染：用
dialogPolyfill.registerDialog(dialogEl)单例注册，而非dialogPolyfill.forceRegisterDialog() - 若只需基础弹层（无动画、无 backdrop fade），手写 20 行 CSS + JS 更可控，尤其适合嵌入老系统 iframe 场景
Firefox 中 dialog 的 focus 管理陷阱
Firefox 对 dialog 内首个可聚焦元素的自动聚焦（autofocus）支持不稳定，尤其在 showModal() 调用后立即操作 DOM 时容易失效。这不是 bug，而是焦点时机竞争：Firefox 的 modal 栈初始化比 Chrome 慢几毫秒。
绕过方式很简单：
- 不在 HTML 里写
autofocus，改用 JS：dialog.addEventListener('aftertoggle', () => dialog.querySelector('input, button')?.focus()) - 避免在
showModal()后立刻调用focus()，加个setTimeout(() => ..., 0)或用queueMicrotask - 如果 dialog 内容是异步加载（比如 fetch 渲染），必须等 DOM ready 后再手动聚焦，不能靠原生行为
这个细节在开发时很难复现，但上线后用户用 Firefox 点开弹窗却要多点一次才能输入，就是这里没处理好。
