HTML5Dialog 的 close() 方法无效，通常因未调用 showModal()/show() 或元素未挂载到 DOM；open 属性只读，应使用 hasAttribute('open') 判断状态；Safari 等旧浏览器需降级处理并手动管理焦点与 ESC。
HTML5Dialog 的 close() 方法为什么没反应
调用 close() 无效，通常是因为对话框没被“激活”——即没调用过 showModal() 或 show()，或者元素还没挂载到 DOM 中。
-
dialog元素默认是隐藏的，不调用showModal()就直接close()，浏览器会静默忽略 - 确保 JS 执行时
dialog已存在于 DOM，不要在document.querySelector前就操作它 - 如果用
show()（非模态），close()依然有效；但若用showModal()，关闭后焦点会自动返回触发元素，这点常被误认为“没关掉”
如何正确触发 HTML5Dialog 关闭（含 ESC 和点击 backdrop）
原生 dialog 自带两种自动关闭机制：按 ESC 键、点击灰色遮罩层（backdrop），但前提是必须用 showModal() 启动。
- 用
show()启动的对话框，ESC 和 backdrop 点击**不会关闭**，只能手动调用close() - 想让 backdrop 可点击关闭，别阻止事件冒泡：确保内部按钮或内容没写
event.stopPropagation() - 关闭后可监听
close事件做清理：dialog.addEventListener('close', () => { console.log('已关闭'); })
dialog.close() 调用后状态没更新？检查 open 属性
dialog.open 是只读属性，不能手动设为 false；它的值由浏览器内部控制，仅反映当前是否打开。强行改 dialog.open = false 不生效，还会被忽略。
- 判断是否打开，应该用
dialog.hasAttribute('open')，而不是读dialog.open（它始终返回true，哪怕对话框已关闭） - DOM 中的
open属性只在showModal()或show()后由浏览器自动添加，关闭后自动移除 - 若需响应式控制显示/隐藏，建议用 CSS 类 +
display: none配合，而非依赖open属性做条件渲染
兼容性差怎么办：Safari 和旧版 Chrome 的 fallback 方案
Safari 直到 16.4 才支持 dialog，更早版本会把元素当普通 div 渲染，既不遮罩也不居中，showModal() 报错 dialog.showModal is not a function。
立即学习“前端免费学习笔记（深入）”；
- 检测支持性：
if ('showModal' in HTMLDialogElement.prototype)，不支持就降级用display: block+ 手动管理焦点和 ESC 逻辑 - 别依赖
dialog的样式自动居中——它只在支持时才生效；fallback 时需自己加position: fixed和 transform 居中 - 第三方库如
dialog-polyfill可补全行为，但它会重写showModal()实现，注意与自定义 close 逻辑冲突
最易被忽略的是：dialog 关闭后，焦点不会自动回到页面上一个活跃元素，除非你手动 triggerEl.focus()。尤其在表单场景里，用户按 ESC 关掉弹窗后卡在空白页，就是这个原因。
