popovertargetaction="hide"只能用于外部触发按钮，不可写在弹出层内部；内部关闭必须用javascript调用hidepopover()，且需检测api支持、确保popover属性存在并正确引用元素。
popovertargetaction="hide"只能用在触发按钮上，不能写在弹出层内部
这是最常被误解的一点：popovertargetaction="hide" 是专为**外部触发器**设计的属性，浏览器只认它出现在可交互元素（如 <button></button>、<a></a>）上，且该元素必须同时带有 popovertarget。把它写进弹出层内部的关闭按钮里，比如：
<div id="my-popover" popover> 内容... <button popovertargetaction="hide">关</button> <!-- ❌ 无效 --> </div>
——浏览器会直接忽略这个 popovertargetaction，因为没有 popovertarget 指向目标，也没有合法上下文。
内部关闭按钮必须用 JavaScript 调用 hidePopover()
想让弹出层里的按钮真正关闭自己，唯一可靠方式是 JS 主动调用 hidePopover()。但要注意三个硬性前提：
- 目标元素（即弹出层容器）必须已存在 DOM 中，且带有
popover属性（不是popover="auto"或popover="manual"，就是纯popover） - 必须先检测 API 支持：
"hidePopover" in HTMLElement.prototype，否则 Safari/Firefox 会报TypeError - 不能用
this.closest('[popover]')直接调用 —— 如果弹出层是<dialog popover></dialog>，closest可能找不到；稳妥写法是绑定时就缓存引用，或用id查找
示例（安全写法）：
<button id="trigger">打开</button>
<div id="my-popover" popover>
这是内容
<button onclick="closeMyPopover()">关闭</button>
</div>
<p><script>
function closeMyPopover() {
const el = document.getElementById('my-popover');
if ('hidePopover' in el) {
el.hidePopover();
}
}
document.getElementById('trigger').addEventListener('click', () =>
document.getElementById('my-popover').showPopover()
);
</script></p>
为什么不能用 popovertargetaction="close"？
popovertargetaction="close" 确实存在，但它有严格限制：
- 只允许用在
<dialog popover></dialog>的**子元素**中（不是任意<div popover>）<li>必须和 <code>popovertarget配合使用，且popovertarget值必须指向该<dialog></dialog>的id - 目前仅 Chromium 114+ 实现，Firefox 和 Safari 完全不识别该值，会静默失败
换句话说：即使你写成
<dialog id="my-dialog" popover><button popovertarget="my-dialog" popovertargetaction="close">X</button> </dialog>
——在 Safari 或 Firefox 里点击毫无反应，控制台也不会报错，调试时极难定位。
容易被忽略的 z-index 和焦点问题
内部关闭按钮看似功能正常，但实际可能被遮挡或失焦：
- 原生
popover默认z-index很低，遇到<select></select>、<iframe></iframe>、<video></video>会被盖住；必须显式设置div[popover] { z-index: 2147483647; } - 点击内部按钮后，焦点不会自动回到触发按钮，影响键盘导航；需手动
trigger.focus() -
hidePopover()不触发beforehide类事件，所有清理逻辑（如保存表单、重置状态）必须塞进按钮的onclick或事件监听里
这些不是“锦上添花”的优化项，而是生产环境里用户真实会遇到的卡点。原生 popover 的声明式能力很有限，内部交互基本得靠 JS 补位。
