原生 popover 无法实现多级菜单，因其不支持嵌套、无父子层级关系、不维护焦点流且 aria 语义断裂；推荐改用 absolute 定位 + classlist.toggle() 配合完整 aria 属性的轻量方案。
原生 popover 不能做多级菜单——它不支持嵌套、不暴露定位控制、无法响应 hover 或键盘导航，强行套用只会卡在二级就失效。
为什么 popover="auto" 绑不了子菜单
浏览器对 popover 元素的层级管理是扁平的：每个 popover 都被提升到顶层堆叠上下文，但彼此之间没有父子关系。你无法让一个 popover 作为另一个的“子容器”，调用 showPopover() 时，前一个会自动收起（Chrome 行为），Firefox 可能重叠但无焦点流，Safari 则大概率只显示最晚触发的那个。
-
popover元素不接受aria-owns或aria-controls关联其他 popover，ARIA 语义链断裂 - 子菜单若也加
popover，点击父项触发showPopover()后，再点子项会先 hide 父再 show 子，视觉跳变且无过渡 - 无法监听
keydown在多个 popover 间切换焦点——tabindex对 popover 内部元素有效，但浏览器不维护 popover 间的 tab 顺序
用 popover 做“伪多级”的典型翻车场景
常见错误是把二级菜单塞进一级 popover 里，比如：
<button popovertarget="menu-1">文件</button> <div id="menu-1" popover> <button popovertarget="submenu-1">新建</button> <div id="submenu-1" popover>文本｜图片｜表格</div> </div>
这在 Chrome 114+ 中会直接报错：DOMException: Cannot show a hidden popover，因为 submenu-1 默认不可见，且未被声明为可交互 popover 容器（缺少 popover="auto" 或对应 JS 控制）；即使补上，点击“新建”时 menu-1 会先 hide，导致视觉断层。
- 所有 popover 必须有唯一
id，且popovertarget值严格匹配——大小写、空格都不能错 - 二级 popover 若没设
popover="auto"，showPopover()调用失败但不抛错，静默失效 - 移动端 Safari 对嵌套 popover 支持为 0：点一次可能不显示，点两次才闪一下，且 touch 事件穿透
真轻量又可用的替代方案（20 行 JS 足够）
放弃 popover，改用 position: absolute + classList.toggle()，既能跟随按钮、支持任意深度，又兼容 keyboard 和 touch：
- 每个可展开项用
<button aria-haspopup="menu" aria-expanded="false"></button>，子菜单<ul role="menu"></ul>紧跟其后 - JS 只监听
click和keydown（Enter/Space），调用e.stopPropagation()阻断冒泡 - 定位靠
getBoundingClientRect()计算按钮位置，再设top/left，不依赖父容器position - 隐藏用
visibility: hidden; opacity: 0;配合transition，避免display: none导致焦点丢失
关键不是代码多寡，而是把 aria-expanded 同步更新、把子菜单 role="menu" 和 aria-labelledby 补全——这些才是多级菜单能被屏幕阅读器识别、键盘用户操作的前提。原生 popover 在这里帮不上忙，反而添乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
