popovertarget属性仅对声明了popover属性的元素ID生效，且仅支持button和input[type="button"]；必须显式指定popovertargetaction="hide"才能确保关闭，多触发器可共用同一ID但需严格匹配大小写。
popovertarget 属性必须指向带 popover 的元素 ID
它不是通用的“ID 引用”——只对显式声明了 popover 属性的元素生效。如果目标元素只有 id="xxx" 但没加 popover，点击按钮完全没反应，控制台也不会报错，这是最常被忽略的失效原因。
常见错误现象：
- 按钮能点，但弹出层不出现
- 检查 DOM 发现目标元素存在，却始终
display: none - 误以为是 CSS 冲突，实际是漏写了
popover
正确写法示例：
<button popovertarget="help">帮助</button> <div id="help" popover>这里是帮助内容</div>
注意：popovertarget 值必须严格匹配目标元素的 id 字符串（区分大小写、不可含空格或特殊符号）；不能是 class 名、data 属性或任意其他标识。
立即学习“前端免费学习笔记（深入）”；
popovertarget 只在 button 和 input[type="button"] 上起作用
它不是全局可用属性。用在 <a></a>、<span></span> 或普通 <div> 上会直接被浏览器忽略，且无任何提示。
<p>使用场景限制明确：</p>
<ul>
<li>
<code><button></button>：推荐首选，语义清晰、默认可聚焦、天然支持键盘交互（Enter/Space）
<input type="button">：仅当需要复用表单控件样式或旧代码迁移时考虑<input type="submit"> 或 <input type="reset">：不支持 popovertarget，即使写了也无效如果你试图用 <div role="button"> 绑定，必须额外加 JS 手动触发 <code>showPopover()，popovertarget 不会自动接管。
popovertargetaction="hide" 需要显式指定，不能依赖默认行为
默认值是 toggle，这意味着哪怕你只想关掉弹窗，只要没写 popovertargetaction="hide"，点击该按钮仍会先判断当前状态再切换——可能意外打开已关闭的 popover。
典型踩坑点：
- 在弹窗内部放「关闭」按钮，但只写
<button popovertarget="panel">×</button> - 用户快速连点两次，弹窗闪一下又回来
- 预期是「点就关」，结果变成「点一下开、再点一下关」
正确做法是显式声明动作：
<button popovertarget="panel" popovertargetaction="hide">关闭</button>
这个属性只在 type="button" 时有效（包括 <button></button> 和 <input type="button">），其他类型 input 会被静默忽略。
多个 popovertarget 指向同一 popover 时的行为
可以安全绑定多个触发器到同一个 popover 元素，浏览器会统一管理其显示/隐藏状态。比如一个「打开」按钮、一个「关闭」按钮、一个快捷键按钮，都指向 id="menu"，它们互不冲突。
但要注意两个细节：
- 所有触发器必须使用相同的 ID 字符串，大小写/拼写差一个字符就会断开关联
- 如果其中一个触发器用了
popovertargetaction="show"，而另一个用了"hide"，它们各自按指令执行，不会互相干扰状态判断 - 不存在「谁最后触发谁主导」逻辑——状态由 popover 自身维护，触发器只是发指令
复杂点在于：若同时有 auto 和 manual popover 混用，popovertarget 仍能绑定，但 manual 类型不会响应外部点击关闭，这点容易被忽略。
