HTML原生无popover属性但有popover元素及popovertarget等属性，属2023年起W3C新特性，仅Chromium 114+与Safari 17.4+支持，Firefox尚未实现；通过popovertarget指向带popover属性的元素ID，配合popovertargetaction（show/hide/toggle）实现免JS控制，popover为布尔属性，需显式声明且目标元素须在首次渲染时存在DOM中。
HTML 原生没有 popover 属性，但有原生 popover 元素和 popovertarget 等属性——这是 2023 年起逐步落地的 W3C 新特性，目前仅 Chromium 114+（Chrome/Edge 114+、Opera 100+）和 Safari 17.4+ 支持，Firefox 尚未实现。
怎么触发 popover 弹出层（popovertarget 和 popovertargetaction）
popover 的核心是「非 JavaScript 触发」：靠属性联动，不写 JS 也能开闭。
-
popovertarget必须指向一个具有popover属性的元素 ID（不能是 class 或标签名） -
popovertargetaction取值为show、hide或toggle；省略时默认为toggle - 触发元素（如
<button>）和目标元素（<div popover>）无需父子关系，可跨 DOM 位置 - 注意大小写：
popover是属性名，不是Popover或data-popover
<button popovertarget="help" popovertargetaction="show">帮助</button> <div id="help" popover>这里是帮助内容</div>
为什么 popover 元素默认不可见且需手动显式声明
浏览器不会自动把任意 div 当作 popover——必须显式添加 popover 属性（无值），否则不进入 popover 生命周期，也无法被 popovertarget 控制。
- 仅加
popover属性，元素会自动获得position: fixed、inset: 0、contain: layout style paint等 UA 样式，但初始display: none - 不支持
popover="auto"或popover="manual"等值——该属性是布尔型，有即生效 - 若元素已有
display: block等样式，会与 UA 样式冲突，导致定位异常或无法显示
常见报错和兼容性陷阱
控制台看不到错误，但行为失效——这是最易踩的坑。
立即学习“前端免费学习笔记（深入）”；
-
DOMException: Failed to execute 'showPopover' on 'HTMLElement': The element does not have a popover attribute：调用 JS 方法前忘了加popover属性 - 点击无反应：目标元素 ID 拼写错误，或 ID 值含空格/特殊字符（只允许字母、数字、
-、_） - Safari 17.4+ 要求 popover 元素必须在首次渲染时就存在于 DOM 中（不能动态
innerHTML插入后才加popover） - Chrome 114–125 存在 z-index 隐患：popover 默认层级低于
<select>、<video>等原生控件，需手动设z-index: 10000以上
要不要用？关键看场景和兼容要求
如果项目只需支持最新 Chrome/Edge/Safari，且弹层逻辑简单（如工具提示、确认框），原生 popover 能显著减少 JS 体积和焦点管理代码；但只要需支持 Firefox、旧版 Chrome 或复杂交互（拖拽、表单嵌套、动画过渡），仍得回退到 dialog + 手动 JS 或第三方库。
特别注意：popover 不提供内置遮罩层（backdrop）、不触发 focusin 流、不自动管理 Escape 关闭（除非用 showModal() 配合 <dialog popover>，但此时已偏离轻量初衷）——这些“缺失”不是 bug，是设计取舍。
