popovertargetaction 只有 "show" 和 "hide" 两个有效值，“toggle”不是合法值，浏览器会静默忽略并回退至默认的 "show" 行为；实现点击切换需 JS 判断状态调用 showPopover()/hidePopover() 或使用两个独立按钮。
直接说结论：popovertargetaction 只有 "show"、"hide" 两个有效值，"toggle" 是常见误解——它根本不是合法值，写了等于没写，浏览器会回退到默认行为（即 "show"）。
为什么 popovertargetaction="toggle" 没反应
这不是浏览器 bug，而是规范里压根没定义 "toggle"。W3C 明确只接受 "show" 和 "hide"；Chrome/Safari 实现也严格遵循这点。你写 popovertargetaction="toggle"，控制台不报错，但属性被静默忽略，按钮实际行为等同于没写 popovertargetaction（即默认 "show"）。
-
popovertargetaction="show"：点击就打开目标 popover（已打开则无操作） -
popovertargetaction="hide"：点击就关闭目标 popover（已关闭则无操作） - 省略
popovertargetaction：等价于popovertargetaction="show"，不是切换
如何实现真正的“点击切换”效果
原生 HTML 层面无法用单个属性实现 toggle，必须组合使用两个按钮或靠 JS 补足逻辑：
- 最稳妥的声明式写法：一个
show按钮 + 一个hide按钮，都指向同一个id - 如果坚持单按钮，需 JS 监听点击并判断当前状态：
if (el.hasAttribute('popover')) el.hidePopover(); else el.showPopover(); - 注意：不能依赖
el.open或el.hidden判断——popover元素没有这些属性；要用document.activeElement === el或检查el.matches(':popover-open')（仅 Chromium 支持）
popovertargetaction="hide" 必须显式写，不能靠默认
很多人以为“关掉弹窗”是默认动作，其实不是。只要没写 popovertargetaction="hide"，哪怕按钮放在 popover 内部，点击后仍会尝试 "show" —— 导致已打开的 popover 闪一下或无反应，用户感知就是“点不动”。
立即学习“前端免费学习笔记（深入）”；
- 关闭按钮必须带
popovertargetaction="hide"，且popovertarget值与目标id完全一致 - 这个按钮可以是
<button></button>，也可以是<input type="button">，但不能是<div role="button"> —— 后者不支持该属性 <li>别指望 <code>method="dialog"在<dialog popover></dialog>里自动关闭：它只对原生<dialog></dialog>生效，和popover无关 - Firefox 目前（2026年8月）仍不支持
popovertarget和popovertargetaction，只支持 JS 调用showPopover()/hidePopover() - Safari 17.4+ 要求目标元素在页面初始 HTML 中就存在，动态插入后加
popover属性无效 - 所有浏览器都要求目标元素必须有
popover属性（布尔型，无值），写成popover="auto"或data-popover都不行
容易被忽略的兼容性硬伤
就算属性写全了，也可能完全没反应，而且控制台安静得可怕：
真正麻烦的不是语法写错，而是失效时没有任何提示——你得手动检查 DOM 结构、浏览器版本、属性拼写、元素类型，缺一不可。
