<dialog>默认无背景遮罩，仅showModal()触发backdrop层并支持点击关闭；::backdrop仅在showModal()后生效，Safari 15.4+支持，移动端需处理touch事件穿透问题。
dialog标签默认没有背景遮罩
HTML <dialog> 元素本身不自带模态遮罩层，点击外部区域不会自动关闭，也不会变暗背景——这是很多人误以为“用了dialog就等于弹窗”的第一坑。
真正触发遮罩效果的，是调用 showModal() 方法（而非 show()）。只有这时，浏览器才会渲染一个半透明的 backdrop 层，并把焦点限制在 dialog 内部。
-
show()：纯展示，无遮罩、无焦点锁定、点击外部无反应 -
showModal()：启用模态行为，自动插入 backdrop，支持 Esc 关闭、点击 backdrop 关闭（需额外处理）
::backdrop伪元素只能作用于showModal()激活的dialog
如果没调用 showModal()，::backdrop 完全不生效，CSS 里写死了也没用。它不是通用遮罩选择器，而是仅在模态上下文中由 UA 创建的匿名盒子。
常见错误是直接写 dialog::backdrop { background: rgba(0,0,0,0.5); } 却发现没变化——先检查 JS 是否调用了 dialog.showModal()。
立即学习“前端免费学习笔记（深入）”；
- 兼容性注意：
::backdrop在 Safari 15.4+ 才支持，旧版需用dialog[open]+ 自定义遮罩层模拟 - 不能设置
z-index：backdrop 层级固定在 dialog 下方、其他内容上方，强行设 z-index 无效 - 动画支持有限：部分浏览器不支持
transition或animation在::backdrop上
点击 backdrop 关闭 dialog 需手动监听
标准行为中，点击 backdrop 默认会关闭 dialog，但前提是 dialog 没被 event.preventDefault() 干扰，且没有阻止冒泡或禁用 pointer-events。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
如果你发现点击遮罩没反应，大概率是以下之一：
- dialog 内部某个元素（比如按钮）调用了
event.stopPropagation()，导致 click 事件没冒泡到 backdrop - CSS 中对
dialog::backdrop设置了pointer-events: none（显式禁用） - JS 里监听了
click并调用了event.preventDefault()，但没判断目标是否为 backdrop
稳妥做法是监听 dialog 的 click 事件，检查 event.target === dialog（即点在 backdrop 区域），再调用 dialog.close()。
移动端 backdrop 点击穿透问题
在 iOS Safari 和部分安卓 WebView 中，::backdrop 对 touch 事件响应不稳定，可能出现“点了遮罩但没关闭”或“点一次没反应、点两次才关”的情况。
根本原因是 backdrop 层未正确捕获 touchstart/touchend，尤其当页面有 touch-action: manipulation 或快速滚动干扰时。
- 临时解法：给
dialog::backdrop加touch-action: auto - 更稳方案：不依赖 backdrop 的原生点击，改用
pointerdown+getBoundingClientRect()判断点击坐标是否在 dialog 外 - 别忽略 focus 管理：关闭后记得手动
focus()回触发按钮，否则屏幕阅读器和键盘用户会迷失
backdrop 不是黑盒，它是 UA 渲染的附加工具，行为受调用方式、浏览器实现和交互细节共同约束。漏掉 showModal() 或忽略移动端 touch 处理，比样式写错更容易让整个弹窗逻辑失效。
