原生 popover 功能需用 元素配合 popovertarget 属性实现，非独立属性；必须满足结构约束、用户交互触发且浏览器支持，safari 完全不支持，需 js 检测与降级。
popover 属性和 popovertarget 并不是当前 HTML 标准中的合法属性——浏览器根本不识别它们。
为什么在 HTML 中写 popover 和 popovertarget 没反应
这两个名字听起来像标准 API，但实际是混淆了早期实验性提案（如 Chrome 114–116 中短暂存在的 常见错误现象： 这是目前唯一被 Chromium（Chrome ≥114、Edge ≥114）、Firefox（≥125）部分支持的声明式方案，无需 JS 即可触发。关键点在于结构和属性必须严格匹配： 最小可行示例： 例如在 popover 内放一个关闭按钮： 目前 Safari 完全不支持 真正要上线，得准备一套 JS fallback（比如用 popover 实验标志）与最终落地的 popover 元素规范。真正的标准方案是：用 <div popover> 元素 + <code>popovertarget 属性（注意：是元素属性，不是自定义 HTML 属性），且仅当启用对应特性并满足 DOM 结构约束时才生效。
<button popovertarget="my-pop"></button> 但点击无反应 → 缺少 popover 元素或未启用特性Failed to execute 'showPopover' on 'HTMLElement': The element does not have a popover attribute → 调用 JS 方法前没加 popover 属性overflow: hidden 或未设 position: relative
如何正确使用原生
popover 元素和 popovertarget
popovertarget 必须写在**触发元素**上（如 <button></button>），值为目标 <div> 的 <code>id
popover 全局属性（<div id="my-pop" popover>），不能是 <code>popover="auto" 或其他值
display: contents 破坏父级关系）<button popovertarget="help-pop">❓ 帮助</button>
<div id="help-pop" popover>
这是原生 popover 内容，支持 HTML。
</div>
popovertarget 的三种行为模式及对应属性值popovertarget 本身不接受值来切换行为；真正控制开关逻辑的是配套的 popovertargetaction 属性（注意拼写）。它决定点击时执行什么操作：
popovertargetaction="toggle"（默认）→ 点击显示/隐藏切换popovertargetaction="show" → 点击只显示，不隐藏（需手动调用 hidePopover()）popovertargetaction="hide" → 点击只隐藏（通常用于 popover 内部的关闭按钮）<div id="my-pop" popover>
弹出内容...
<button popovertarget="my-pop" popovertargetaction="hide">✕</button>
</div>
兼容性与降级处理的关键盲区
popover，Firefox 支持度有限（如不支持 anchor 定位）。容易被忽略的点：
@supports (popover: auto) 这样的 CSS 检测语法，只能用 JS 检测：if ('popover' in HTMLElement.prototype)
popover 元素默认 display: none，但一旦添加 popover 属性，它就脱离文档流、用 position: fixed 渲染 —— 所以不能依赖 CSS 的 display 控制显隐:popover-open）精准样式化“打开中”的状态，因为该伪类尚未稳定，且 Safari/Firefox 不支持popover 属性，旧浏览器会把它当无效属性忽略，但不会报错 —— 表面安静，实则功能缺失dialog 元素或第三方库），而不是只靠 HTML 属性赌兼容性。
