原生 popover 无可靠 polyfill，必须运行时检测 showPopover 和 popover 属性是否同时存在；SSR 渲染需避免直接输出 popover 标签；动态插入无效，应预置 dialog 或隐藏 popover 元素。
popover 降级不是加个 polyfill 就能行
原生 popover 没有可靠 polyfill——它的定位、焦点管理、Esc 关闭、点击外部关闭都深度耦合浏览器渲染层，JS 模拟必然漏掉焦点锁定、遮罩穿透、滚动锚定等关键行为。你看到的“popover polyfill”项目，基本只是 CSS + showModal() 或绝对定位模拟，和原生语义、可访问性、键盘流完全脱节。
必须运行时检测，不能靠 UA 字符串
服务端判断浏览器类型不可靠，客户端也别查 navigator.userAgent。真正有效的检测只有一条：
if ("showPopover" in HTMLElement.prototype && "popover" in HTMLDivElement.prototype) {
// 可用原生 popover
} else {
// 必须降级
}
注意：只检测 "showPopover" in HTMLElement.prototype 不够，Firefox 126+ 和 Safari 17.4+ 虽支持部分属性（如 popovertarget），但不支持 showPopover()，仍需降级。
-
popovername或popovertarget属性存在 ≠ 功能可用，它们在 Safari/Firefox 中被完全忽略，不报错也不生效 - SSR 渲染时若直接输出带
popover的标签，Safari 会当作未知元素丢弃，导致 DOM 结构断裂 - 检测代码必须放在
DOMContentLoaded后，否则HTMLElement.prototype可能尚未就绪
推荐降级路径：dialog + 手动 backdrop + 状态同步
比自己写浮层更稳的选择是降级到 <dialog>，它有成熟 polyfill（如 dialog-polyfill），且 Safari/Firefox 支持度远高于 popover。但要注意几个硬约束：
立即学习“前端免费学习笔记（深入）”；
-
<dialog>必须是<body>的直接子元素，嵌套在<div id="app">里会导致 Safari 遮罩不显示 - 不要手动设
open属性，一律用dialog.showModal()打开、dialog.close()关闭 - 原生
popover默认无遮罩，而<dialog>默认有；如需一致体验，得手动隐藏dialog::backdrop并另加一层透明遮罩 div - 焦点回退必须显式做：
dialog.addEventListener('close', () => triggerBtn.focus())，否则键盘用户卡死
动态插入 popover 元素？Safari 直接无视
这是最隐蔽的兼容陷阱：用 innerHTML 或 append() 动态插入带 popover 的元素后，再补上属性或调用 showPopover()，Safari 17.4+ 会完全忽略——它只认首次 HTML 解析时就存在的 popover 元素。
如果你的弹层内容是异步加载或按需渲染的，这条路走不通。此时唯一可行方案是：提前把所有可能用到的 <dialog> 或基础 <div popover> 静态写在 HTML 底部（</body> 前），初始 hidden，再用 JS 控制显隐和内容填充。
别指望用 MutationObserver 补救——Safari 对动态添加的 popover 属性无反应，连事件都不触发。
