This adds more CSS containment to tree-view CSS classes. This results in performance improvements by giving the hint to the browser that the size/paint/layout of these elements does not affect other elements around them.
I have added the CSS containment for each class selectively by testing all the functionalities. As you see, these do not change the functionality.
Benefits
Improves the performance and responsiveness of tree-view. The browser will not need to recalculate the styles on clicks, scrolling, drag-drop, during the loading, etc.
The contain property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree. This allows user agents to utilize much stronger optimizations when rendering a page using contain properly and allows authors to be confident that their page won’t accidentally fall into a slow code path due to an innocuous change.
Description of the Change
This adds more CSS containment to tree-view CSS classes. This results in performance improvements by giving the hint to the browser that the size/paint/layout of these elements does not affect other elements around them.
I have added the CSS containment for each class selectively by testing all the functionalities. As you see, these do not change the functionality.
Benefits
Improves the performance and responsiveness of tree-view. The browser will not need to recalculate the styles on clicks, scrolling, drag-drop, during the loading, etc.
Quoting CSS specifications
Alternate Designs
N/A
Possible Drawbacks
N/A
Applicable Issues
N/A