4 ms·
Can I pick your brain for a minute? I'm vaguely aware of what the shadow DOM does, how on earth does it have anything to do with, let alone "fix," CSS?
by chuckdries 9y ago
Can I pick your brain for a minute? I'm vaguely aware of what the shadow DOM does, how on earth does it have anything to do with, let alone "fix," CSS?
- mirkules 9y agoIt "fixes" it by (sort-of) hiding the styling from the parent CSS. Shadow DOM is kind of like OOP in that regard: it encapsulates a bunch of data (styles, other objects) and makes it seem like one object.. er, sorry, I mean component :)
- spankalee 9y agoShadow roots - where components put their internal DOM - create CSS scopes with both upper and lower bounds. This gives both encapsulation and perf benefits. 1) You don't have to worry about selectors for your component internals accidentally matching somewhere else in the document. As a result you can write simple selectors, often just tagname or id selectors, and have much smaller stylesheets. It's just a lot easier to read and reason about. 2) Perf is better, partially because of smaller style sheets and simpler selectors, but also because there's much, much less tree invalidation when DOM changes because you only invalidate inside the scope of the change. There's also huge parsing benefits because browsers deduplicate <style> tags that have identical text, so if you put the same style in many shadow roots, it's only parsed once, and one stylesheet object among all the roots.
- wruza 9y agoI often hear that "DOM caching, DOM invalidation" talk, but being non-web guy can't figure out what's the issue is. Seems like Santa didn't deliver cell renderer conception into DOM? :) Afaik, you basically draw table rows and cells via distinct widgets, no doubt it's expensive as hell.