CODEWITHSUNDEEP
cssvue.jsvuejs2
Shay Yzhakov
Shay Yzhakov

Reputation: 1113

Vue js - making a style to be inherited by children components

First of all, when I want to make a style private for the current component, I define it inside a tag. To make the style visible for child components, I'm using a deep selector to let it pass through, as below:

<style scoped>
   .a >>> .b {
       ...
   }
</style>

The code above is translated to

.a[data-v-f3f3eg9] .b

Which, in other words say: for every child of this specific a, if it is b then apply the following style on it.

My question is about the following statement:

<style scoped>
   >>> .b {
      ...
   }
</style>

First of all, Visual Code throws an error about this expression:

[css] at-rule or selector expected

Which expect me to put a scoped selector before the deep selector. What I'm trying to figure out, is if this expression is preprocessed as stated in the documentation, which should be

.b

Then what makes this style not global, and different from the definition below (which is not scoped):

<style>
   .b {
       ...
   }
</style>

In fact, they are different. I've tried it and the later is actually global while the former is visible for the parent component and it's children.

Does anyone have an explanation for this? and, if the syntax

<style scoped>
   >>> .b {
      ...
   }
</style>

Is not that common, what is the right way to make a style intended for child components only, while not defining a selector for the parent element?

Upvotes: 1

Views: 4885

Answers (2)

gss
gss

Reputation: 683

::v-deep is the equivalent that won't upset VSCode linter:

<style scoped>
    ::v-deep .b {
        ...
    }
</style>

Upvotes: 7

Charles DOUKOURE
Charles DOUKOURE

Reputation: 161

I think the only way to make a style intended for child components only, while not defining a selector for the parent, is simply to define this style in the child component.

Cordially!

Upvotes: 1

Related Questions