scoped css class applied to child component
Vue version
3.2.45
Link to minimal reproduction
Steps to reproduce
- Pass
to other component
What is expected?
css to be scoped correctly (not leaking into child)
What is actually happening?
Child has an attribute data-v-5275d7b8 coming from the parent.
Because the child also uses class="container" the css rule leaks into the child
System Info
No response
Any additional comments?
No response
Guess i misunderstood that.
Can i turn off that feature with some feature flag of some kind? It seems unnecessary because things like :deep() exist.
i mean now i have to somehow (lol) make sure, no component uses the same class for their root node, if they include the other, which is hard to guarantee when you have hundreds of components.
I would rather turn off that feature (and use :deep()) instead of having to spend hours debugging non obvious behavior ...
https://vuejs.org/guide/components/attrs.html#class-and-style-merging
This feature cannot be turned off, this is related to class inheritance. If we use a class within a component, it will be bound to the root element of the child component. It can still utilize styles scoped in the parent component.
<template>
<div>
This is the component.
<ChildElement class="container">
<slot />
</ChildElement>
</div>
</template>
In this situation, since the style will be applied to the child components, it is similar to your use case.
Solution:
- You can use different class names to achieve style isolation.
- Wrap the root element of the child component with a div.
thx for taking the time!