popovertarget不能单独实现弹窗显隐，必须配合popover属性的元素使用；当前仅chrome 125+和safari 17.4+有限支持，firefox尚未启用，且需id严格匹配、dom同步存在、不跨shadow dom等严苛条件。
popovertarget 属性不能单独实现弹窗显隐，必须配合 <dialog></dialog> 元素和 popover 属性使用，且当前（2026年5月）仍处于实验性阶段，Safari 17.4+ 和 Chrome 125+ 才开始有限支持，Firefox 尚未启用。
为什么 popovertarget 单独写没反应
它不是“绑定触发器”的独立开关，而是 popover API 的协作属性之一。浏览器会忽略仅带 popovertarget 但无对应 popover 标记的元素。常见错误现象：按钮点击后页面无任何变化，控制台也无报错，容易误以为代码写错了。
-
<button popovertarget="mydialog">点我</button>必须搭配<dialog id="mydialog" popover></dialog>—— 缺少popover属性，popovertarget直接失效 -
id值必须完全匹配（区分大小写），且<dialog></dialog>必须在 DOM 中已存在，不能动态插入后再用该属性触发 - 不支持嵌套或跨 shadow DOM 使用；若
<dialog></dialog>在自定义元素内部，popovertarget无法定位到它
popover + popovertarget 的最小可行结构
这是目前唯一能“免 JS 控制显隐”的原生组合，但需注意：它只处理显示/隐藏动作，表单提交、焦点管理、键盘关闭（Esc）等仍需 JS 补充。
<button popovertarget="login-dialog">登录</button>
<dialog id="login-dialog" popover><form method="dialog">
<input name="user" required><button type="submit">确定</button>
<button popovertarget="login-dialog" popovertargetaction="hide">取消</button>
</form>
</dialog>
-
method="dialog"是关键，让 submit 自动触发close()并返回值，否则需监听submit事件手动调用close() -
popovertargetaction="hide"显式声明关闭行为，避免某些浏览器默认执行 toggle - 首次显示前无需 JS 调用
showModal()，但若用户手动调用dialogEl.close()后再点按钮，部分 Chrome 版本会出现“无法再次打开”问题，建议统一用showPopover()替代（需 JS）
哪些场景下它会静默失败
不是所有“弹窗需求”都适合这套方案。它本质是轻量级 tooltip / action menu 的延伸，不是通用模态框替代品。
- 需要 backdrop 点击关闭？不行 ——
popover模式下点击遮罩不会自动关闭，必须额外加<button popovertarget="xxx" popovertargetaction="hide"></button> - 要锁焦点或防 Tab 出弹窗？不支持 ——
popover不触发inert或焦点捕获，键盘用户可自由切出 - 内容含 iframe、第三方 widget 或复杂表单校验？大概率布局错乱 —— popover 容器尺寸由内容撑开，无固定宽高控制，且不支持
position: fixed覆盖逻辑 - 服务端渲染（SSR）页面中预设
open属性？会被忽略 ——<dialog popover open></dialog>中的open无效，必须由用户交互触发
真正“无 JS 实现弹窗显隐”的路径只有这一条，但它脆弱、受限、兼容窄。生产环境若需稳定、可访问、可扩展的弹窗，仍得回到 <dialog></dialog> + 少量 JS（仅控制 showModal()/close() 和 Esc 监听）的老实路子。别被 popovertarget 的名字骗了——它不是触发器绑定语法糖，而是一套尚在演进中的 popover 协议入口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
