上周还在为一个下拉菜单死磕 150 行 JavaScript 代码。这破玩意儿不仅要管展开、收起,还得处理焦点管理和无障碍访问(Accessibility)。更别提那无穷无尽、让人崩溃的 z-index 层级大战了;移动端上按 ESC 键退出的逻辑直接罢工;至于那个'点击空白处自动关闭'的屎山代码,更是让我连吐槽的力气都没有了。
就在我快要砸键盘的时候,我猛然醒悟:Popover API 已经在 2025 年 4 月达成了 Baseline Widely Available(基线广泛可用) 状态!这意味着,它现在已经在 Chrome、Firefox、Safari 和 Edge 里实现了完美的跨浏览器支持。于是,我直接把那个恶心的组件彻底推翻,只用了区区 8 行纯 HTML 代码就搞定了一切——一行 JS 都没写!
没错,我说的就是 HTML Popover API——这是一种纯原生、声明式的终极魔法,能让你在完全不碰 JS 的情况下,轻松捏出各种浮层、提示框(Tooltip)、菜单和对话框。
回想过去这些年,为了搞个破浮层,前端兄弟们简直受尽了折磨:被 Popper.js 这种定位库来回摩擦,手动维护犹如黑洞般的 z-index 堆栈,绞尽脑汁地手写焦点捕获逻辑,还要像个老妈子一样自己去挂载各种无障碍 ARIA 属性。但现在,时代变了!浏览器大爷把这些脏活累活全包了。今天带大家见识一下,如何仅凭 HTML 属性,就能徒手搓出以前必须依赖 Tippy.js 或 Floating UI 才能搞定的复杂浮层组件。
这个月,我已经把这套黑科技实装到了四个线上项目中。结果呢?打包体积直接暴降 35KB!代码干净得令人发指,无障碍访问更是无可挑剔。来吧,让我带你扒开它的底裤,看看它到底是怎么运作的,它的杀手锏是什么,以及到底有哪些千万不能踩的坑。
跟 JS 组件库说拜拜:纯享版 Popover
咱们先来搞懂这个能让你不写一行 JS、不调任何库,就能做出全功能浮层交互的神仙特性。
在万恶的旧社会,搞个浮层是这么玩的:你得用绝对定位把元素钉死,小心翼翼地防着 z-index 冲突,老老实实地写监听器来捕捉外部点击,手撸焦点捕获,加上 ESC 键监听,手动管理 ARIA 属性,最后还要用 JS 把这一大坨屎山给串联起来。
// 远古时代的破烂玩法:手动地狱
const button = document.querySelector('.trigger');
const popover = document.querySelector('.popover');
let isOpen = false;
button.addEventListener('click', () => {
isOpen = !isOpen;
popover.style.display = isOpen ? 'block' : 'none';
popover.style.zIndex = '9999';
if (isOpen) {
popover.setAttribute('aria-hidden', 'false');
// 还要手写焦点捕获...
}
});
.(, {
(!popover.(e.) && !button.(e.)) {
isOpen = ;
popover.. = ;
}
});
.(, {
(e. === && isOpen) {
isOpen = ;
popover.. = ;
}
});

