🕵️ SicherheitslückenDetection and response for the actively exploited ProxyShell vulnerabilities(02.06.2022 um 02:00 Uhr)
⚠️ Malware / Trojaner / VirenHunting In Memory(21.06.2022 um 02:00 Uhr)
🔧 AI Nachrichten Getting the Most Out of Transformers in Elastic(23.08.2022 um 02:00 Uhr)
🕵️ SicherheitslückenDetecting and responding to Dirty Pipe with Elastic(09.09.2022 um 02:00 Uhr)
🕵️ SicherheitslückenDetection rules for SIGRed vulnerability(22.11.2022 um 01:00 Uhr)
🕵️ SicherheitslückenDetecting Exploitation of CVE-2021-44228 (Log4j2) with Elastic Security(22.11.2022 um 01:00 Uhr)
🕵️ SicherheitslückenElastic's response to the Spring4Shell vulnerability (CVE-2022-22965)(22.11.2022 um 01:00 Uhr)
🕵️ SicherheitslückenAnalysis of Log4Shell vulnerability & CVE-2021-45046(30.11.2022 um 01:00 Uhr)
⚠️ Malware / Trojaner / VirenEMOTET Dynamic Configuration Extraction(01.12.2022 um 01:00 Uhr)
⚠️ Malware / Trojaner / VirenQBOT Configuration Extractor(06.12.2022 um 01:00 Uhr)
🕵️ SicherheitslückenDetection and response for the actively exploited ProxyShell vulnerabilities(02.06.2022 um 02:00 Uhr)
⚠️ Malware / Trojaner / VirenHunting In Memory(21.06.2022 um 02:00 Uhr)
🔧 AI Nachrichten Getting the Most Out of Transformers in Elastic(23.08.2022 um 02:00 Uhr)
🕵️ SicherheitslückenDetecting and responding to Dirty Pipe with Elastic(09.09.2022 um 02:00 Uhr)
🕵️ SicherheitslückenDetection rules for SIGRed vulnerability(22.11.2022 um 01:00 Uhr)
🕵️ SicherheitslückenDetecting Exploitation of CVE-2021-44228 (Log4j2) with Elastic Security(22.11.2022 um 01:00 Uhr)
🕵️ SicherheitslückenElastic's response to the Spring4Shell vulnerability (CVE-2022-22965)(22.11.2022 um 01:00 Uhr)
🕵️ SicherheitslückenAnalysis of Log4Shell vulnerability & CVE-2021-45046(30.11.2022 um 01:00 Uhr)
⚠️ Malware / Trojaner / VirenEMOTET Dynamic Configuration Extraction(01.12.2022 um 01:00 Uhr)
⚠️ Malware / Trojaner / VirenQBOT Configuration Extractor(06.12.2022 um 01:00 Uhr)

🔧 Programmierung 🕛 kürzlich 2 Min Lesezeit
0

Why shadow DOM beat iframe for inline tooltips

↗ Quelle (dev.to)
🗣️ Stimme:

The iframe approach seems obvious: sandboxed, isolated, clean. I tried it first. The problem is that iframes can't inherit host-page fonts without a FOUC — you either flash unstyled content, or you hardcode a font stack and accept that your tooltip looks alien on every site with a custom typeface. On a site like Wikipedia or the NYT, that mismatch is immediately jarring.



Shadow DOM solves this differently. The extension's tooltip attaches as a shadow host, which means it's structurally isolated from the page's CSS cascade but physically in the same document. The host page's font rendering applies at the OS level, so body text in the tooltip inherits the same antialiasing and subpixel rendering as the surrounding article. No flash. No mismatch.



The tradeoff is that shadow DOM isolation isn't total. Some CSS custom properties (variables) can pierce the shadow boundary, so if the host page defines something like --background: transparent at the :root level, you need to explicitly reset inside your shadow styles. I ran into this on a few dark-mode sites where the tooltip was inheriting a near-invisible background until I added an explicit background: white block scoped to the shadow root.



The other thing iframes make hard: positioning. An absolutely-positioned iframe has to fight the host page's stacking context and overflow rules. I wanted the tooltip to anchor to cursor position, which means reading mouseup coordinates and placing a DOM node there. With shadow DOM the placement logic is just standard position: fixed math. With an iframe, you're fighting overflow: hidden on parent containers on sites you don't control.



For rabbitholes — a Chrome extension that renders inline explanations from Claude Haiku 4.5 for any text you highlight — the shadow DOM approach means the tooltip looks at home on every site, inherits correct fonts without polling, and doesn't trigger layout shifts when it appears.



Zero telemetry, Manifest V3. Requests go directly from your browser to api.anthropic.com.



https://github.com/robertnowell/rabbitholes

Vollständiger Original-Bericht
Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
↗ Original-Artikel auf dev.to lesen
Wie bewertest du diesen Beitrag?
1 Klick Feedback
Teilen mit Netzwerk & Team:

Community-Analysen & Experten-Meinungen 0

Verfasse deine eigene Analyse, teile Workarounds oder diskutiere diesen Vorfall im Blog.
Noch keine Community-Analyse verfasst. Markiere einen Textabschnitt oder klicke oben auf Eigene Analyse verfassen“!
Community Pulse: Relevanz-Einschätzung
1 Klick Experten-Votum
🔴 Akute Relevanz 49%
🟡 In Evaluierung 28%
🟢 Keine Auswirkung 19%
Spannende Innovation 5%
Verwandte Story-Cluster & Quellen (Vektor-KI)
Port 8095 Engine
1 Quelle
Announcing Project Zenith: The ready-to-code Windows experience on developer-class devices
1 Quelle
Peer Pressure: Inside the Sality Botnet Disruption Operation
1 Quelle
How Integrated Malware Sandboxing Makes EDR Investigations Faster
Ähnliche Beiträge
🔍 Verwandte News

Auch interessante Nachrichten Why shadow DOM beat iframe for inline tooltips

Thematisch verwandte Begriffe: shadow, beat, iframe, inline · 6 Treffer

Laden...

Videos werden geladen ...

Laden...

Beiträge werden geladen ...

Laden...

Videos werden geladen ...

Laden...

Beiträge werden geladen ...

Laden...

Videos werden geladen ...

Laden...

Beiträge werden geladen ...

Laden...

Videos werden geladen ...

Laden...

Beiträge werden geladen ...

Laden...

Videos werden geladen ...