Popover API 的 show 方法不触发 HTML 内容渲染，因安全限制不执行脚本或绑定事件；需手动创建 DOM 节点并挂载事件，或使用 data-bs-html="true" 配合事件委托与 DOMPurify 防 XSS。
Popover API 的 show 方法不触发 HTML 内容渲染？
直接调用 popover.show() 时，如果传入的是纯 HTML 字符串（比如 "<button>删除</button>"），浏览器默认不会执行其中的脚本、也不会绑定事件监听器——这是安全限制，不是 bug。
- Popover 的
content或title参数只接受字符串或 DOM 节点，不自动执行内联<script> - 想让按钮可点击，必须手动创建
Element并挂载事件，再传给setContent（Bootstrap 5.3+）或通过setOptions更新 - 常见错误：把
innerHTML = "...<button onclick="doDelete()">..."当作可执行逻辑，实际onclick属性在动态插入后不会自动绑定
用原生 Popover 显示带交互的上下文菜单（非 Bootstrap）
现代浏览器原生 Popover（popover="auto"）不支持直接传 HTML 字符串做内容；它只渲染 slot 内的静态结构，且不提供 JS API 控制位置或延迟显示。
- 必须用
<div popover>...</div>+<button popovertarget="menu">配对，内容写在<div>里，不能靠 JS 注入 HTML 字符串 - 无法动态生成菜单项：每次更新都要重新写死 DOM 结构或手动替换
innerHTML后调用showPopover() - 兼容性差：
popover属性目前仅 Chromium 114+ 支持，Firefox / Safari 无计划跟进，生产环境慎用
Bootstrap 5.3 的 Popover 如何安全注入 HTML 并绑定事件
要用 data-bs-html="true" 开启 HTML 解析，但事件绑定仍需手动处理，否则点击无效。
- HTML 字符串中不能写
onclick，应改用事件委托：document.addEventListener("click", e => { if (e.target.matches("[data-action=delete]") {...} }) - 初始化前先设好选项：
new bootstrap.Popover(el, { html: true, content: () => document.getElementById("menu-template").innerHTML }) - 避免重复绑定：每次
show前检查是否已添加过事件监听器，可用el.hasAttribute("data-bound")标记 - 注意 XSS：若
content来自用户输入，必须先用DOMPurify.sanitize()过滤
为什么不用 title + data-bs-html 直接写菜单？
因为 title 属性值是字符串，浏览器会自动转义双引号和尖括号，导致 HTML 被当作文本渲染，而不是 DOM 节点。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<button title="<span>编辑</span><span>删除</span>" data-bs-html="true">→ 实际显示为文字 “<span>编辑</span>...” - 正确路径：用
data-bs-content属性，或 JS 中用函数返回 DOM 元素，或用模板元素 +innerHTML+document.importNode - 性能影响：每次 show 都重建节点比复用 fragment 慢约 2–3ms，高频触发菜单时建议缓存
DocumentFragment
Popover 的 HTML 支持太弱，Bootstrap 的也要绕开属性注入陷阱；最稳的方式其实是放弃“自动 HTML 渲染”，用 JS 创建 div、appendChild 事件监听器、再传给 setContent——看似多几步，但哪天换框架也不用重写交互逻辑。 
