Menu

Post image 1
Post image 2
1 / 2
0

Why I used shadow DOM instead of iframes for inline tooltips

DEV Community·J Now·26 days ago
#GRUbY63T
#ai#css#frontend#webdev#shadow#host
Reading 0:00
15s threshold

Building a Chrome extension that renders explanations next to your cursor sounds simple until the tooltip inherits the host page's CSS and breaks. Iframes avoid that — they're fully isolated — but iframe content can't match host-page fonts without a FOUC that makes the overlay feel foreign on every site you visit. Shadow DOM solves this differently. The tooltip tree is scoped to the shadow root, so host stylesheets can't bleed in, but you can still read the host's computed font stack and apply it explicitly inside the shadow. The result looks native on any page without the layout-shift flash. rabbitholes uses this to render explanations from Claude Haiku inline, next to wherever you've highlighted text. The shadow root mounts as a child of document.body , absolutely positioned to cursor coordinates. Because it doesn't touch the host DOM tree, it can't accidentally mutate classes, trigger reflows on adjacent elements, or conflict with the page's own event listeners.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More