视频画中画功能我们已经很熟悉了——看球赛直播、跟教程学代码，小窗口始终置顶，工作娱乐两不误。但有个问题一直没人回答：为什么只有视频能享受这种待遇？

一个习惯单屏工作的开发者也有同样的困惑。他不想在浏览器标签页之间来回切换，只想把网页里的某个小组件——比如Markdown编辑器、任务清单或者日志查看器——撕下来，让它悬浮在IDE上方，随时可用又不打断工作流。

打开网易新闻 查看精彩图片

于是他做了pip-it-up：一个开源React工具包，专门封装浏览器的Document Picture-in-Picture API。

大多数人熟悉的画中画API只能处理标签，功能单一。Document PiP API完全不同——它打开的是一个完整功能的浮动浏览器窗口，可以承载任何交互式HTML内容。按钮、输入框、iframe、canvas、React组件，全部都能在这个真正置顶的浮动窗口里正常工作。

理论上这很完美，实际用在React项目里却有三道坎。

第一关是CSS样式隔离。PiP窗口打开时是一张白纸，主应用里的Tailwind工具类、Emotion或Styled Components样式、CSS Modules，一概不继承。组件一进去就变成了裸HTML，不是视觉瑕疵，是直接崩溃。

第二关更隐蔽：DOM迁移与虚拟DOM状态的冲突。原生API要求你把DOM节点物理移动到另一个文档中，浏览器会把它当成全新元素。纯JavaScript还能应付，React却因此丢失组件身份——虚拟DOM树追踪不到这个节点，结果就是组件卸载再挂载，内部状态清零、事件监听断开、滚动位置重置、输入光标和动画状态全部丢失。