popovertarget 属性必须配合目标元素的 popover 属性（值为 auto 或省略）才能生效；仅写 popovertarget="my-pop" 无效，且目标 ID 大小写敏感、不可嵌套在 dialog 或 shadow DOM 中。
popovertarget 属性必须配合 popover 全局属性才能生效
单独写 popovertarget="my-pop" 不会触发任何行为——浏览器根本不会识别它。目标元素（比如 <div id="my-pop" popover>）必须显式声明 popover 属性，且值为 "auto" 或省略（默认即 auto）。否则点击按钮时控制台可能静默失败，没有任何提示。
-
<div id="my-pop" popover>...✅ 正确（popover是布尔属性，有即启用） -
<div id="my-pop" popover="manual">...❌ 无效：manual 模式下popovertarget完全不工作 -
<button popovertarget="my-pop">打开</button>必须对应存在id="my-pop"且带popover的元素
多个按钮共用同一个 popovertarget 无需额外 JS
原生 popover 不需要为每个按钮绑定事件或写 showPopover() / hidePopover()。只要所有按钮的 popovertarget 指向同一个 ID，它们就自动共享开关逻辑：一个打开，另一个点就关闭；再点任一按钮都切换状态。
- 支持任意数量按钮：
<button popovertarget="tip">帮助</button>、<button popovertarget="tip">说明</button> - 按钮类型不限：
<a>、<input type="button">、<button>都可以 - 注意大小写敏感：
popovertarget="Tip"和id="tip"不匹配
关闭行为由点击区域决定，不是按钮独占
原生 popover 的关闭逻辑是“点击 popover 外部区域”，包括其他按钮、页面空白、甚至地址栏失焦。这意味着：如果两个按钮都指向同一个 popover，点按钮 A 打开，点按钮 B 不会“重新打开”，而是先关闭再打开（视觉上仍是切换），但若在 popover 显示时点空白处，它就会关闭——这点容易被误认为“按钮失效”。
- 无法阻止外部点击关闭（没有
modal模式） - 不支持点击 popover 内容自动关闭（需手动加
close()调用） - 若需“点击按钮 B 强制关闭 A 打开的 popover”，原生机制已默认满足，无需干预
当前兼容性限制和降级准备要点
Chrome 114+、Edge 114+、Firefox 125+ 支持，Safari 16.4+ 仅部分支持（popovertarget 可能不响应）。生产环境必须检查 'popover' in document.createElement('div') 并提供 fallback（比如用 details/summary 或轻量 JS 控制 display）。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
togglePopover()：它只在 popover 已显示时才切换，首次调用无效 -
popover元素不能是<dialog>子元素，也不能嵌套在shadow DOM深层（需挂载到 light DOM） - 样式隔离：popover 默认有
position: fixed和自带 z-index，自定义定位需覆盖top/left且注意滚动影响
popover 属性，或者 ID 拼错。一旦跑通，多按钮联动就是零 JS 的事——但别指望它能替代复杂弹窗交互。 
