CODEWITHSUNDEEP
vue.jssass
user759235
user759235

Reputation: 2207

Vue scoped styling not working with elements that have been added inside a slot

Moving my styling to a locale setup but seeing that when I insert element into slot containers they will not work. I guess this is normal if so is there a way to solve this, keep in mind NO I am not going to place the parent (.child) styling in the parent component and NO I want to keep my CSS in seperate scss files.

component (parent)

<template>
   <wrapper>
       <div class="child">Hello</div>
   </wrapper>
</template>

component (wrapper called)

<template>
   <div class="wrapper">
       <slot></slot>
   </div>
</template>

<style lang="scss" scoped>
@import "../../../sass/components/_container.scss";
</style>

container.scss

.wrapper{
    background-color:#333;

    .child{
         background-color:#fff;// not doing anything
    }
}

Upvotes: 8

Views: 8192

Answers (1)

Beyers
Beyers

Reputation: 9108

You can use the v-deep combinator to target child elements/components e.g.:

.wrapper::v-deep .child { background-color:#fff; }

See the Deep Selectors documentation for more detail.

Update

It seems ::v-deep .child has been deprecated. Use ::v-deep(.child) {} or :deep(.child) {} instead. See the RFC for more detail.

Upvotes: 10

Related Questions