popoverTarget 属性不存在，应使用 popovertarget（HTML）或 popoverTargetElement（JS），且目标元素需有 popover="auto" 或 popover="manual"；值须严格匹配目标元素的 id，大小写敏感，且两者须同属一个 document 或 shadow root。
popoverTarget 属性本身并不存在 —— 浏览器原生不支持这个写法。你真正需要的是 popover API 中的 popoverTargetElement（JS 属性）或 popovertarget（HTML 属性，注意是小写 p，无下划线），且必须配合 popover="auto" 或 popover="manual" 的目标元素使用。
为什么 button_popover 这种写法会失效
常见错误是把自定义 ID 或类名直接塞进 popovertarget 属性，比如：<button popovertarget="button_popover">。但该属性只接受**同页面内已渲染的、带 id 的 popover 元素 ID 值**，且该元素必须声明了 popover 属性。
容易踩的坑：
-
popovertarget值必须严格匹配目标<div id="xxx">的id，大小写敏感，不能带# - 目标元素没加
popover属性（如popover="auto"），点击按钮毫无反应 - 目标元素尚未挂载到 DOM（比如在 Vue/React 中条件渲染未触发），
popovertarget查找不到对应节点
popovertarget + popover="auto" 是最简联动方案
适用于点击即显示、再次点击即隐藏的场景，无需 JS 干预。
正确写法示例：
<button popovertarget="my-popover">打开弹出层</button> <div id="my-popover" popover="auto"> 这是内容 </div>
关键点：
- 按钮的
popovertarget值 = 目标<div>的id（这里是my-popover） - 目标元素必须有
popover="auto"；用popover="manual"则需手动调用showPopover()/hidePopover() - 两者必须在同一个 shadow root 或同一 document 下，跨 iframe 不生效
用 JS 控制时别混用 popoverTargetElement 和 popovertarget
如果要用脚本动态控制（比如根据状态决定是否允许展开），应直接操作元素的 popoverTargetElement 属性，而不是修改 HTML 属性。
例如：
const btn = document.querySelector('button');
const popover = document.querySelector('#my-popover');
// ✅ 正确：赋值 DOM 元素引用
btn.popoverTargetElement = popover;
// ❌ 错误：这不会建立关联
btn.setAttribute('popovertarget', 'my-popover');
注意：
-
popoverTargetElement是可读写的 JS 属性，类型为Element | null - 设置后，点击按钮会按
popover类型自动触发（auto或manual） - 若目标元素被移除或设为
null，点击将无响应，也不会报错
兼容性仍是硬伤：目前仅 Chromium 114+（Chrome/Edge）和 Safari 17.4+ 支持，Firefox 尚未实现。生产环境务必加降级逻辑，比如 fallback 到 details 或第三方库（tippy.js 等）。别指望靠一个属性就搞定全平台。
