Glossary
Shadow DOM
A private DOM subtree attached to an element, with CSS that stays inside it. Shadow DOM is how a widget dropped into a stranger’s page keeps its own look and leaves the page’s look alone.
General definition
Shadow DOM is one of the Web Components standards, alongside Custom Elements and HTML templates, and is specified in the WHATWG DOM standard. Calling attachShadow() on an element creates a shadow root in open or closed mode; whatever is rendered inside it is invisible to ordinary document.querySelector calls, and stylesheets in the shadow root apply only there. The page’s global CSS does not reach in, except for inherited properties such as font and colour, and CSS custom properties, which pass through on purpose.
- Style encapsulation: a widget can ship its own CSS without prefixing every class name and without being broken by the host page’s reset styles
- DOM encapsulation: internal structure is hidden from the host page’s scripts, so a host cannot accidentally reach in and alter it
- Slots:
slotelements let the host page project its own content into defined places inside the component - Modes: open shadow roots are reachable through
element.shadowRoot; closed ones are not, though closed mode is a convenience, not a security boundary
Shadow DOM is native to every modern browser and underpins built-in elements such as video controls. Frameworks use it differently: Lit and Stencil build on it; React can render into a shadow root but does not require it. Limitations include global styles that authors expected to apply (they must be passed in as custom properties or adopted stylesheets), some accessibility tooling and form-participation edge cases, and the fact that scripts inside a shadow root still run with full access to the page.
For embedded chat that last point matters. Shadow DOM isolates styles and markup; it does not isolate JavaScript, storage or origin. A chat widget that needs a real security boundary between itself and the host page uses an iframe, which runs on its own origin, and talks to the page with postMessage. Many widgets combine the two: a light Shadow DOM launcher on the page and an iframe for the conversation.
In the Ethora ecosystem
Ethora’s embeddable AI assistant widget takes the iframe route. The assistant.js script tag with a data-app-id places the assistant in an iframe, so the conversation UI carries its own styles and scripts on its own origin and cannot be restyled or read by the host page’s CSS and JavaScript, which is a stronger isolation than Shadow DOM alone and the right default for healthcare and finance sites where the widget handles sensitive conversations.
When chat belongs inside your own application rather than on a third-party page, the React chat component renders within your app’s DOM and takes its look from your theming config, so encapsulation is not the goal; consistency with the rest of the product is. Teams that wrap it as a web component can attach a shadow root if their host pages need it.
