Why We Use Shadow DOM for Zero-Conflict Widget Embedding
Learn how Shadow DOM isolation ensures our chat widget never conflicts with your website's styles or JavaScript.
**Note: We currently use iframe embedding for production. This discusses our future Shadow DOM implementation.**
The Challenge
Embedding widgets on diverse websites means dealing with: - Bootstrap's global styles - Tailwind's CSS resets - Enterprise apps with !important everywhere - WordPress sites with conflicting plugins
Current Solution: iframe Embedding
Our production implementation uses iframes for: - Complete isolation - Cross-origin security - Maximum compatibility - Simple integration
Future: Shadow DOM
Shadow DOM creates an isolated DOM tree where styles don't leak in or out.
Benefits - Native performance - Dynamic sizing - No iframe restrictions - Complete style isolation
Implementation Strategy - Comprehensive CSS reset - Custom properties for theming - Scoped animations - Event delegation for performance
Browser Support - Chrome 53+ ✅ - Firefox 63+ ✅ - Safari 10+ ✅ - Edge 79+ ✅
Migration Path
When we launch Shadow DOM widgets, both iframe and script embeds will be supported, letting you choose based on your needs.
Shadow DOM represents the future of widget embedding—providing native performance with complete isolation.