𝗦𝗵𝗮𝗱𝗼𝘄 𝗗𝗢𝗠 𝗼𝗿 𝗶𝗳𝗿𝗮𝗺𝗲 𝗳𝗼𝗿 𝘁𝗼𝗼𝗹𝘁𝗶𝗽𝘀

I built Rabbitholes. It gives you Wikipedia-style context in one highlight. No new tabs.

The hard part was the tooltip. I needed it to fit any host page. It had to look right. It had to stay stable.

I tried iframes first. Iframes isolate content. This creates a font problem. The tooltip lacks page fonts. It flickers during load. This looks bad.

I switched to Shadow DOM. It isolates styles but shares fonts. The tooltip uses the page font on the first paint.

Positioning is easier. The shadow host lives in the normal DOM. I use coordinates from the browser. I avoid coordinate translation.

Shadow DOM is not perfect isolation. Some page styles leak in. I fixed this. I declared every CSS property on the container. This is verbose. It works on Wikipedia, Substack, and NYT.

I kept the footprint small:

Source: https://dev.to/palo_alto_ai/shadow-dom-vs-iframe-for-browser-extension-tooltips-a-build-note-33c5 Optional learning community: https://github.com/robertnowell/rabbitholes