popover 是布尔型原生特性，仅对特定容器元素生效，需结构合规、上下文正确且浏览器支持；目前仅 Chromium 114+ 和 Safari 17.4+ 部分支持，Firefox 尚未实现声明式能力。
popover 不是 HTML 全局属性，也不是可自由添加的自定义属性——它是一个**布尔型、仅在特定元素上生效的原生特性标识**，必须显式存在（如 popover），且只对支持 popover 生命周期的元素起作用。
浏览器不会把任意 <div popover> 当作弹出层；它需要结构合规、上下文正确、浏览器支持，三者缺一不可。目前（2026 年 9 月）仅 Chromium 114+（Chrome/Edge）、Safari 17.4+ 部分支持，Firefox 仍未实现 <code>popovertarget 等声明式能力，showPopover() 方法也仅在 Chromium 和 Firefox 125+ 中可用。
为什么写了 popover 却没反应
这是最常遇到的静默失败场景，没有报错，但点击无响应：
- 目标元素不是“可 popover 元素”：
<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill9972" title="Wechat Article Html"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill9972" title="Wechat Article Html">Wechat Article Html</a> <p>将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p> </div> <a href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>、<span></span>、<button></button>默认不支持，必须用<div>、<code><section></section>等容器，并确保已挂载到 DOM（不能在<template></template>里或动态innerHTML插入后才加popover） -
popover写成了popover="auto"或popover="manual"：它只认存在与否，popover=""或popover才合法；带值写法在 Safari 会直接忽略，在 Chrome 125+ 已发警告 - 触发按钮没配对：用了
popovertarget="tip"，但目标元素 ID 是tip-1或含空格/点号（ID 只允许字母、数字、-、_） - 元素被
display: contents、overflow: hidden父容器截断，或处于<shadow-root></shadow-root>中——浏览器无法建立 popovertarget 关联 -
popovertarget的值必须严格等于目标元素的id字符串（大小写敏感，不支持#tip或 class 名） -
popovertargetaction只接受"show"或"hide"；"toggle"是常见误解，浏览器静默忽略，实际等同于"show" - 想实现“点一下开、再点一下关”，不能只靠单个按钮 +
popovertargetaction="toggle"，必须用 JS 判断：el.matches(':popover-open')（Chromium）或手动维护开关状态 - 关闭按钮必须显式写
popovertargetaction="hide"，否则点击仍会尝试打开——用户感知就是“关不掉” - 先判断：
if ("showPopover" in HTMLElement.prototype)，否则 Safari/Firefox 会直接抛TypeError: elem.showPopover is not a function - 目标元素不能是
<button></button>、<select></select>等交互控件，否则调用时抛DOMException - 必须确保元素已渲染进 DOM，且没有冲突的
display样式（如display: block会覆盖 UA 的display: none，导致定位异常） - 关闭按钮推荐写法：
<button onclick="saveDraft(); this.closest('[popover]').hidePopover()">确认</button>，用closest()避免硬编码 ID
popovertarget 和 popovertargetaction 怎么配才有效
这两个属性必须同时出现，且仅对 <button></button> 和 <input type="button"> 生效：
手动控制必须用 showPopover() 吗？怎么防报错
是的，只要想跨浏览器兼容或做关闭前逻辑（如保存草稿），就必须走 JS 路线，但调用前务必检测：
真正容易被忽略的是 z-index：原生 popover 默认层级低于 <select></select>、<video></video>、<iframe></iframe>，必须显式设为 z-index: 2147483647 才能压住它们——这个值不能是 CSS 变量，也不能靠 JS 动态注入样式表，得写死在 CSS 中。
