popovertargetaction 属性只能是 "toggle" 或 "show"，不能设为 "hide"；HTML 原生 popover API 不支持 popovertargetaction="hide"，规范仅定义这两个合法值，隐藏必须通过 JavaScript 调用 hidePopover() 实现。
popovertargetaction 属性只能是 "toggle" 或 "show"，不能设为 "hide"
HTML 原生 popover API 不支持直接用 popovertargetaction="hide" —— 这个值根本不是标准允许的。浏览器会忽略它，或者触发解析错误（比如在 Chrome 中表现为 target 元素不响应点击）。规范只定义了两个合法值："toggle"（默认）和 "show"，没有 "hide"。
如果你点了按钮想「只隐藏不显示」，必须换思路：
-
popovertargetaction保持"toggle"或"show"，但通过 JS 主动调用hidePopover() - 确保目标元素有
popover="auto"（或popover="manual"），否则hidePopover()无效 - 不要依赖属性控制“单向隐藏”，那是 JS 的职责
用 JavaScript 隐藏 popover 的正确写法
所有现代支持 popover 的浏览器（Chrome 114+、Edge 114+、Safari 17.4+）都提供 hidePopover() 方法。它比属性可靠得多：
<button popovertarget="my-popover">显示</button>
<button onclick="document.getElementById('my-popover').hidePopover()">强制隐藏</button>
<div id="my-popover" popover="auto">内容</div>
注意两点：
立即学习“前端免费学习笔记（深入）”；
- 必须先让 popover 处于 open 状态（哪怕刚 show 过），
hidePopover()才生效；对未打开过的元素调用不会报错，但无效果 - 如果用了
popover="manual"，则showPopover()和hidePopover()必须成对使用，不受popovertargetaction影响
为什么不能用 popovertargetaction="hide"？
这不是浏览器实现遗漏，而是规范有意为之。W3C 明确将 popovertargetaction 定义为「控制目标如何被激活」，而「隐藏」不属于激活行为。激活（activation）只对应 show/toggle，隐藏是独立的生命周期操作，需显式触发。
常见误判场景：
- 以为加了
popovertargetaction="hide"就能关掉另一个已开的 popover —— 实际上它什么也不做 - 把
popovertarget指向一个未设置popover属性的元素，导致hidePopover()报TypeError: hidePopover is not a function - 在 popover 关闭后立刻再次调用
hidePopover()，虽不报错但多余；建议加if (element.matches(':popover-open'))判断
替代方案：用 :popover-open 伪类 + CSS 控制状态
如果你只是想「视觉上隐藏」而非真正关闭 popover，可以用 CSS 配合状态判断，但要注意这不等价于隐藏逻辑：
div[popover]:not(:popover-open) {
display: none;
}
不过这属于 hack，且无法阻止焦点进入、不释放 aria-hidden 等语义，**真实交互中必须用 hidePopover()**。CSS 方案只适合极简过渡动画或调试观察。
最易被忽略的一点：popover 元素必须是 <div> 或其他可聚焦的流式元素，<code><span></span> 默认不可聚焦，即使加了 popover 也可能无法正确响应 hidePopover() —— 记得加 tabindex="-1"。
