dialog.open属性在老旧浏览器中完全无效，真正兼容方案唯有dialog-polyfill：需引入CSS、注册元素、统一用showModal()/close()控制弹出与关闭，禁用open属性操作。
dialog.open 属性在老旧浏览器里根本不起作用
open 是个布尔属性，写成 <dialog open></dialog> 或 <dialog open="open"></dialog> 效果一样，但它只在 HTML 解析阶段起效——仅让内容“可见”，不激活模态行为。而老旧环境（IE 全系、Android WebView 旧版、Safari ≤15.4、部分双核浏览器）连这个基础解析都做不到：document.querySelector('dialog') 可能返回 null，dialog.open 读出来是 undefined，更别说触发任何渲染。
别试图用 CSS 或 JS 模拟 open 的行为
常见错误包括：
- 给
<dialog></dialog>手动加style.display = 'block'→ backdrop 不生成、焦点管理失效、Tab 键穿透 - 用
dialog.setAttribute('open', '')动态切换 → 视觉闪烁、无 close 事件、后续showModal()报DOMException: The element is already open - 依赖
dialog.open === true判断是否打开 → 在 polyfill 环境或 Safari 中该值始终为false或不可靠
这些操作绕过了原生 dialog 的状态机，导致焦点锁死、遮罩残留、键盘交互断裂，且无法被屏幕阅读器正确识别。
真正可行的兼容方案只有 dialog-polyfill
html5shiv 之类只解决标签名识别，不补 API、不模拟 ::backdrop、不接管 ESC 和焦点逻辑。必须用 dialog-polyfill，它才是唯一按规范补全能力的方案：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 必须在
引入dialog-polyfill.css（提供 backdrop 样式和基础定位） - 必须在 DOM 就绪后调用
dialogPolyfill.registerDialog(dialogEl)，且该调用要在首次showModal()之前 - 注册后，
showModal()和close()才会真正生效，open属性会被 polyfill 自动同步（但你仍不该手动读写它）
注意：Safari ≤16.3 对 open 属性的支持极弱，即使注册了 polyfill，也建议完全忽略 open，所有开关逻辑统一走 showModal() / close()。
服务端渲染时怎么安全默认弹出
如果 SSR 输出了 <dialog open></dialog>，别指望它能在 Safari 或旧环境中“自动弹”。必须在客户端补一步：
document.addEventListener('DOMContentLoaded', () => {
const dialog = document.getElementById('myDialog');
if (!dialog) return;
// 先注册 polyfill（若已引入）
if (typeof dialogPolyfill !== 'undefined') {
dialogPolyfill.registerDialog(dialog);
}
// 再调用 showModal —— 这才是唯一可靠路径
if (typeof dialog.showModal === 'function') {
dialog.showModal();
}
});
关键点在于：open 属性不是“开关”，只是调试标记；真实交互流中，它不该出现在生产代码里。所有弹出逻辑必须收口到 showModal()，所有关闭逻辑必须收口到 close() —— 这是跨浏览器稳定性的唯一锚点。
