Looking into articles on ShadowDOM it seems like it's an enhancement to DocumentFragments. What is the real benefit of ShadowDOM? CSS specificity? Can't I do roughly the same things with Fragments?
I'm looking for a list of capabilities for each. For example, both seem to allow you to assemble a dom tree in memory and off the main render path. However, ShadowDOM seems to have the added benefit of scoped CSS.
What are cases where you would use ShadowDOM vs where you would just want to use DocumentFragments?
After looking into this more myself, I see the two technologies are completely orthogonal.
Note: Since the question has been closed, I cannot answer it myself. I originally put details of my findings into a comment below, but figured more people will check the text up here.
Shadow Dom is all about isolation of side-effects within a larger rendered DOM. ShadowDom allows you to create sandboxed reusable components with encapsulated styles. When a ShadowDom-based component is added to a larger web application, its CSS styles will not leak out into the rest of the application, nor will the application's own styles affect the rendering of the component.
Note that CSS combinators such as
From what I've read and the way I use it, is ShadowDom has to do with encapsulation like if you put a
<style> tag inside the ShadowDom the css will only be applied to the ShadowDom and document fragments has to do with browser reflow