dialog元素默认非模态，需调用showmodal()才能启用原生模态行为（禁用底层交互、焦点锁定、esc关闭等）；show()仅显示且不管理焦点/滚动；safari不支持showmodal()/close()的promise返回值，需用事件监听替代。
dialog 元素默认是非模态的，必须显式调用 showModal() 才能获得原生模态行为
很多人写完 <dialog></dialog> 标签发现点击背景不遮罩、按 Esc 不关闭、焦点没锁定——根本原因是没调用 showModal()。浏览器对 <dialog></dialog> 的默认渲染就是“普通浮动层”，和 <div> 没本质区别。只有执行 <code>dialog.showModal() 后，它才真正接入浏览器的模态栈：禁用底层交互、捕获 Tab 焦点、响应 Esc 键、支持 returnFocus() 自动回焦。
非模态场景（比如工具提示、悬浮面板）可以用 show()，但它不阻止页面滚动、不拦截 Esc、也不管理焦点——这些都得自己补。
-
showModal()：触发完整模态链路，推荐用于表单、确认框等需用户明确响应的场景 -
show()：仅显示，适合轻量级浮层，但必须手动处理键盘/焦点/滚动 - 直接设置
open属性（如<dialog open></dialog>）等价于show()，不是模态
点击 backdrop 关闭 dialog 时，close() 触发但事件对象没有 detail，需靠 event.target === dialog 判断是否为 backdrop 点击
原生 <dialog></dialog> 的 backdrop 点击事件会冒泡到 <dialog></dialog> 元素本身，且不会附带来源信息。不像自定义弹窗能监听 click 并检查 e.target 是不是遮罩层，这里你只能靠位置判断：
dialog.addEventListener('click', (e) => {
if (e.target === dialog) {
dialog.close();
}
});
注意：不能用 e.target.classList.contains('backdrop') —— 浏览器根本不给 backdrop 元素加 class，它甚至不是 DOM 节点，只是渲染层的灰蒙效果。
- Backdrop 点击不会触发
dialog的close事件，只触发click事件 -
dialog.close()后会立即触发close事件，此时dialog.returnValue可读取关闭原因（但 backdrop 关闭时它是空字符串） - 若需区分“确定按钮关闭”和“点击遮罩关闭”，建议统一用按钮调用
close('confirm')，再在close事件里读dialog.returnValue
dialog 在 Safari 中不支持 showModal() 和 close() 的 Promise 返回值，异步逻辑要降级为回调或轮询
Safari 目前（截至 iOS 17.5 / macOS 14.5）仍把 showModal() 当作 void 函数，不返回 Promise；close() 也不支持传参。这意味着你不能这样写：
await dialog.showModal(); // Safari 报错：Cannot read property 'then' of undefined
实际兼容方案得绕开 Promise：
- 用
dialog.addEventListener('close', handler)替代await showModal() - 关闭后需手动清理状态，比如重置表单、清空输入框，因为 Safari 不触发
close事件里的参数 - 如果依赖
dialog.returnValue做分支逻辑，Safari 下只能靠按钮绑定的click显式调用close('yes')或close('no')，再在close事件里读取
focus 管理容易被忽略：模态 dialog 激活后，首次 Tab 不一定落在第一个可聚焦元素上
即使调用了 showModal()，Chrome/Firefox 也只保证“焦点被限制在 dialog 内”，但不自动聚焦其中任意元素。结果是用户按 Tab 时，焦点可能先跳到地址栏或浏览器 UI（尤其在移动端），体验断裂。
正确做法是在 showModal() 后立刻手动聚焦：
dialog.showModal();
dialog.querySelector('input, button, [tabindex]')?.focus();
- 别依赖
autofocus属性——它在<dialog></dialog>内部无效（HTML 规范明确禁止） - 务必检查元素是否存在，否则
focus()报错会中断后续逻辑 - 如果 dialog 内容是动态渲染（比如 Vue/React 组件挂载后才插入 input），需在内容就绪后再聚焦，不能紧贴
showModal()调用
dialog 的坑不在语法，而在它把很多“理所当然”的交互（焦点、关闭原因、异步控制）交给了开发者自己兜底——尤其是 Safari 的实现差异和 backdrop 的不可见性，最容易在联调阶段突然暴露。
