Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
:root selector for scoped CSS
See original GitHub issueWhat 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)!
Issue Analytics
- State:
- Created 4 years ago
- Reactions:95
- Comments:16
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
+1024 for this one!
Guys
:rootreally means<html>and that meaning is very much cemented. Vue shouldn’t mess around with that.:hostis closer to what you’re looking for and it’s what Riot.js uses for this same use case, so support for that in Vue would be much appreciated!