I built rabbitholes to keep Wikipedia-style context one highlight away, inline, without opening a new tab. The hard part wasn't the API integration — it was injecting a tooltip into arbitrary host pages without the tooltip looking wrong or breaking the page.
Two options: iframe overlay or shadow DOM.
Iframes are isolated by design, which sounds right, but that isolation cuts both ways. Fonts loaded by the host page aren't available inside an iframe unless you explicitly load them again — and loading them again means a flash of unstyled content while they download. On a long-form article where the reading typeface is part of the experience, the tooltip snapping from system-sans to the correct font mid-render is visually jarring enough that I dropped the approach after one test.
Shadow DOM gives encapsulation without the font problem. The shadow root participates in the browser's font-loading lifecycle alongside the host document, so fonts the page already loaded are available inside the shadow tree immediately. The tooltip renders in the correct typeface on the first paint.
Positioning is also cleaner. The shadow host element lives in the normal DOM, so I can place it with position: absolute using coordinates from Range.getBoundingClientRect() — cursor-relative, no coordinate-space translation required. With an iframe I'd have been fighting two separate viewport frames.
