Open
Description
What problem does this feature solve?
Often when I'm writing scoped CSS for my components I need to put a class on the root element so that I can style it. For example:
<template>
<div class="foo-root">Hello World</div>
</template>
<style scoped>
.foo-root {
color: red
}
</style>
What does the proposed API look like?
CSS already supports a :root selector which means the "root HTML element of the document" (i.e. usually the <html> element).
As far as I know it's never possible for a component to be the root <html> element of the document. So this :root selector effectively does nothing inside scoped CSS.
Therefore, why not repurpose it to mean the component's root element? We could then re-write the example above without needing to add a specific class:
<template>
<div>Hello, World</div>
<template>
<style scoped>
:root {
color: red;
}
</style>
Admittedly a small idea, but one that I think would save a fair bit of typing (and inventing class names)!