How to apply CSS style in scoped shadow object using Vue3?

Question

I have this sample code:

<template>
    <custom-button>
     #shadow-root (open)
     <a href="#"></a>
     <other-custom></other-custom>
    </custom-button>
</template>
<style scoped lang="scss">
  custom-button{
    :deep(a) {
     outline:1px red solid;
     }
  }
</style>

But the style does not apply. I tried with scoped and slotted but no results. How can apply a style to the anchor? Thank you.

NEW SAMPLE

test.vue

<template>
  <custom-button>
  </custom-button>
</template>

<style scoped lang="scss">
.custom-button {
  :deep(a) {
    outline: 3px red solid;
  }
}
</style>

custom-button.vue

<template>
   <a href="#">Link</a>
</template>
<script>
export default {
  name: 'custom-button',
};
</script>

This does not work using Tolbxela demo.

Tolbxela · Accepted Answer · 2023-03-06T21:02:33.807

1

UPDATE

Yes, it does not work for the second sample. I am not really sure why, but I suppose, that the scoped CSS will be applied only at the App level.

But why not do it simpler and just put the style directly into the custom-button.vue?

<template>
   <a href="#">Link</a>
</template>
<script>
export default {
  name: 'custom-button',
};
</script>
<style scoped>
a {
  outline: 3px red solid;
}
</style>

It does work well this way. Here is the updated Codesandbox

Or you can do something like this

<template>
 <div class="wrapper">
  <custom-button></custom-button>
 </div> 
</template>

<style scoped lang="scss">
 .wrapper > a {
    outline: 3px red solid;
 }
</style>

At first, there should be one curly bracket more in the style.

<style scoped lang="scss">
  .custom-button {
    :deep(a) {
      outline:3px red solid;
    }
  }
</style>

Then, if you omit all custom elements, the code works as intended.

<template>
    <button class="custom-button">
     #shadow-root (open)
     <a href="#">Link</a>
   </button>
</template>

Here is the Codesandbox

edited Mar 06 '23 at 21:02

answered Mar 06 '23 at 16:48

Tolbxela

4,767
3
21
42

Thanks but i need to use the custom-tags. Your sample works but not in my code. I cannot replace the custom-tag with a class. – Kaspacainoombro Mar 06 '23 at 19:27
I added a new sample. In this case, the :deep() does not work anymore. – Kaspacainoombro Mar 06 '23 at 19:33
You still have a class point the the style `.custom-button {` – Tolbxela Mar 06 '23 at 20:11
I cannot change the code of the custom-component. It is mandatory to use as it is. Thanks – Kaspacainoombro Mar 06 '23 at 20:40
Check the `wrapper` option: https://codesandbox.io/s/funny-shtern-qsfwjn?file=/src/App.vue – Tolbxela Mar 06 '23 at 21:02
1

The wrapper made the difference! Thank you. I was going nuts! – Kaspacainoombro Mar 06 '23 at 22:56

How to apply CSS style in scoped shadow object using Vue3?

1 Answers1