Shadow-DOM-Chat-Widget

Ein Shadow-DOM-Chat-Widget ist ein Chat-Widget, das innerhalb eines Shadow-DOM-Roots geladen wird — seine Styles und sein DOM bleiben vom Host vollständig isoliert. Keine CSS-Konflikte, keine Script-Kollisionen, unabhängig von CMS oder Theme.

Zweck

Die meisten Chat-Widgets injizieren <style>-Blöcke in das globale Dokument, wo sie mit dem Host-CSS kollidieren — Fonts werden überschrieben, Layouts brechen, oder das Widget selbst wird überschrieben. Shadow-DOM-Isolation eliminiert diese ganze Fehlerklasse.

Geltungsbereich

Gilt für die sichtbare Widget-Bubble, das Konversationsfeld, den Toggle-Button und jedes eingebettete Asset (Icons, Avatare, Animationen). Webhook-Payloads und Backend-Kommunikation laufen über den normalen Browser-Fetch-Kontext und sind nicht betroffen.

Komponenten

  • Host-Element — ein einzelnes <onoxia-widget>-Custom-Element am <body>.
  • Shadow-Root — im Closed-Mode für zusätzliche Isolation gegen Host-JavaScript.
  • Scoped Stylesheet — Tailwind-kompiliertes CSS, ausschließlich innerhalb des Shadow-Roots.
  • Bundle — ~30 KB Vanilla-JavaScript, keine NPM-Abhängigkeiten, ausgeliefert über cdn.onoxia.nz.

Outputs

  • Identisches Rendering auf Joomla, WordPress, Shopify, Wix, Webflow, Squarespace und reinem HTML.
  • Keine CSS-Overrides beim Kunden nötig.
  • Page-Speed-Impact unter 50 ms bei typischen Verbindungen — dank Async-Load und CDN.

Beziehungen

Das Shadow-DOM-Chat-Widget ist die sichtbare Oberfläche der ONOXIA-SoftwareApplication. Es transportiert jede RAG-Antwort zum Besucher und rendert die aktive Persona.

Authority

Definiert von OCENOX LTD.

Version

1.0 — 2026-05-22

Verwandte Begriffe

  • Retrieval-Augmented Generation (RAG) — Ein Verfahren, das vor der LLM-Generierung relevante Passagen aus einer privaten Wissensbasis abruft, damit Antworten auf Ihren eigenen Dokumenten beruhen statt frei halluziniert zu werden.
  • Persona-Konfiguration — Ein Bundle pro Site, das definiert, wer der Bot ist, wie er spricht, welche Tools er nutzen darf und was er ablehnen muss. Personas sitzen zwischen der Besucherfrage und dem LLM und prägen System-Prompt und Tool-Registry jeder Konversation auf dieser Site.