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