Shadow DOM Chat Widget

A Shadow DOM Chat Widget is a chat widget loaded inside a Shadow DOM root so its styles and DOM are isolated from the host page, guaranteeing no CSS conflicts and no script collisions regardless of the host CMS or theme.

Purpose

Most chat widgets inject <style> blocks into the global document, where they fight the host site's CSS — overriding fonts, breaking layouts, or being overridden themselves. Shadow DOM isolation eliminates this entire class of bug.

Scope

Applies to the visible widget bubble, the conversation panel, the toggle button, and every embedded asset (icons, avatars, animations). Does not apply to webhook payloads or backend communication, which use the standard browser fetch context.

Components

  • Host element — a single <onoxia-widget> custom element appended to <body>.
  • Shadow root — created in closed mode for additional isolation against host JavaScript.
  • Scoped stylesheet — Tailwind-compiled CSS attached only inside the shadow root.
  • Bundle — ~30 KB vanilla JavaScript, no NPM dependencies, served from cdn.onoxia.nz.

Outputs

  • A widget that renders identically on Joomla, WordPress, Shopify, Wix, Webflow, Squarespace and plain HTML.
  • Zero CSS overrides required by the customer.
  • Page Speed impact under 50 ms on typical connections thanks to async load and CDN delivery.

Relationships

The Shadow DOM Chat Widget is the visible surface of the ONOXIA SoftwareApplication. It carries every RAG answer to the visitor and renders the active Persona.

Authority

Defined by OCENOX LTD.

Version

1.0 — 2026-05-22

ศัพท์ที่เกี่ยวข้อง

  • Retrieval-Augmented Generation (RAG) — A pattern that retrieves passages from a private knowledge base before an LLM generates an answer, so responses cite your own documents instead of fabricating facts.
  • Persona Configuration — A per-site bundle that defines who the bot is, how it speaks, which tools it may call, and what it must refuse. Personas sit between the visitor's question and the LLM, shaping the system prompt and tool registry for every conversation on that site.