原生 popover 点击内部关闭是因事件冒泡与浏览器定位策略所致，并非 bug；popovertarget 模式依赖 document 级 click 判断，内部可聚焦元素或样式干扰（如 position/transform）易致误判“外部点击”；唯一可控方案是 popover="manual" 配合 showPopover()/hidePopover() 显式控制。
原生 popover 默认点击弹出层内部会保持打开，但实际中常因事件冒泡、DOM 位置或样式干扰导致意外关闭——这不是 bug，而是触发机制和浏览器定位策略共同作用的结果。
popovertarget 模式下点击 popover 内部为何会关闭？
这是最典型的误解来源：很多人以为 popovertarget 是纯声明式绑定，其实它底层仍依赖 click 事件冒泡到 document 级别做“外部点击”判断。一旦 popover 元素内有 <button></button>、<a></a> 或其他可聚焦元素，它们的默认行为（如表单提交、页面跳转）可能触发整个 popover 的生命周期重置；更隐蔽的是，若 popover 被提升到 <body> 末尾（原生行为），而你在 CSS 中给它加了 position: absolute 或 transform，会导致 event.target.closest() 在某些场景下匹配失败，浏览器误判为“点在外面”。
-
popovertarget模式不提供事件拦截能力，无法阻止 popover 内部点击触发关闭逻辑 - 目标元素（带
popover的<div>）必须是静态容器，避免嵌套<button popovertarget="x">这类会再次触发 popover 的元素 - 不要在 popover 内部使用
type="submit"的按钮，或未加event.preventDefault()的链接，否则页面跳转或表单提交会间接导致 popover 销毁
showPopover() + popover="manual" 是唯一可控路径
只有 popover="manual" 配合 JS 显式控制，才能真正实现“点里面不关、点外面才关”的行为。此时浏览器不会自动监听外部点击，所有开关逻辑由你完全掌控。关键不是“怎么让它不关”，而是“只在你想关的时候才关”。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 触发元素绑定 click 后调用
panel.showPopover()，而不是依赖popovertarget - 监听
document的click事件，用event.target.closest("#panel")和event.target.closest("[popovertarget='panel']")双重判断是否点击在 popover 或其触发器内 - 务必在
showPopover()后再绑定关闭监听，避免首次点击就触发隐藏 - 如果 popover 内含表单，提交前先调用
event.preventDefault()，提交成功后再手动panel.hidePopover()
容易被忽略的 DOM 与样式陷阱
原生 popover 会自动被移动到 <body> 末尾，这既是优势也是坑。你写的 CSS 若基于父容器定位（比如 .container > [popover]），根本不会生效；更麻烦的是，给 popover 加 display: none 或 visibility: hidden 会破坏其内部状态机，导致 showPopover() 报错或静默失败。
立即学习“前端免费学习笔记（深入）”；
- 所有样式必须用属性选择器，例如
[popover="manual"]，不能依赖层级关系 - 禁止对 popover 元素设置
position: absolute、transform、z-index（除非你清楚 UA 默认用了position: fixed且 z-index 极高） - 不要把 popover 放进
<template>、<shadow-root>或通过innerHTML动态插入后才加popover属性——Chrome 125+ 已拒绝解析这类“延迟注册”的 popover - 检查 ID 命名：
popovertarget="help-panel"对应的<div id="help-panel" popover="manual">，ID 中不能有空格、中文或.、#等 CSS 特殊字符
真正的难点不在“怎么写”，而在“怎么让浏览器承认它是 popover”——结构合规、时机正确、ID 匹配、元素类型合法，四者缺一不可。Safari 和 Firefox 当前仍不支持 showPopover()，跨浏览器方案里，dialog 或 floating-ui 仍是更稳妥的选择。
