原生 popover 不支持遮罩层，必须手动添加独立的 fixed 定位 div 并同步显隐；需设 z-index 为 2147483646、pointer-events: none（或 auto），且兼容性差，safari/firefox 尚未支持 showpopover()。
原生 popover 不支持遮罩层
HTML 原生 popover 属性（无论 popover="manual" 还是 popover 布尔值）**根本不提供遮罩层（overlay）机制**。它只控制目标元素的显示/隐藏与定位，所有样式（包括背景、边框、阴影）都作用于 popover 元素自身，:popover-open 伪类也仅匹配该元素，无法选中“页面其余部分”或“遮罩区域”。
想加遮罩？必须手动实现
遮罩层是独立 DOM 元素，需你主动插入并控制显隐逻辑。常见错误是试图用 :not(:popover-open) 或类似选择器“反选”页面其他区域——这在 CSS 中不可行，因为 popover 元素和页面主内容不在同一层级关系中，也无法通过伪类影响兄弟或祖先节点。
- 遮罩层必须是一个额外的
<div id="popover-overlay">，<code>position: fixed、z-index介于 popover 和底层内容之间 - 它的显隐必须与 popover 同步：调用
showPopover()后手动overlay.style.display = "block"；调用hidePopover()或监听popoverhidden事件后设为"none" - 不能依赖
[popover]:popover-open + #overlay这类相邻选择器——popover 元素和 overlay 几乎总是不相邻，且浏览器不保证渲染顺序 -
z-index必须严格大于 popover 容器的z-index（原生 popover 默认z-index: 2147483647），建议设为2147483646，否则遮罩会被 popover 盖住 - 遮罩层必须设
pointer-events: none，否则会拦截 popover 内部按钮点击；若需点击遮罩关闭 popover，则改为pointer-events: auto并绑定click事件调用hidePopover() - 遮罩层
height: 100vh; width: 100vw比100%更可靠，避免因父容器overflow: hidden导致遮罩不全
避免踩坑：遮罩层的 z-index 和事件穿透
遮罩层不是加个 background-color 就完事。关键细节：
兼容性现实：别强求原生 popover + 遮罩组合
Safari 和 Firefox 当前（2026 年 8 月）仍不支持 showPopover()，:popover-open 伪类也仅 Chromium 实现。这意味着你写的遮罩同步逻辑，在 Safari/Firefox 里要么完全不执行，要么因 showPopover() 抛错而中断。真正跨浏览器稳定的方案仍是 <dialog></dialog>（自带 backdrop）或纯 CSS+JS 自定义弹层——原生 popover 的遮罩需求，本质上暴露了它的实验性边界。
