不能直接用作为生产环境支付确认窗口，因其缺乏防误触、焦点锁定、背景遮罩穿透控制能力，且safari对showmodal()存在focus管理缺陷。
dialog元素在支付确认场景中是否可靠
不能直接用 <dialog></dialog> 作为生产环境的支付确认窗口——它缺少关键的防误触、焦点锁定、背景遮罩穿透控制能力，且 Safari 对 showModal() 的实现长期存在 focus 管理缺陷。
点击确认按钮后 dialog 没反应或立即关闭
这是最常见的表现，根源在于：未调用 showModal()、调用时机过早（DOM 未就绪）、或被其他脚本中断。更隐蔽的是 Safari 中 dialog 在非用户手势（如 Promise.then）中调用 showModal() 会静默失败。
- 确保按钮点击事件处理器内直接调用
dialog.showModal()，不要包裹在setTimeout或异步回调里 - 检查
dialog元素是否已挂载到 document，React/Vue 中需确认 ref 已绑定完成 - 避免在
fetch().then()里调showModal()；改用await fetch(); dialog.showModal(); - 为防 Safari 问题，可在调用前加一次
dialog.setAttribute('open', '')（仅作兼容垫片，不影响行为）
支付确认窗口需要拦截 Tab 键和 Esc 键
<dialog></dialog> 原生支持 Esc 关闭，但默认不锁 tab 焦点——用户按 Tab 可跳出弹窗，聚焦到背景按钮上，造成误操作风险。必须手动接管焦点管理。
- 监听
dialog的focusin事件，检测目标是否在弹窗内部，否则强制focus()到第一个可聚焦子元素 - 禁用
Esc默认行为需调用event.preventDefault()并自行处理取消逻辑（例如弹出二次确认） - 不要依赖
inert属性锁背景——它不阻止 tab 导航到 inert 区域外的元素，且 IE/旧 Edge 不支持 - 推荐用
document.activeElement+dialog.contains()实现轻量级焦点守卫
与支付 SDK（如 Stripe Elements）集成时样式错位或失焦
Stripe、AlipayJS 等 SDK 渲染的输入框常嵌入 iframe，而 <dialog></dialog> 的 z-index 和 transform 会干扰 iframe 的 focus 状态和定位计算，导致光标偏移或键盘输入失效。
- 给
dialog设置transform: none和显式z-index: 10000（避开框架默认值） - 避免对
dialog使用scale()、rotate()等 transform 动画，改用 opacity + top/left 过渡 - 在
dialog.showModal()后延迟 1 帧（requestAnimationFrame）再初始化支付组件，确保 iframe 容器已 layout 完成 - 若仍失焦，可主动调用
elements.getElement('cardNumber')?.focus()（以 Stripe 为例）
showModal() 调用后 document.hasFocus() 返回 false，导致部分 SDK 拒绝激活输入框——这需要在 dialog 的 focus 事件中重试 focus 操作，而非只依赖一次调用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
