:popover-open伪类尚未被任何浏览器支持，应改用[popover=open]属性选择器；需设popover="manual"以确保open属性显式切换，实现纯css响应式状态样式。
Popover API 的 :popover-open 伪类目前不可用
截至 2024 年底，:popover-open 伪类**尚未被任何主流浏览器实现**。Chrome 114+ 虽已支持 popover 属性和 <dialog popover></dialog>，但配套的伪类选择器仍处于 CSS WG 提案阶段（Level 1），MDN 明确标注为 "Not supported in any browser"。直接写 :popover-open { ... } 不会生效，也不会报错——只是被完全忽略。
替代方案：用 [popover=open] 属性选择器模拟行为
浏览器实际支持的是 popover 元素的 open 属性（布尔属性，类似 <dialog></dialog>）。当弹窗打开时，该属性存在；关闭后被移除。因此可用属性选择器精准捕获状态：
<div id="my-popover" popover="manual">内容</div> <button onclick="myPopover.showPopover()">打开</button>
[popover=open] 是最可靠、最轻量的替代方式，它不依赖 JS 状态管理，纯 CSS 响应 DOM 属性变化：
[popover=open] {
opacity: 1;
transform: scale(1);
transition: opacity 0.2s, transform 0.2s;
}
[popover] {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.2s, transform 0.2s;
}
- 必须用
[popover]（带方括号）匹配任意有popover属性的元素，不能省略引号或写成popover[open] -
popover="auto"弹窗由浏览器自动控制开闭，open属性不会被显式添加/移除，此时该选择器无效——务必改用popover="manual" - 该选择器对
<dialog popover></dialog>同样有效，因为其open属性行为一致
为什么不用 JavaScript 动态加 class？
虽然可以监听 show/hide 事件并切换 .is-open 类，但这引入了冗余同步逻辑，且容易因事件时机（如动画未完成就触发）导致样式错位。原生属性选择器更健壮：
-
[popover=open]是声明式、响应式的，与 DOM 状态严格同步 - 避免在
showPopover()后手动element.classList.add("is-open")，减少出错点 - 无需处理
hidePopover()失败或异常关闭（如 Esc 键）时的 class 清理问题
注意 popover 属性值与兼容性边界
popover 属性只有两个合法值：auto 和 manual。前者让浏览器接管开闭逻辑（如点击外部自动关闭），后者完全交由 JS 控制。而 :popover-open 提案中设想的伪类本意是匹配“当前处于打开状态”的所有 popover 元素，无论其控制模式——但现实是，你只能靠属性选择器覆盖 manual 场景，auto 模式下无对应 CSS 钩子。
如果必须支持 auto 弹窗的状态样式，目前唯一办法是监听 toggle 事件并用 dataset 注入状态标记，再配合 [data-state="open"] 选择器——但这已脱离纯 CSS 范畴，且增加了运行时负担。
真正要小心的是：别在生产代码里留着 :popover-open 占位，它不会在未来某天“突然生效”，而会一直静默失效。用 [popover=open] 替代，是现在就能跑通的确定解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
