In the current style guide, there is a “use with caution” rule that says that you shouldn’t use element selectors in scoped CSS/style tags, because it’s slow.
Is there data to back up that claim? Wouldn’t that be heavily dependent on browser implementations and optimizations?
Someone has asked this same question on Stack Overflow, and I’ve always been curious too, so I thought this would be a better place to ask.
Also, while I’m asking the question, let me ask a different question (which should probably be clarified in the style guide).
When the explanation says “slow”, does that mean it is slow for Vue or for the browser?
I was assuming it meant for the browser, that a selector button[data-something] will be slower than .button[data-something] in general, in any HTML/CSS. But I guess it could also refer to something that Vue is doing when adding the data- attributes for scoping.
Edit: Per these vue docs, it seems clear they’re talking about slowdown in the browser (inherent to CSS selectors): Scoped CSS | Vue Loader Still need a citation for that claim.