Building an on-page tooltip that doesn't break the host page turns out to have one real decision point: shadow DOM or iframe overlay. I went with shadow DOM for rabbitholes — a Chrome extension that renders inline explanations next to your cursor when you highlight text. The extension lets you click any word in the explanation to go deeper, chaining lookups without ever leaving the page. The iframe path seems obvious at first. Iframes sandbox your content, so style collisions are impossible. But iframes can't read the host page's computed font stack. You either ship a fallback font that visibly differs from the article you're reading, or you FOUC on every load while you inspect and mirror the host's fonts via JavaScript. Neither is acceptable when the whole point is a tooltip that feels native to the page. Shadow DOM gives you a separate style scope without the isolation penalty. CSS custom properties still pierce the shadow boundary if you explicitly forward them, but regular host-page styles don't leak in.…