Shadow DOM
Shadow DOM is a web standard that lets a component attach its own hidden, encapsulated tree of HTML elements to a page. Styles inside a shadow root don't leak out, and the page's styles don't leak in, so embedded components like widgets look the same on every site they're added to.
Example
A site's CSS rule that makes all buttons orange doesn't change the buttons inside a chat widget that renders in a shadow root.
Why it matters for a website chatbot
Without encapsulation, a site's CSS can break a chat widget's layout, and the widget's CSS can break the site. ChatBento renders its entire widget inside a shadow root, which is why it looks the same on Framer, Webflow, WordPress or any other site.
See it in practice: Agency client sites
Related terms
- Chat widgetA chat widget is the small interface embedded on a website, usually a round button in a bottom corner, that opens a chat window when clicked. It connects visitors to a chatbot, live agents or both, and is normally added to a site with a short JavaScript snippet or a platform plugin.
- Script tagA script tag is the HTML <script> element, which loads or runs JavaScript on a web page. Third-party tools such as analytics, chat widgets and forms are commonly installed by pasting a one-line script tag into a site's code, often with async or defer attributes so it doesn't block the page from loading.
- Core Web VitalsCore Web Vitals are three metrics Google uses to measure real-world page experience: Largest Contentful Paint (loading speed), Interaction to Next Paint (responsiveness) and Cumulative Layout Shift (visual stability). Good scores are an LCP of 2.5 seconds or less, an INP of 200 milliseconds or less and a CLS of 0.1 or less.