原生 popover 的 hidepopover() 方法仅在 chrome/edge 114+ 支持，需确保元素存在 popover 属性、已通过 showpopover() 打开且处于 :popover-open 状态；推荐改用 togglepopover(false) 或 hidden 属性控制以提升兼容性与可靠性。
popover属性不生效？先确认浏览器支持和HTML结构
原生 popover 是 Chrome 114+、Edge 114+ 支持的实验性特性，Firefox 和 Safari 当前完全不支持。如果 hidePopover() 报错或无效，第一件事是检查 document.createElement('div').popover 是否为 undefined —— 若是，说明环境不支持，别浪费时间调用方法。
正确结构必须包含两个关键点：popover 属性（值为 "auto" 或 "manual"）和显式触发元素（如带 popovertarget 的按钮）。例如：
<button popovertarget="my-popover">打开</button> <div id="my-popover" popover="manual">内容</div>
hidePopover() 只能作用于已显示的 popover 元素
hidePopover() 是 HTMLElement 原型上的方法，但它**不会自动触发关闭动画或清理状态**，只改变内部显示逻辑。如果 popover 没被 showPopover() 显式打开过，或已被用户点击外部区域自动关闭，再调用 hidePopover() 会静默失败（无报错但无效果）。
- 必须确保目标元素存在且有
popover属性，否则调用会抛出TypeError: hidePopover is not a function - 推荐写法：先检查是否已显示，再调用 ——
if (el.matches(':popover-open')) el.hidePopover(); - 不能对文档片段或未挂载 DOM 的节点调用；动态创建后需先
appendChild再操作
手动关闭时要注意 target 元素和 popover 元素的绑定关系
原生 popover 的开关依赖 popovertarget 和 id 匹配，但 hidePopover() **只作用于 popover 元素本身，不联动触发按钮**。这意味着：即使你调用了 el.hidePopover()，按钮的 :active 或 :focus 状态不会自动重置，可能造成视觉不一致。
常见误操作：
- 在按钮点击事件里调用
document.getElementById('my-popover').hidePopover()，但没同步移除按钮的焦点 —— 用户再次点击可能无响应 - 多个 popover 共享同一个
popovertarget值，导致关闭行为不可预测 - 用
innerHTML替换 popover 内容后，原有绑定丢失，hidePopover()仍可调用但不再影响视觉（因为 DOM 已重建）
替代方案：当 hidePopover 不可靠时，用 togglePopover + 属性控制更稳妥
实测中，直接调用 hidePopover() 在某些快速连续操作下会失效（比如按钮连点两次，第二次调用被忽略）。更鲁棒的做法是用 togglePopover(false)，它内部做了状态校验：
const popover = document.getElementById('my-popover');
// 安全关闭
popover.togglePopover(false);
另外，也可以退回到 CSS 控制：给 popover 元素加 hidden 属性并配合 [popover]:not([hidden]) 样式，虽然绕过了原生 API，但在兼容性和可控性上反而更稳。
真正容易被忽略的是：原生 popover 的 hidePopover() 不触发 beforetoggle 或 toggle 事件，如果你依赖这些事件做清理（比如清空表单、取消定时器），得手动补发或改用 togglePopover() 并监听事件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
