When I built rabbitholes — a Chrome extension that explains any highlighted text inline — the hardest UI problem wasn't the explanation quality. It was making the tooltip look like it belonged on the page you were reading.
A Substack article, a Wikipedia entry, and a GitHub README all use different fonts. A tooltip that renders in a hardcoded sans-serif looks foreign on a serif publication and just wrong on a monospace docs site. The fix sounds simple: inherit the host font. The implementation choice makes it complicated.
I tried an iframe first. Iframes are the conventional choice for extension overlays because they give you full style isolation — host CSS can't touch anything inside. But isolation cuts both ways. An iframe is a separate document with no access to the host page's font loading state. To inherit the font, you read getComputedStyle(document.body).fontFamily and inject it into the iframe's <head>, but by the time that injection runs, the iframe has already done its first render with a fallback. Flash of unstyled content, every time, on every page.
Shadow DOM solves this. The shadow root attaches to a node in the host document, so it shares the host's font loading timeline. rabbitholes reads the computed font family at tooltip creation time, passes it in as a CSS variable, and the shadow root's styles consume it. First paint uses the correct font. No flash.
Shadow DOM also blocks host-page CSS from reaching the tooltip internals — same encapsulation benefit as iframe, minus the font problem. The thing it doesn't block is JavaScript: extension content scripts can still traverse the shadow boundary. For rabbitholes that's fine; the relevant trust boundary is between the extension and the host page, and nothing sensitive lives in the tooltip DOM anyway. API requests go directly from the browser to api.anthropic.com and api.search.brave.com with no intermediary server.
The tooltip behavior: highlight text, explanation renders next to your cursor. Click any word in the explanation to explore it. Drag across words to select a phrase. A rabbit-hole counter tracks how many hops deep you've gone.
github.com/robertnowell/rabbitholes
Top comments (0)