dialog 必须用 showmodal() 激活模态行为，因其初始 display: none 且不参与布局，open 属性仅控制可见性；需 dom 就绪检测、焦点管理、遮罩点击兼容处理及可访问性保障。
dialog 标签本身不自动弹出，也不绑定点击事件——写完标签、加 open 属性、甚至调用 show() 都无法实现可靠详情弹窗；必须用 showModal() 触发，且需配合 DOM 就绪检测、焦点管理与点击遮罩的兼容处理。
为什么写了 <dialog></dialog> 却完全看不到弹窗
浏览器对 dialog 的初始处理是 display: none 且跳过布局计算，它不会像 div 那样参与渲染流程。即使加了 open 属性，也只是让内容“可见”，但仍是非模态（无遮罩、不锁焦点、Esc 不响应）。真正激活模态行为，只有一条路径：showModal()。
- 脚本执行早于 DOM 解析（比如放在
中）→document.querySelector('dialog')返回null→ 调用showModal()报错 -
dialog嵌套在transform或overflow: hidden的父容器里 → backdrop 渲染失败或弹窗被裁剪 - 手动调用
removeAttribute('open')→ 即使已打开，也会被浏览器判定为“未激活”，视觉消失 - 用了
show()而非showModal()→ 没 backdrop、不拦截滚动、Tab 焦点自由逃逸
点击遮罩关闭弹窗的兼容写法
原生 dialog 不提供“点击 backdrop 关闭”的默认行为，且 Safari 中 e.target === dialog 判断基本不可靠（backdrop 不是真实 DOM 节点）。Chrome/Edge 可用简单判断，Safari 必须降级。
- Chrome/Edge 120+：监听
click，仅当e.target === dialog时调用dialog.close() - Safari 15.4–17.6：改用坐标判断——
if (e.clientX rect.right || e.clientY rect.bottom) - 绝对不要给
dialog::backdrop绑事件——它只是伪元素，无法 attach listener - 如果用了
show()，压根没有 backdrop，此逻辑直接失效
详情弹窗必须处理的三个可访问性硬需求
详情弹窗不是“显示内容”就完了，键盘用户和屏幕阅读器依赖三件事：焦点锁定、焦点循环、关闭后焦点返回。缺一不可。
- 打开后立即聚焦第一个可交互元素：
dialog.querySelector('button, input, [tabindex="0"]')?.focus() - 监听
keydown捕获Escape键并调用dialog.close() - 实现焦点循环：监听
focusin，若e.target不在dialog内部，则根据event.shiftKey切回首/尾可聚焦元素 - 关闭后手动把焦点还给触发按钮：
triggerBtn.focus()，否则键盘用户卡在地址栏
旧浏览器兼容不能只靠 hidden 或 CSS 显隐
IE 和 Safari 15.3 及更早版本不支持 showModal()，单纯用 display: none + aria-hidden="true" 会丢失焦点控制、Esc 响应和语义隔离。
- 运行时检测必须用：
typeof HTMLDialogElement !== 'undefined' && 'showModal' in HTMLDialogElement.prototype - 降级方案要补全：给
body加inert（或模拟）、手动管理Tab循环、插入独立div.backdrop并绑定点击关闭 - 别用
dialog-polyfill后就不管了——它依赖focus-trap，若页面已有自定义焦点管理，可能冲突 - 服务端若支持字段筛选（如
?fields=title,cover,desc），详情弹窗首次加载务必带上，避免传整条冗余数据
最常被忽略的点是：Safari 对 dialog.returnValue 的支持始终不完整（截至 v17.6 仍返回空字符串），别用它传关键业务值；另外，dialog 必须是 body 的直接子节点，否则 backdrop 渲染层级可能被父容器的 transform 或 z-index 截断——这问题在可视化编辑器拖拽组件时尤其隐蔽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
