点击遮罩关闭对话框的兼容写法是：监听dialog click事件，用e.composedPath().includes(dialog.firstElementChild)判断是否点在内容区外，点在外则dialog.close()；关闭后须手动恢复原焦点元素，确保无障碍。
dialog 标签在 IE 全系、Android WebView 旧版本、Safari showModal() 直接报 TypeError，::backdrop 不渲染，焦点锁失效，背景仍可点击。
哪些浏览器真正支持原生 dialog？
Chrome 33+、Edge 79+、Safari 15.4+、Firefox 98+（需 dom.dialog_element.enabled = true）算“可用”，但仍有关键差异：
- Safari 不暴露
event.target为 backdrop，无法可靠判断“是否点在遮罩上” - Firefox 旧版对
returnValue支持不全，dialog.close('confirmed')后读不到值 - 所有浏览器默认
margin不一致（Chrome 有 16px 外边距，Safari 可能无圆角），必须重置 -
dialog::backdrop是纯 CSS 伪元素，不能绑定事件、不能querySelector、不能addEventListener
dialog-polyfill 为什么是唯一可行方案？
html5shiv 只解决标签名识别问题，它让 <dialog> 进 DOM，但不会补 showModal() 方法、不插 backdrop 元素、不劫持 ESC、不处理焦点环锁定。你写 dialog.showModal() 依然会报错。
dialog-polyfill 是 Google 官方维护的规范级补全，它：
立即学习“前端免费学习笔记（深入）”；
- 为每个
dialog注入完整 API（show()、showModal()、close()、opengetter/setter） - 动态插入真实
<div class="dialog-backdrop">节点，可样式化、可监听 click - 接管
method="dialog"表单提交逻辑 - IE9+ 全支持，gzip 后仅 ~6KB
错误写法：<script>document.querySelector('dialog').showModal()</script>——此时 polyfill 尚未注册，方法不存在。
注册 dialog-polyfill 的两个硬性条件
缺一不可，否则行为退化为普通 <div>：
- 必须在
<head>中引入dialog-polyfill.css（提供 backdrop 定位和基础样式） - 必须在 DOM 加载完成之后、首次调用
showModal()之前，对每个dialog执行dialogPolyfill.registerDialog(d)
多 dialog 场景下常见坑：
- 只注册第一个，其余
showModal()仍报错 - 在
DOMContentLoaded前就执行注册，querySelectorAll('dialog')返回空 NodeList - 注册后又动态插入新
dialog，未再次调用registerDialog()
推荐写法：
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('dialog').forEach(d => {
if (!d.hasAttribute('data-polyfilled')) {
dialogPolyfill.registerDialog(d);
d.setAttribute('data-polyfilled', 'true');
}
});
});
点击遮罩关闭对话框的兼容写法
原生 dialog 规范不定义“点击 backdrop 关闭”，且 Safari 完全无法检测 backdrop 点击。强行依赖 event.target === dialog 在 Safari 下永远为 false。
稳妥做法（polyfill + 原生都适用）：
- 给关闭按钮显式绑定
dialog.close() - 监听
keydown捕获 ESC 键：dialog.addEventListener('keydown', e => e.key === 'Escape' && dialog.close()) - 若要用点击遮罩关闭：监听
dialog的click，再用e.composedPath().includes(dialog.firstElementChild)判断是否点在内容区内部；点在外面就dialog.close() - 不要用
dialog::backdrop { pointer-events: none }配合父层监听——这会破坏焦点捕获逻辑
最易被忽略的一点：关闭后必须手动恢复触发按钮或上一个焦点元素的 focus()，否则焦点丢失在 body，违反无障碍要求。这不是 polyfill 的责任，是你封装时必须补上的逻辑。
