Scoped styles not working due to v-if on teleport.

[SvetoslavHalachev]

Describe the bug I'm trying to override with scoped styles to match my design, but I saw that the teleport has v-if which I think is preventing the scoped styles feature to apply the correct data attributes.

To Reproduce Steps to reproduce the behavior: Here is an example with scoped styles: https://codesandbox.io/s/distracted-morning-nhjj0l?file=/src/App.vue

You can see that the red background is applied only to the input but not the Datepicker dropdown itself, due to having v-if on the teleport here.

Here is also an example if the codesandbox url does not work:

<template>
  <Datepicker v-model="date"></Datepicker>
</template>

<script setup>
import { ref } from "vue";
import Datepicker from "@vuepic/vue-datepicker";
import "@vuepic/vue-datepicker/dist/main.css";

const date = ref();
</script>

<style scoped>
.dp__theme_light {
  --dp-background-color: red;
}
</style>

Expected behavior After applying the following:

<style scoped>
.dp__theme_light {
  --dp-background-color: red;
}
</style>

The red background to be applied to all the places that have .dp__theme_light classname, in our case to both input and Datepicker dropdown.

Screenshots

Issue:

How it should be(for example when we remove scoped it works as expected or if we use inline property the scoped styles will work because the datepicker does not have v-if):

Desktop & mobile (please complete the following information):

• Browser Version 109.0.5414.119 (Official Build) (x86_64)
• Library version "@vuepic/vue-datepicker": "^3.6.7"

[Jasenkoo]

@SvetoslavHalachev You can use deep selector in css. Working example.

[arslanakhtar61]

@Jasenkoo deep selector in css is not working for the latest release v7.4.1. Could you please update the example supporting the latest version