Shadow DOM Insertion Points for Model-View Separation
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Web applications face challenges in maintaining logical separation of primitive data types (Model and View) due to the lack of encapsulation abstractions in the document object model (DOM) tree, leading to difficulties in managing user interfaces and components.
Innovation Solution
The implementation of a shadow DOM framework, which creates a shadow document object model subtree with insertion points and matching criteria, allows for better separation of concerns between View and Model by specifying which Model to display in the View without affecting the document object model tree, enabling encapsulation and manipulation of user interfaces without modifying the basic code of the web application Model.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Device complexity
If a uniform DOM tree is used to represent the web application, then the implementation is simple, but logical separation of Model and View cannot be maintained
Solution Approach 1:
The patent segments the uniform DOM tree into two distinct parts: the actual DOM tree and a shadow DOM tree. The shadow DOM tree contains insertion points that represent specific locations where model elements can be projected into the view. This segmentation allows the Model and View to be logically separated while maintaining a simple implementation structure.
Solution Approach 2:
The shadow DOM tree acts as an intermediary between the Model and the View. It contains insertion points that serve as placeholders for model elements, allowing the controller to transpose model elements into the view without directly manipulating the actual DOM tree. This intermediary structure enables logical separation while keeping the implementation manageable.
2Ease of operation
If alternative means of operation are provided to work around MVC pattern limitations, then Model and View separation can be achieved, but a vast set of user interface-specific APIs are created
Solution Approach 1:
The shadow DOM insertion points provide a universal mechanism that works for all model-view binding scenarios. Instead of creating separate APIs for different UI operations, the insertion points serve as general-purpose placeholders that can accommodate any model element projection. This multi-functional approach achieves Model-View separation without proliferating UI-specific APIs.
Solution Approach 2:
The shadow DOM tree is essentially a copy or reflection of the view structure that contains insertion points. Rather than creating complex new APIs, the system uses this shadow copy to manage the binding between Model and View. The insertion points in the shadow DOM correspond to locations in the actual DOM, providing a simplified interface for model element placement.
3Ease of operation
If the document object model tree is modified to enable view projection, then better encapsulation is achieved, but the basic code of the web application model is affected
Solution Approach 1:
The shadow DOM tree serves as an intermediary layer between the model and the actual DOM tree. Insertion points are defined in the shadow DOM, which does not affect the structure or stability of the actual DOM tree. The controller uses this intermediary to transpose model elements into the view without modifying the basic code or structure of the web application model.
Solution Approach 2:
By segmenting the DOM representation into an actual DOM tree and a shadow DOM tree, the patent allows view projection operations to occur in the shadow DOM without affecting the stability of the actual DOM tree. The insertion points exist only in the shadow DOM, preserving the integrity of the original application model while enabling encapsulation and manipulation of user interfaces.
Data Source
AI summary
A method for implementing web applications includes projecting, using a processor of a computing device, one element of a web page of a web application into a view of the web page, the view being a visual representation of a model of the web page, the model including application data and rules. A controller mediates input and converts input to commands for the view or the model. The controller transposes the one element projected in the view of the web page and another element using an insertion point that represents a defined location in a shadow document object model subtree, without affecting a document object model tree of the web page.