dialog需先append到document.body再调用showModal()才能生效，否则内容插入后仍隐藏；事件需手动绑定，关闭用close()而非remove()；旧版Safari/IE不支持showModal()，须检测特性并降级处理。
dialog 标签本身不支持直接用 innerHTML 或 append() 动态插入内容后自动激活显示 —— 你得手动调用 showModal() 或 show()，否则内容虽已插入，但对话框仍处于隐藏状态且不可交互。
dialog 插入内容前必须先 append 到 document.body
dialog 元素在 DOM 中的位置直接影响其渲染行为和 backdrop 显示。如果它被嵌套在某个 display: none 容器里，或尚未挂载到 document.body，即使调用了 showModal()，也可能无反应、无遮罩、点击无响应。
- 必须先用
document.body.append(dialogEl)确保它在 body 最顶层 - 不能依赖父容器的
appendChild()（比如插进某个div#app）—— 这会导致 backdrop 不触发、焦点管理失效 - 插入后立即设置内容，再调用显示方法，顺序不能颠倒
const dialog = document.createElement('dialog');
dialog.innerHTML = `<h3>确认删除？</h3><p>此操作不可撤销</p><button id="confirm-btn">确定</button>`;
document.body.append(dialog); // 关键：必须先挂到 body
dialog.showModal(); // 此时才真正生效
动态插入后需手动绑定事件，且注意事件委托失效风险
用 innerHTML 插入带按钮的内容后，新元素上的事件监听器不会自动存在 —— 你得自己加，而且不能靠“提前绑定”（因为元素还没创建）。另外，dialog 是模态层，会劫持焦点，部分事件（如 click 在 backdrop 上）默认不冒泡到外层。
立即学习“前端免费学习笔记（深入）”；
- 推荐在插入后立刻用
dialog.querySelector('button').addEventListener(...) - 若内容结构复杂或可能多次重写，改用事件委托：监听
dialog自身的click，再判断event.target.matches('button[data-action]') - 关闭 dialog 建议统一用
dialog.close()，而非remove()—— 否则下次再 append 会丢失open状态记忆
IE 和旧版 Safari 不支持 dialog，Polyfill 无法完美模拟 showModal 行为
原生 dialog 的 showModal() 会暂停页面其余部分的 tab 键导航、禁用背景点击穿透、自动聚焦首个可交互元素 —— 这些是浏览器底层实现的，polyfill（如 dialog-polyfill）只能模拟视觉效果，无法真正拦截系统级焦点流。
- 如果你的用户群含大量 iOS 15.4 以下或 Safari 15.2 以前版本，
showModal()会静默失败，需降级为show()+ 手动加 backdrop + 焦点锁定 - 检测支持性：用
'showModal' in HTMLDialogElement.prototype判断，别只查dialog标签是否存在 - polyfill 的
upgradeDialog()必须在元素 append 到 DOM 后调用，否则无效
最常被忽略的一点：动态插入内容后，如果没调用 showModal() 或忘记 document.body.append()，控制台不会报错，dialog 也不会提示任何异常 —— 它只是安静地“不存在于渲染流程中”。调试时优先检查这两个动作是否真实执行，而不是反复修改 innerHTML 内容。
