:root Selector should not be scoped #85
Description
The :root CSS pseudo-class matches the root element of a tree representing the document, it identical to the selector html usually.
But a scoped :root selector dose not match any Element.
With a demonstration which created by @vue/cli 4.0.5：
<!--HelloWorld.vue-->
<style scoped>
:root {
--font-color: red;
}
h3 {
color: var(--font-color);
}
</style>And we got:
<style type="text/css">
[data-v-469af010]:root {
--font-color: red;
}
h3[data-v-469af010] {
color: var(--font-color);
}
</style>h3's font-color wont change, it still inherits from parent element rather than red.
How to resolve?
Scoped :root does not match any element, but a attribute selector with :root do. So, we can get the expected result if changing:
[data-v-469af010]:root { /*balabala*/ }to
/* proposal A: */
:root { /*balabala*/ }
/* or */
/* proposal B: */
:root [data-v-469af010] { /*balabala*/ }I prefer proposal B that will make sure the scoped style rendered as wished. Such as:
<!-- HelloWorld.vue -->
<template>
<h3>Hello</h3>
</template>
<style scoped>
:root {
--font-color: red;
}
h3 {
color: var(--font-color);
}
</style>
<!-- another unscoped style in HelloWorld.vue-->
<style>
:root {
--font-color: blue;
}
</style>We will get some css code like this:
<style type="text/css">
:root [data-v-469af010] {
--font-color: red;
}
h3[data-v-469af010] {
color: var(--font-color);
}
</style>
<style type="text/css">
:root {
--font-color: blue;
}
</style>h3 will rendered with red font color as expected.
I'll create a PR if this issue is logical.