不推荐直接用 做生产环境授权弹窗。它存在 safari 兼容性差、样式难定制、backdrop 伪元素支持弱、tab 键循环需手写、inert 属性不可靠、状态同步易遗漏、移动端 backdrop 点击失效等问题，实际项目中更宜采用 div 手动实现。
dialog 标签在授权弹窗中是否可靠
不推荐直接用 <dialog></dialog> 做生产环境的网站授权弹窗。它在 Safari 15.4 之前完全不支持，iOS Safari 直到 16.4 才支持 showModal()；Chrome 和 Edge 虽支持，但默认样式极难定制，且 backdrop 层无法用 CSS 选中（::backdrop 伪元素兼容性差，Firefox 不支持）。
授权弹窗必须拦截 Tab 键和 Esc 键
用户按 Esc 应关闭弹窗，按 Tab 应限制在弹窗内循环聚焦——这是 WCAG 2.1 的强制要求，也是实际授权流程中防误操作的关键。
-
dialog自带Esc关闭行为，但需确保它已调用showModal()（仅show()不触发该行为） - Tab 键限制必须手写逻辑：监听
keydown，检测Tab键并判断焦点是否将移出弹窗容器，是则event.preventDefault()并手动focus()到第一个/最后一个可聚焦元素 - 不要依赖
inert属性做遮罩层禁用——它在 Safari 和旧版 Chrome 中无效，仍需用aria-hidden="true"+tabindex="-1"手动控制主内容区
表单提交后 dialog 关闭但页面状态未重置
常见问题：用户点击「同意」后 dialog.close() 执行了，但页面其他地方的授权状态（如按钮文字、权限开关）没更新，或重复点击「授权」又打开了空弹窗。
- 务必在
dialog的close事件监听器里处理业务逻辑，而不是只依赖表单submit事件 - 检查
dialog.returnValue：成功授权后设为"granted"，拒绝设为"denied"，避免靠 DOM 是否存在判断状态 - 关闭后立即调用
dialog.remove()或重置innerHTML，否则重复打开时可能残留旧表单数据（尤其是<input type="checkbox">的 checked 状态）
移动端点击 backdrop 无法关闭 dialog
Chrome/Edge 默认允许点击 dialog::backdrop 关闭，但 Safari 完全不响应，且所有浏览器对 backdrop 的点击区域判定不一致——尤其当弹窗内容高度小于视口时，底部大片空白 backdrop 实际不可点。
- 不要依赖 backdrop 点击关闭，显式添加一个半透明覆盖层
<div class="backdrop"> 并绑定 <code>click事件调用dialog.close() - 该
backdrop元素需设position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;，避免因弹窗滚动导致点击失效 - 给它加
z-index高于弹窗内容但低于dialog本身（例如dialogz-index: 1001，backdrop: 1000），否则 Safari 下会盖住弹窗
真实项目里，
dialog 最适合原型验证或内部工具——一旦涉及多端兼容、无障碍、状态同步，很快就会退回用 div + 手动管理 focus/aria/backdrop 的老路。别被“原生”二字带偏，授权弹窗的核心从来不是标签，而是用户能否安全、明确、可控地完成那一次点击。
