That’s interesting that attribute selectors perform so badly across browsers. They’re not natural fits for most cases, but they are occasionally useful as modifiers (e.g. disabled). I wonder how much of an impact the performance difference makes in real world scenarios.
In my experience, not a lot. But it is a useful data point for someone building a large app, or a framework that may be used in a large app.
Years ago I convinced Svelte to use classes instead of attributes (can’t find the link, I think it was in a Discord chat), and for them it was a pretty minor change but clearly in some cases it can make a big difference.
I would be interested to see this tested versus contain: content and iframes.
CSS containment is a layout optimization, not a style optimization (subtle distinction!). So shadow DOM would have no impact - containment speeds things up only after the styles have already been figured out.
As for iframes, their style is completely isolated, even more so than shadow DOM (which inherits properties from the parent).
Some more details on this in these posts. :)