Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

The State-Driven Dynamic CSS cannot work with Teleport #4914

Closed
Jiacheng787 opened this issue Nov 8, 2021 · 1 comment
Closed

The State-Driven Dynamic CSS cannot work with Teleport #4914

Jiacheng787 opened this issue Nov 8, 2021 · 1 comment

Comments

@Jiacheng787
Copy link

Version

3.2.21

Reproduction link

sfc.vuejs.org/

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>
@edison1105
Copy link
Member

duplicated of #4605

@github-actions github-actions bot locked and limited conversation to collaborators Oct 8, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@LinusBorg @edison1105 @Jiacheng787