Dynamic Document Annotations Using Shadow DOM
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing web browser extensions face conflicts and issues when modifying HTML, leading to interference with web page presentation on modern websites, and there is a challenge in dynamically embedding content into user interfaces without disrupting their structure or requiring control over the underlying UI.
Innovation Solution
A computing system identifies keywords in a user interface and generates dynamic annotations, placing them in a shadow DOM to prevent interference, and uses a software agent to monitor and adjust annotations based on user interactions, allowing for inline presentation of contextually relevant information without modifying the web page's structure.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Loss of information
If web browser extensions modify the HTML of a web page to add annotations, then relevant information can be presented to users, but conflicts and issues arise that interfere with web page presentation
Solution Approach 1:
The patent divides the DOM into separate namespaces by introducing a shadow DOM container. Annotations are placed in this isolated shadow DOM space rather than directly in the main DOM, segmenting the annotation system from the web page structure. This allows annotations to be added without interfering with the original web page HTML and presentation.
Solution Approach 2:
The shadow DOM acts as an intermediary layer between the annotation system and the web page DOM. Instead of directly modifying the web page's DOM elements, the system uses the shadow DOM as a mediator to host annotations, preventing direct conflicts while still allowing visual integration on the user interface.
2Ease of operation
If annotations are added directly to the web page DOM, then they can be displayed inline, but they interfere with the web page structure and formatting
Solution Approach 1:
The patent segments the DOM structure by creating a separate shadow DOM container for annotations. This segmentation allows annotations to be displayed inline with the web page content while maintaining the stability and integrity of the original DOM structure, as annotations reside in an isolated namespace.
Solution Approach 2:
The patent introduces an additional dimensional layer by using the shadow DOM, which exists as a separate namespace attached to the host element. This dimensional separation allows annotations to coexist with web page content in the same visual space without competing for the same DOM structure.
3Adaptability or versatility
If web page structure is modified to accommodate annotations, then annotations can be integrated, but control is required over the underlying UI which is not always available
Solution Approach 1:
The shadow DOM serves as an intermediary that enables content integration without requiring control over the underlying UI. By attaching the shadow DOM to existing host elements, the system can integrate annotations adaptively while avoiding the complexity of modifying or controlling the original web page structure.
Solution Approach 2:
The shadow DOM automatically manages its own structure and styling within its isolated namespace, eliminating the need for external control mechanisms. The annotation system becomes self-sufficient, creating and managing its own elements without requiring modifications to or control over the host web page UI.
Data Source
AI summary
Methods, systems, and apparatus, including computer programs encoded on computer-storage media, for dynamic document annotations. In some implementations, a keyword is identified in a first view of a document, the first view being provided on a user interface. An annotation for the keyword is provided for display at a first location with the first view provided on the user interface. An adjustment to the first view is detected that causes a second view of the document on the user interface, where a position of the keyword in the second view is different from a position of the keyword in the first view. In response to detecting the adjustment to the first view, the annotation is hidden from the user interface, and, after hiding the annotation, the annotation for the keyword is provided for display at a second location with the second view of the document.