Independent Popups with Element Reparenting & The HTML Popover API
summary
Compares CSS-only popups to the new popover API (landed April 2024) and a fallback built via element reparenting used at chatam: popups are hoisted into a document-body container using a proxy element with its own shadow DOM, assigned styles copied via adoptedStyleSheets, slotted children mirrored with mutation observers, z-index hoisted to the proxy, and scroll listeners to reposition. Hundreds of lines produce a working replacement, but it is notably slower, can break accessibility/tab order, and requires consumer workarounds.
AI-written summary · about
chapters (19)
- 0:00Popups and anatomy
- 1:04CSS-only popup limits
- 2:05HTML Popover API benefits
- 3:49Top layer in Popover API
- 5:13HTML attributes with Popover
- 6:15Auto vs manual popovers
- 7:18When to avoid Popover API
- 7:58Element reparenting for popups
- 9:21Shadow DOM and slots
- 11:47Correlating elements after reparent
- 12:50Copying styles and inheritance
- 14:55Tracking CSS variable changes
- 15:38Containing blocks fundamentals
- 17:23Positioning popups to anchors
- 18:47Stacking contexts and Z-index
- 20:31Managing Z-index in reparented
- 21:34Scrolling and repositioning
- 22:37Performance vs accessibility
- 23:58Q&A
related talks
32mHow popovers are about to become a whole lot easier to build
44mThe Revival of Native Popups with the Popover API
48mThe New Frontend Toolkit: Popover API, Dialog, and Next-Gen CSS
32mNative Popovers with the Popover API
44mDialog dilemmas and modal mischief: a deep dive into popovers
47mThe future of UI is "open"
31mDiving into the Toplayer: Where Dialogs, Popovers, and Modals Live
21mInstall Nothing: App UIs With Native Browser APIs