TL;DR

Shadow DOM is the encapsulation boundary that lets Eloqra's chat widget look identical on any website, regardless of the host page's CSS.

Key Points

✓

Created with element.attachShadow({ mode }); styles defined inside the shadow root are scoped to it and do not leak into or out of the host page. [1][2]

✓

Eloqra mounts its [[live-chat-widget]] and floating [[chat-launcher]] inside a shadow root, so aggressive host-site CSS (resets, !important rules, frameworks) cannot distort the widget.

✓

Unlike an [[iframe]], a shadow root shares the same document and event loop, so the widget sizes itself to its content and reads page context without cross-frame messaging. [3]

✓

Encapsulation is two-way: the widget's fonts, colors, and layout stay contained, so it never restyles the host page it is embedded on. [4]

✓

Pairs cleanly with Eloqra's [[embed-code]] / [[javascript-widget]] install: one tiny script boots a fully isolated UI with no build step.

✓

mode: "open" exposes the shadow root via element.shadowRoot; mode: "closed" hides it, but neither is a security boundary. [1][2]

Why Eloqra renders the widget in Shadow DOM

Eloqra is designed to drop onto any website via a single embed snippet, which means it can land on pages with wildly different CSS. Without isolation, a host site's global resets, utility classes, or stray !important rules could shift the Chat Launcher bubble, recolor buttons, or collapse the chat panel. By attaching the Live Chat Widget to a shadow root, Eloqra gets a clean styling boundary: host-page CSS cannot reach inside, and the widget's own styles cannot leak back out and disturb the customer's design. ^[1]^[4] The result is that the Chat Message thread, Typing Indicator, and optional Pre-Chat Form render identically whether they sit on a minimal landing page or a heavily themed app.

Shadow DOM vs. iframe for chat widgets

Many widgets historically used an Iframe for isolation, but iframes need fixed dimensions, a custom messaging layer to talk to the page, and cannot easily adapt to host context. ^[3] A shadow root lives in the same document, so Eloqra's widget resizes naturally to its content, reads the page URL and other Visitor Tracking signals directly, and runs its HTTP Polling loop against the same origin without postMessage plumbing. The trade-off is that Shadow DOM only isolates DOM and CSS, not JavaScript globals, so Eloqra keeps its widget code namespaced under a single config global (ELOQRA_CHAT_CONFIG) to avoid clashing with the host page's scripts.

How encapsulation actually works

A developer (or the host page itself) calls attachShadow on a host element, which returns a ShadowRoot the widget builds its UI inside. ^[2] Styles placed in the shadow tree, whether via a

Sources & References

Using shadow DOM - MDN Web Docs ↗

Element: attachShadow() method - MDN Web Docs ↗

How to Use the Shadow DOM to Isolate Styles on a DOM That Isn't Yours - Courier ↗

Shadow DOM CSS Isolation: Embed a Widget Without Breaking the Host Page - DEV Community ↗

Last updated: June 25, 2026

Related Terms

Live Chat Widget

A live chat widget is the embeddable, in-browser chat interface a website loads from a small script so visitors can message a business in real time without leaving the page. In Eloqra it is a floating launcher and chat panel that boots from a single <script> tag and renders inside a Shadow DOM.

JavaScript Widget

A JavaScript widget is a self-contained chunk of front-end code, loaded from a single script tag, that injects an interactive UI into any third-party web page. In Eloqra it is the live-chat widget that boots from one snippet and renders the chat launcher and conversation panel directly on a customer's site.

Embed Code

An embed code is a short snippet of HTML or JavaScript a website owner pastes into their pages so a third-party tool loads and runs on their site. For Eloqra it is a two-line script snippet that sets a project configuration and loads the chat script, which then injects the live-chat widget.

Iframe

An iframe (inline frame) is an HTML element that embeds a separate, self-contained HTML document inside the current page, giving the embedded content its own DOM, stylesheets, and JavaScript scope. It is one of the classic ways to drop third-party UI like a chat widget onto a host website without its code clashing with the page.

Chat Launcher

A chat launcher is the small floating button — usually a speech-bubble icon pinned to a bottom corner of the page — that a visitor clicks to open a live-chat window. It is the persistent, always-visible entry point to the chat experience.

HTTP Polling

HTTP polling is a real-time technique where the client repeatedly sends HTTP requests on a fixed interval to ask the server whether new data is available, instead of holding a persistent connection. Eloqra's chat widget uses short polling roughly every 4-5 seconds to fetch new messages and typing state.

Collect testimonials that build trust

Eloqra gives you a lightweight live chat widget that routes every visitor message to your Telegram — free while in early access.

Get Started Free