Chrome de-dups <style> elements that contain the exact same text. A sheet in the ShadowRoot of your component, reduces CSS waste naturally.
-
-
Replying to @ElliottZ @slightlylate and
Chrome doesn't do the same for .style.cssText? I believe Firefox does/did.
1 reply 0 retweets 0 likes -
-
Replying to @sebmarkbage @slightlylate and
Chrome doesn't do de-duping of inline style. It currently disables the caches in the style system. It uses more memory and is slower.
1 reply 0 retweets 0 likes -
Replying to @ElliottZ @slightlylate and
The only way to share style info w/o global selectors is a shadow root, element in the shadow, a style sheet in the shadow with a selector?
1 reply 0 retweets 0 likes -
Replying to @sebmarkbage @ElliottZ and
Doesn't that seems like a real inefficiency and that something is lacking?
1 reply 0 retweets 0 likes -
Replying to @sebmarkbage @ElliottZ and
Nah, it's how CSS works: you cascade through the DOM. Shadows stop the cascade the way functions scope your JS variables....
1 reply 0 retweets 2 likes -
Replying to @slightlylate @sebmarkbage and
...and just like closures, we have good (and increasingly sophisticated) ways of eliminating the overhead.
1 reply 0 retweets 0 likes -
Replying to @slightlylate @sebmarkbage and
If you want modularity, this is the native, increasingly-performant way to get it. Cheaper than global CSS at scale.
1 reply 0 retweets 2 likes -
Replying to @slightlylate @sebmarkbage and
Thx! Appending styles & styles in shadow dom behaves the same as style tags outside shadow dom?
1 reply 0 retweets 0 likes
Yep! Scoped to the Shadow Root. It's awesome; real components for CSS and perf wins to boot!
Loading seems to be taking a while.
Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.
& Web Standards TL; Blink API OWNER
Named PWAs w/
DMs open. Tweets my own; press@google.com for official comms.