Shadow DOM CSS Isolation
Shadow DOM encapsulates a chat widget’s HTML and CSS in a private tree, preventing host website styles from breaking the chatbot’s layout.
Shadow DOM is a browser web standard that provides scoped encapsulation for a component’s DOM tree and styles, completely isolating it from the main document’s CSS rules.
How Shadow DOM works in practice
When an embeddable script is injected into a website with aggressive global CSS (e.g. `p { margin-bottom: 2rem !important }`), traditional widgets break visually.
Shadow DOM creates an impenetrable style boundary: the host site’s CSS cannot leak into the widget, and the widget’s styles cannot alter the host page.
How SiteMind implements Shadow DOM
The SiteMind widget is built inside an isolated Shadow DOM bundle weighing under 25kb, ensuring flawless visual rendering on WordPress, Shopify, Webflow, and custom stacks.
Test our AI tools in your browser (100% Free)
Estimate support savings, token counts, or test prompt injection security guardrails with our zero-cost sandboxes.
Related Technical Concepts
Time-To-First-Token (TTFT)
Time-To-First-Token (TTFT) measures the latency between a user sending a message and the first visible word appearing in the chat window.
Website Crawler Concurrency
Crawler concurrency controls how many web pages are fetched and indexed simultaneously without overwhelming the target website’s server.
White-Label AI Chatbots
White-labeling allows digital agencies and resellers to remove vendor branding and offer customized AI assistants under their own brand name.
Test it on your own website in under 2 minutes.
Enter your domain to index your pages and preview live answers.