Building an inline tooltip for a Chrome extension forces a choice: iframe or shadow DOM. I picked shadow DOM, and the reason matters if you're building anything that has to render on arbitrary host pages. The problem with iframes is font inheritance. An iframe is a separate document — it has no access to the host page's computed styles. If the page you're on uses a custom web font (Inter, Söhne, whatever), your iframe renders in the browser default. You can try to detect and re-inject the font declarations, but you'll almost always get a flash of unstyled content before the font loads, and on pages that load fonts conditionally or lazily, detection is unreliable. The tooltip looks like it belongs to a different product. Shadow DOM sits inside the host document's render tree. It inherits font-family , font-size , and line-height from the cascade unless you explicitly reset them.…