In HTML there can't be anything outside the document root element, it is always the <html> tag.
I think you don't know CSS Properties and Values API Level 1. Registering custom properties by CSS you must bind it to a selector since in css you can't write nothing outside {}. Since in CSS :root {} is the document root element (<html>) it works as a "global scope" because there is nothing outside it. So any custom property declarede at :root level is accessible by the entire document.
BTW, right now you can also register custom properties directly to the document object through JS using Houdini api...
Let property set be the value of the current global object’s associated Document’s
There is also a postcss plugin that allows you (trying to bring a lv2 proposal) to do the reverse thing, register a document-level custom property inside CSS:
In HTML there can't be anything outside the document root element, it is always the
<html>
tag.I think you don't know CSS Properties and Values API Level 1. Registering custom properties by CSS you must bind it to a selector since in css you can't write nothing outside
{}
. Since in CSS:root {}
is the document root element (<html>
) it works as a "global scope" because there is nothing outside it. So any custom property declarede at:root
level is accessible by the entire document.BTW, right now you can also register custom properties directly to the document object through JS using Houdini api...
There is also a postcss plugin that allows you (trying to bring a lv2 proposal) to do the reverse thing, register a document-level custom property inside CSS:
github.com/jonathantneal/postcss-r...
Ok, i get your point now,
html{}
is the solution.Thanks for sharing your knowledge about CSS internals.