3 ms·
Nolan Lawson's recent talk on CSS Runtime Performance[1] show some pretty amazing styling performance wins for Shadow DOM. It's nice we can do more of this easi
by rektide 4y ago
Nolan Lawson's recent talk on CSS Runtime Performance[1] show some pretty amazing styling performance wins for Shadow DOM. It's nice we can do more of this easily!
I think this should all work outside <template> tags. Re-remembering how they worked slowed down my comprehension some. The MDN article[2] was a solid refresher.
[1] https://nolanlawson.com/2023/01/17/my-talk-on-css-runtime-performance/ https://nolanlawson.com/2023/01/17/my-talk-on-css-runtime-pe...
[2] https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots https://developer.mozilla.org/en-US/docs/Web/Web_Components/...
- gardenhedge 4y agoThanks for posting this. Very interesting. After watching I opened up dev tools to look at performance. Looks very complicated!
- nolanl 4y agoThanks for the shout-out! I think I mention this in the talk, but note that YMMV. I designed that benchmark as a kind of "worst-case scenario" where shadow DOM / scoped styles really show a benefit. Depending on your CSS rules, DOM size, and amount of thrashing, the perf benefit could be small to large. Also, it's still possible to shoot yourself in the foot, especially if you have a large/complex stylesheet repeated across multiple shadow roots. (Not because of the repetition – that's optimized in browsers [1] – but rather because of the number of DOM nodes affected.) That said, I still think the perf benefits of shadow DOM have been undersung. And Declarative Shadow DOM makes it way more useful. [1]: https://github.com/whatwg/dom/issues/831#issuecomment-585489960 https://github.com/whatwg/dom/issues/831#issuecomment-585489...