html 的 标签不支持直接在自身添加 popovertargetaction="toggle" 而不配合 popovertarget 和目标元素的 popover 属性；正确用法是按钮设 popovertarget 指向带 popover 属性的元素，且仅 chrome 114+、edge 114+ 支持，firefox 和 safari 尚未支持，需 polyfill 或 js 降级兜底。
HTML 中的 <button></button> 标签本身不支持 popovertargetaction="toggle" 属性——这是无效写法，浏览器会忽略它。
popover 是实验性功能，需配合 popover 属性使用
目前（截至2024年），原生 popover 功能由 popover 全局属性和 popovertarget / popovertargetaction 配合实现，但必须满足以下条件：
-
目标元素必须有
popover属性（如<div popover>内容</div>） - 触发按钮需用
popovertarget指向该元素的id -
popovertargetaction只接受"show"、"hide"或"toggle"字符串值，且仅在支持该特性的浏览器中生效（Chrome 114+、Edge 114+，Firefox 尚未支持）
正确写法示例
下面是一个能切换弹窗的最小可用代码：
<button popovertarget="my-popover" popovertargetaction="toggle">点击切换弹窗</button> <div id="my-popover" popover>这是一个 popover 弹窗</div>
注意：id="my-popover" 和 popovertarget="my-popover" 必须严格匹配；popover 属性不能写成 popover="auto" 或其他值，直接写 popover 即可。
常见错误提醒
- 把
popovertargetaction写在没有popovertarget的 button 上 → 不生效 - 目标元素缺少
popover属性或拼写错误（如写成pop-over）→ 无反应 - 在 Safari 或旧版 Chrome 中测试 → 功能不可用（需检查浏览器兼容性）
- 用 JavaScript 手动调用
showPopover()/hidePopover()时，未先调用popover = "manual"→ 报错
兼容性兜底建议
由于 popover 原生支持仍有限，生产环境建议：
- 用 oddbird 的 polyfill 补全旧浏览器支持
- 或降级为
details/summary、CSS +:focus-within、或轻量 JS 控制显隐 - 避免依赖
popovertargetaction="toggle"做核心交互逻辑，保留 JS 备用控制路径
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
