Nolan Lawson avatar Nolan Lawson

Does shadow DOM improve style performance?

Screenshot of “Does shadow DOM improve style performance?”

https://nolanlawson.com/2021/08/15/does-shadow-dom-improve-style-performance/

This article is about style performance improvement with Shadow DOM, but it also contains a useful comparison of selector performance between ids, classes and data attributes:

ID and class selectors are fast enough that actually it doesn’t matter much whether shadow DOM is used or not – in fact, they’re slightly faster without shadow DOM. This indicates that systems like Svelte, CSS Modules, or good old-fashioned BEM are using the best approach performance-wise.

This also indicates that using attributes for style encapsulation does not scale well compared to classes. So perhaps scoping systems like Vue would be better off switching to classes.

  3. Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?

    Using object-fit: cover; in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many <source> in a <picture>?