:popover-open 是匹配通过 showpopover()/showmodal() 打开的 的 css 伪类，chrome 114+/safari 17.4+ 支持，需带 popover 属性且禁用 open 属性，仅作用于显式 js 控制的弹出层。
什么是 :popover-open 伪类
:popover-open 是一个实验性但已进入 Chrome 114+ 和 Safari 17.4+ 的 CSS 伪类，用于匹配当前处于“打开状态”的原生 <dialog></dialog> 元素（即被 showPopover() 或 showModal() 激活、且尚未关闭的弹出层）。它不作用于 open 属性为 true 的普通 <dialog></dialog> —— 那是旧式模态逻辑，:popover-open 只响应新 popover API 的显式打开行为。
:popover-open 的实际触发条件
只有满足以下全部条件时，:popover-open 才会生效：
- 元素是
<dialog popover></dialog>（必须带popover属性，不能只写<dialog></dialog>） - 通过 JavaScript 调用了
element.showPopover()或element.showModal() - 该 popover 尚未被
hidePopover()、点击 backdrop、按Esc或导航离开而关闭 - 浏览器支持：Chrome ≥114（需启用
chrome://flags/#enable-popover-api在 114–116）、Safari ≥17.4（默认开启），Firefox 尚未实现
常见误判：<dialog open></dialog> 不触发 :popover-open；<dialog popover open></dialog> 也不触发——open 属性与 popover API 互斥，设了 popover 就必须用 JS 控制开闭。
怎么用 :popover-open 做样式切换
典型用途是给打开状态的 popover 添加过渡、阴影或背景遮罩。注意：它只能选中 popover 元素自身，不能直接选中 backdrop（backdrop 需用 ::backdrop 单独控制）。
dialog[popover] {
border: none;
padding: 0;
background: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.2s, opacity 0.2s;
}
dialog[popover]:popover-open {
transform: scale(1);
opacity: 1;
}
dialog[popover]:not(:popover-open) {
transform: scale(0.95);
opacity: 0;
}
dialog[popover]::backdrop {
background: rgba(0,0,0,0.3);
animation: fade-in 0.2s;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
关键点：
- 必须用属性选择器
dialog[popover]显式限定目标，否则:popover-open可能意外匹配到非 popover 的<dialog></dialog> -
:popover-open不支持嵌套选择（如dialog:popover-open .content是合法的，但dialog:popover-open + .trigger无效——伪类不改变选择器权重或流关系） - 动画需配合
transform和opacity，避免触发布局重排；display: none无法与:popover-open配合使用（元素不可见时伪类不匹配）
容易忽略的兼容性和调试陷阱
开发时最常卡在三个地方：
- 忘记加
popover属性：仅写<dialog></dialog>或<dialog open></dialog>，:popover-open永远不生效 - 混淆
showPopover()和showModal()：后者也会触发:popover-open，但它会阻塞交互并自带 backdrop；前者更轻量，但 backdrop 默认透明（需手动设dialog::backdrop） - DevTools 中看不到实时匹配：Chrome 的 Elements 面板不会高亮显示
:popover-open状态，得靠console.log(getComputedStyle(dialog).opacity)或断点检查渲染效果 - CSS 优先级问题：如果其他规则（如内联
style）设置了opacity: 0，:popover-open的声明可能被覆盖，建议用!important临时验证（上线前应重构选择器权重）
目前没有 polyfill，也不建议用 JS 模拟该伪类行为——它本质是浏览器对 popover 生命周期的底层信号，强行模拟反而破坏语义和可访问性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
