:root selector for scoped CSS #1601
Comments
|
+1024 for this one! |
|
I had this in mind as well, good idea. |
|
...come to think of it, the solution can be as simple as: Maybe this is what a lot of people already do? |
|
|
|
Or to think of it... how about If that's valid CSS syntax - would be really natural to use given |
I just tried it, and it doesn't work. <template>
<a v-if="isLink" href="...">{{ text }}</a>
<span v-else>{{ text }}</span>
</template>
|
|
@davidhewitt In my opinion:
As you pointed out, @jfbrennan
Perfectly fine in our case IMHO. |
True.
What about this sounds "Perfectly fine"? 😅 The definition you yourself have quoted states: Yes, |
|
FWIW, if anyone's feeling passionate about pushing this forward and has a spare evening, it would probably be a great time to write a Vue 3 RFC on this feature. Especially inspiration could be drawn from vuejs/rfcs#119 (I'm too busy on other projects at the moment or I might have considered writing the RFC myself) |
My bad, I should have googled more 😅I definitely thought it was an invention of some framework to do the trick we wanted to copy/paste. I go back on my word then, |
|
Is this issue stalled? I would like to upvote the Example structure <template>
<div>
<div>Hello World</div>
</div>
</template>Setting a style for the outer Using a CSS class with scoped context leads to a HTML document which is not nice when the component is used <template>
<div class="foo">
<div>Hello World</div>
</div>
</template>
<style scoped>
.foo {
color: red
}
</style>When someone now uses my component <Foo></Foo>and adds a CSS class called "foo" <Foo class="foo"></Foo>the generated HTML looks like <div class="foo foo" data-v-654321 data-v-123456>
<div>Hello World</div>
</div>I just want to use styles inside my component for my root element without weird CSS usage. So I would love to use <template>
<div>
<div>Hello World</div>
</div>
</template>
<style scoped>
:host {
color: red
}
</style>Which then should lead to <div class="foo" data-v-654321 data-v-123456>
<div>Hello World</div>
</div>when used as described above. |
|
Was RFC created for this? |
|
Curious about this too! Maybe someone in the know could update this with the current best practice (if any)? If no feature has been added to provide even an oblique solution then perhaps there should be an RFC. |
|
Something that just complicates everything is that from Vue 3 on, a |
Nonetheless |
Not seeing how that changes or complicates this. |
I think this would add confusion if we need to use In my opinion, In this example, both <template>
<div>I have a border</div>
<div>I have a border</div>
</template>
<style scoped>
:root {
border: 1px solid blue;
}
</style>If you want to style only the first one: <template>
<div>I have a border</div>
<div>I DON'T have a border</div>
</template>
<style scoped>
:root:first-child {
border: 1px solid blue;
}
</style> |
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:
What does the proposed API look like?
CSS already supports a
:rootselector 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:rootselector 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:
Admittedly a small idea, but one that I think would save a fair bit of typing (and inventing class names)!
The text was updated successfully, but these errors were encountered: