-
:root can apply to any document root – html, svg, etc. - but when you nest formats (eg svg inside html) it always applies to the *outer* document. Set :root styles in an svg, then embed it in html… suddenly you're styling the html root from inside svg. codepen.io/mirisuzanne/pen/XWmBxVz
-
Maybe this is a useful best-practice for defining custom properties? I'm not sure. But articles that suggest it as the default should *also* make sure to teach how it works – both in terms of this behavior, and the higher specificity of pseudo-classes.