原生 不支持全屏轮播，需用 css（position: fixed、width/height: 100vh/vw、transition）和 js（状态管理、事件监听、焦点控制）补足；safari 兼容需降级为 display: block + aria-modal。
dialog 标签默认不支持全屏和轮播，得靠 CSS + JS 补足
原生 <dialog></dialog> 只提供模态/非模态弹窗基础行为，没有内置全屏、过渡、焦点管理或轮播逻辑。直接用它做全屏大图轮播会卡在三处：无法自动铺满视口、图片切换无动画、键盘/手势操作缺失。必须手动接管尺寸、z-index、transition 和事件流。
常见错误现象：dialog 在部分浏览器（如 Safari）里默认带 padding 和 border；showModal() 调用后图片被裁切；按 Esc 关闭时焦点丢失导致键盘操作失效。
- 给
<dialog></dialog>加margin: 0和border: none清除默认边框 - 用
width: 100vw; height: 100vh;铺满，但需配合position: fixed;避免滚动条干扰 - 图片用
<img>内联width="100%" style="max-width:90%" object-fit="contain"，避免拉伸变形 - 轮播状态不能存在 DOM 属性里（如
data-index），建议用 JS 变量维护当前索引，否则dialog.close()后状态丢失
用 CSS transition 实现图片淡入淡出，别依赖 dialog 自带动画
<dialog></dialog> 没有内置切换动画，CSS 的 @keyframes 或 transition 必须作用在内部图片容器上，而不是 <dialog></dialog> 本身——否则整个弹窗会闪动，而非仅图片切换。
性能影响：对 opacity 和 transform 做 transition 是 GPU 加速的，但若对 width/height 动画会导致重排，卡顿明显。
- 给轮播容器（如
<div class="carousel-inner">）设 <code>position: relative; overflow: hidden; - 每张图用绝对定位 +
opacity: 0; transition: opacity 0.3s ease;，当前图设opacity: 1 - 避免用
display: none切换图片——会触发重排且 transition 失效；改用visibility: hidden+opacity - Safari 对
dialog内 transition 支持不稳定，加will-change: opacity;提前提示渲染层 - 在
<dialog></dialog>上监听keydown，用event.key === "ArrowLeft"或"Escape"触发切换或关闭 - 给轮播容器加
tabindex="0"，确保首次打开时能获得焦点 - 点击空白区域关闭需用
event.target === dialogEl判断，而非event.target.tagName === "DIALOG"（实际是#document） - 移动端需额外监听
touchstart+touchend计算滑动方向，pointerdown不可靠 - 检测：
if ("showModal" in HTMLDialogElement.prototype)，否则走 CSS 显示逻辑 - 降级时手动加
inert属性到 body 其他子节点（或用aria-hidden="true"），模拟模态阻断 - 避免用
position: absolute模拟全屏——iOS Safari 中可能触发缩放，改用fixed+inset: 0 - 关闭时记得移除
inert或aria-hidden，否则页面永久不可交互
键盘和点击事件必须显式绑定，dialog 不转发焦点事件
<dialog></dialog> 打开后不会自动聚焦到某张图，keydown（如左右箭头、Esc）事件也不会默认捕获。不手动监听，用户就只能靠鼠标点关闭按钮，体验断裂。
容易踩的坑：dialog 在 showModal() 后会把焦点移到自身，但若内部没可聚焦元素（如没加 tabindex="0" 的图片容器），键盘操作完全无效。
兼容性兜底：Safari 15.4 以下不支持 showModal()，fallback 方案要轻量
Safari 15.4 是首个支持 showModal() 的版本，旧版 Safari 和部分安卓 WebView 会静默失败——dialog.showModal() 无报错但不显示，用户以为功能坏了。
不用引入完整 polyfill（如 dialog-polyfill），它会重写整个 DOM 结构，跟轮播逻辑冲突。应优先检测 API 存在性，再降级为 display: block + aria-modal="true"。
dialog 的生命周期（open/close）、焦点流、样式隔离和事件委托串成一条不掉链子的线。尤其 Safari 下 dialog 的 focus 管理和 transition 行为经常和预期不一致，建议在真实 iOS 设备上反复验证 Esc、Tab、左右键、点击关闭这四类操作。
