Shadow DOM Synchronization via Mutation Observers
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing co-browsing systems struggle to synchronize dynamic web content, particularly with Shadow DOM elements, leading to discrepancies between customer and customer service devices during screen-sharing due to the inability of standard tools to identify and update changes in Shadow DOMs.
Innovation Solution
A method is introduced that identifies Shadow DOM elements, attaches mutation observers to track changes, and transmits identifying information and change data via WebSockets or AJAX requests to ensure synchronized rendering across devices, including the use of custom attributes and depth/breadth-first searches to traverse the DOM tree.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Reliability
If standard DOM synchronization methods are used, then basic web content can be synchronized, but Shadow DOM elements cannot be properly tracked or updated
Solution Approach 1:
The patent segments the DOM tracking system into two distinct parts: standard DOM tracking using traditional mutation observers, and Shadow DOM tracking using separate shadow root mutation observers. This segmentation allows each part to be optimized independently, enabling reliable tracking of both standard and shadowed elements without interference.
Solution Approach 2:
The patent implements nesting by placing shadow root mutation observers within the broader DOM observation framework. The shadow root observers are nested inside the main DOM observer structure, allowing hierarchical tracking where shadow DOM changes are captured within the context of the overall DOM tree, ensuring comprehensive synchronization.
2Loss of information
If comprehensive DOM tracking is implemented, then all elements can be synchronized, but system complexity increases due to multiple observer types
Solution Approach 1:
The patent merges shadow root mutation observers with standard DOM observers into a unified observation system. Both observer types are integrated into a single synchronization pipeline that processes changes from both standard and shadowed elements through common transmission and rendering pathways, reducing overall system complexity despite comprehensive tracking.
Solution Approach 2:
The patent creates a universal observer system where a single mutation observer framework handles both standard DOM elements and Shadow DOM elements. The observer infrastructure is designed to be multi-functional, supporting multiple element types through a common interface that reduces management complexity while maintaining comprehensive tracking capability.
3Reliability
If real-time updates are implemented, then synchronized view is maintained, but network bandwidth consumption increases due to frequent transmissions
Solution Approach 1:
The patent implements periodic action through batched transmission of DOM changes. Instead of transmitting every single change immediately, the system accumulates multiple DOM mutations and transmits them in periodic batches, reducing the frequency of network transmissions while maintaining real-time synchronization through efficient batch processing.
Solution Approach 2:
The patent maintains continuity of useful action by implementing persistent WebSocket connections for real-time DOM synchronization. The continuous connection allows for efficient, event-driven transmission of only the necessary change data without the overhead of repeated connection establishment and teardown, reducing network bandwidth consumption while maintaining real-time update capability.
Data Source
AI summary
The present disclosed technology relates to systems and methods for synchronizing the website displayed by two computing devices. Embodiments of the disclosed technology include methods for transmitting the contents of a Document Object Model displayed on a customer device to a customer service device. Embodiments of the disclosed technology further include methods to transmit Shadow DOM elements from a customer device to a customer service device.