A look at the articles on ShadowDOM seems to be an improvement on DocumentFragments. What is the real benefit of ShadowDOM? CSS specifics? Can't I do about the same with fragments?
I am looking for a list of features for everyone. For example, both seem to allow you to build a dominance tree in memory and outside the main rendering path. However, ShadowDOM seems to have the added benefit of CSS.
In what cases do you use ShadowDOM vs, where do you just want to use DocumentFragments?
UPDATE
Looking at it more, I see that the two technologies are completely orthogonal.
Note. Since the question is closed, I can not answer it myself. I initially told the details of my findings in a comment below, but decided that more people would check the text here.
Document fragments is a Javascript / DOM building tool used to create non-hierarchical collections of nodes (each of which can be a parent of other nodes) with the DOM. They are essentially a wrapper around node-collection, which is discarded after adding a fragment to the DOM. DocumentFragments allows you to collect multiple nodes at one level and add them to another DOM node as siblings.
Shadow Dom - all this concerns the isolation of side effects in the extended DOM. ShadowDom allows you to create isolated components with isolated isolation with encapsulated styles. When a ShadowDom component is added to a larger web application, its CSS styles will not leak into the rest of the application, and the application’s own styles do not affect the component’s rendering.
Note that there are CSS combinators such as /deep/ and ::shadow to combine (and select) shadowDom components from the parent dom, but they will become obsolete in the near future. Because of this, it is recommended that you reuse components that use ShadowDOM and rely on CSS variables for styling if they are designed to customize the application that consumes them.
source share