beforetoggle 无法用于初始化，因其仅提供切换后的 opened 状态，不支持异步阻塞、dom 修改或事件取消；可靠时机是 showpopover() 返回的 promise resolve 后执行初始化。
不能用 beforetoggle 在显示前执行初始化 —— 它不提供“即将显示”状态，也不支持异步阻塞或 DOM 修改。
为什么 beforetoggle 无法用于初始化
beforetoggle 事件在 toggle 操作开始时触发，但事件对象只有 opened 属性（布尔值），表示切换「之后」的状态，不告诉你当前是开还是关。它无法区分是 show 还是 hide 的前置动作，更不能取消、延迟或修改 popover 内容。
- 点击按钮触发
popovertarget="x"→beforetoggle立即触发，event.opened === true，但此时 popover 尚未渲染，DOM 可能还没准备好 - 用户按 ESC 关闭 → 同样触发
beforetoggle，event.opened === false，但你无法在此刻“阻止关闭”或“保存草稿” - 事件不可取消：
event.preventDefault()无效；event.stopImmediatePropagation()也无济于事
真正可行的初始化时机：用 showPopover() 的 Promise 链
如果你需要 JS 控制显隐，且必须在显示前填充内容、绑定事件或计算尺寸，唯一可靠路径是放弃属性驱动，改用显式 API，并利用其返回的 Promise：
-
showPopover()返回 Promise，**在 popover 实际进入 top-layer 并完成首次布局后 resolve**（不是调用瞬间） - 把初始化逻辑放在
showPopover().then(() => { /* 此处 DOM 已就位 */ })里，而非beforetoggle - 若需“每次显示都重初始化”，确保在
showPopover()调用前清理旧状态（如清空innerHTML、移除事件监听器）
示例：
const panel = document.getElementById('my-panel');
document.getElementById('trigger-btn').addEventListener('click', async () => {
// 先初始化内容（可含 fetch、渲染模板等）
panel.innerHTML = await loadHelpContent();
setupInteractiveElements(panel);
<p>// 再显示 —— 此时 DOM 已更新，且 showPopover 确保定位/焦点就绪
await panel.showPopover();
});
</p>
如果坚持用 HTML 属性联动，初始化只能靠提前注入
当使用 <button popovertarget="x"></button> + <div id="x" popover> 这类声明式写法时，<code>beforetoggle 依然不可靠。正确做法是：
- 确保 popover 元素在页面初始 HTML 中就存在，且内容已就绪（服务端渲染或静态填充）
- 如需动态内容，改用
showPopover()显式控制，彻底放弃popovertarget - 若必须混合使用，可在 popover 元素上加
data-init="lazy"，并在首次showPopover()前检查并执行初始化，避免重复
最易被忽略的一点：很多人试图在 beforetoggle 里调 panel.querySelector('input').focus()，结果失败 —— 因为此时元素尚未 attach 到 top-layer，focus() 被静默忽略。真要聚焦，得等 showPopover() 的 Promise settle 后再操作。
