Web Element Retargeting for DOM Stacking Context Control
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Web elements in traditional web development are limited by their stacking context in the Document Object Model (DOM) tree, restricting control over their positioning and visibility, particularly for interactive elements like popups, modals, and media displays.
Innovation Solution
The technique of web element retargeting allows developers to dynamically and programmatically reposition web elements by creating a target element that can be attached to a container node, enabling control over the Z-position and stacking context, and redirecting events to the original source element, ensuring the retargeted element is visible and interactive.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of operation
If web elements are rendered within their stacking context in the DOM tree, then the element's position is determined by its position in the DOM tree, but the element cannot be positioned independently of its context, limiting control over visibility and positioning
Solution Approach 1:
The patent segments the web element rendering into two independent parts: the source element in the DOM tree and the target element for rendering. This allows the source element to remain in its original DOM position while the rendered view can be positioned independently at a different location in the DOM tree, breaking the constraint that rendered position must follow DOM position.
Solution Approach 2:
The patent introduces a target element as an intermediary between the source element and the rendered view. The target element acts as a mediator that receives the source element's content and renders it at a different position in the DOM tree, enabling independent positioning control while maintaining the original DOM structure.
2Ease of operation
If web elements are retargeted to a different position in the DOM tree, then independent positioning control is achieved, but events must be redirected from the target element back to the source element to maintain interactive functionality
Solution Approach 1:
The patent implements a feedback mechanism where events captured at the target element are redirected back to the source element. This creates a closed loop where user interactions with the retargeted element are funneled back to the original source, ensuring that event handling logic remains at the source while the rendered position is independent.
Solution Approach 2:
The patent creates a target element that copies the rendering function of the source element without copying the event handling logic. The target element serves as a visual copy positioned independently in the DOM tree, while event processing remains centralized at the source element.
Data Source
AI summary
A determination is made whether a source web element is to be retargeted. In response to the determination that the source web element is to be retargeted, one or more properties or attributes of the source web element is copied to a target web element and content of the source web element is routed to be rendered to the target web element. An event of the target web element is intercepted, and the intercepted event is provided to the source web element.