State-Driven Dynamic CSS is not useful to <teleport>

[Jveen-D]

When I don't use <teleport>, State-Driven Dynamic CS is very useful, but when I try to use State-Driven Dynamic CSS to <teleport>, I ran into a little problem. I have the same writing as the official website, but the CSS values do not take effect when I F12 to check the webpage. Below is the code snippet.

<template>
  <div id="test" class="w-full mt-8">
    <p>hello</p>
  </div>
</template>

<script lang="ts" setup>
const theme = {
  color: 'red'
}
</script>

<style lang="scss" scoped>
p {
  color: v-bind('theme.color');
}
</style>

Needless to say, this is the correct usage，but then look down.

<template>
  <teleport to="#test">
      <p>hello</p>
  </teleport>
</template>

<script setup lang="ts">
const theme = {
  color: 'red'
}
</script>

<style lang="scss" scoped>
p {
  color: v-bind('theme.color');
}
</style>

This is using <teleport>below is the performance of the page.

Next, f12 checks the page


What's the problem? I don’t seem to find this in the documentation. Is it because I wrote it wrong? Please help me to check it.

[posva]

This is because of how css variables work: they depend of the tree structure.

Please, next time consider using the forum, the Discord server or StackOverflow for questions. The rfcs repo is not for questions.