3 ms·
The performance gains can be significant. Styles in shadow roots have less rules, styles lower selectivity than in global styles. The browser takes into account
by spankalee 10y ago
The performance gains can be significant. Styles in shadow roots have less rules, styles lower selectivity than in global styles. The browser takes into account the shadow scopes when doing style invalidation and recalc, and so typically recalculates much less of the tree.
Like ebidel mentions, the developer side is important too. You get to write simpler selectors and know that you aren't accidentally styling other parts of the document. I'd go so far as to say that Shadow DOM fixes most of the problems with CSS.
- merb 10y agoI wonder when the performance degrades. Consider a angular app which contains 100-200 components (shadow-roots) on a single page. I mean theoretically it will still be faster since incremental-dom now see's less Node's for every root, but I thing the memory usage will probably way higher.
- spankalee 10y agoThere's the cost of an extra node, since a shadow root is a node. It shouldn't be too much overall though. Angular doesn't use incremental-dom, but yes, incremental-dom could walk smaller subtrees. incremental-dom could also walk smaller subtrees by calling it on small containers too. That's probably already the common pattern for componentized users of incremental-dom. I'm not sure why the memory usage would be much higher.
- merb 10y agoangular2 uses it. I have an additional node. considering I change a upper shadow-root which has 50+ shadow-roots it's 50 more node's. We have lists which have a component per cell and per row which is like 100x10 lines. That would mean 1000 x 2 node's more? Changing the whole table would probably be way slower without the inner shadow-root's.