The State-Driven Dynamic CSS cannot work with Teleport
Nov 8th 2021
Version
3.2.21
Reproduction link
Steps to reproduce
To reproduce this bug is quite easy, only two steps!
First, create a Vue SFC like this:
<template>
<div class="parent">
<div class="child">111</div>
</div>
</template>
<script setup>
const theme = {
color: '#79b8ff'
}
</script>
<style scoped>
.child {
color: v-bind('theme.color'); /* style works fine */
}
</style>
Then use a <teleport> component to wrap the "child" element:
<template>
<div class="parent">
<teleport to="body">
<div class="child">111</div>
</teleport>
</div>
</template>
<script setup>
const theme = {
color: '#79b8ff'
}
</script>
<style scoped>
.child {
color: v-bind('theme.color'); /* style doesn't work */
}
</style>
What is expected?
The CSS variable injection should works fine with any type of components, as no special reminders in the document.
What is actually happening?
The element to be teleported cannot be styled via CSS variable injection.
Actually the State-Driven Dynamic CSS will finally convert to CSS custom property. And the custom property will be applied to the component's root element via inline styles. If we apply the CSS variable injection to the child element inside the teleport, it will no longer be able to access the inline custom property from the original root element.
<body>
<div id="app">
<!-- The component root element -->
<div class="parent" style="--c55e1cb4-progress:50%; --c55e1cb4-theme_color:#79b8ff;"></div>
</div>
<!-- The child element inside the teleport has been moved here-->
<!-- It will no longer have access to inline CSS custom property on the original root element -->
<div class="child">111</div>
</body>
Nov 8th 2021
duplicated of #4605