Modern web development increasingly relies on encapsulated components and embedded content. Shadow DOM isolates web component styles and markup, while iframes embed third-party content like payment forms, chat widgets, and analytics dashboards. With this update, didka now captures user interactions inside both Shadow DOM and cross-origin iframes.
Shadow DOM Recording
Web components using Shadow DOM create an isolated DOM tree that's invisible to standard DOM traversal. This is great for component isolation but historically made session recording impossible — interactions inside Shadow DOM were simply not captured. Didka v2.5 pierces the Shadow DOM boundary and records all events, mutations, and visual changes within these encapsulated components.
This is particularly important for sites built with Lit, Stencil, or other web component frameworks, as well as sites that use third-party UI libraries built on web components.
Cross-origin Iframe Recording
Iframes hosted on different domains present a unique challenge due to browser security restrictions (same-origin policy). Didka now supports recording content from cross-origin iframes, capturing user interactions like clicks, form inputs, and navigation within embedded content. This is essential for sites that embed payment processors (Stripe, PayPal), live chat widgets, or third-party applications.
How It Works
Both Shadow DOM and iframe recording work automatically once enabled in your project settings. No additional code changes are required. The tracker detects Shadow DOM boundaries and iframe elements and extends its recording capabilities to cover these isolated contexts.
All recorded data from Shadow DOM and iframes is seamlessly integrated into your session replays, so you can watch a complete user journey that includes interactions with encapsulated components — without any gaps in the recording.
Why This Matters
As web applications grow more complex, more user interactions happen inside encapsulated contexts. Without Shadow DOM and iframe support, you'd have blind spots in your session recordings — critical interactions that you simply can't observe. With this update, you get a complete picture of user behavior regardless of how your application is structured. This capability is essential for effective session replay in modern web applications.