Vue version

3.2.45

Link to minimal reproduction

https://sfc.vuejs.org/#eNqdVM1uozAQfpVZX9JKAe7ZNNo97HX3sL1U4kJgkrgF2xoPSaso796xoYQ2KFV7Qcx4vp/5kDmq386l+xbVQi0ZG1cXjKvcACzXLbM18Kusdfl0lyu/s4f7nTZbuIMfQ5Gr1b3dbmsEDuUy62A9BWWr+AhV7FR6D2VdeC+EjM8s8NAHMBaYCuM1a2vmscQanSWOuEyAZ5bzZI+e4IV9ojdj24MUwMOf/+/U/v57pzbWW2YfxHKTsyTVTQNbkVjb6mVg/44VrANZ52NQm3DSqw5BfOrlIqgv+7sMq3c8SmvsciKxS+OfJ3i2O7HCN5a4vgYkcNC8AyGiAgL3gQrnkEaKow0ndrz6oUJjuFlS+pK0Y/DIrZOObqKHIxBu4AQbsg3M5ErOOnRpjWcobW1Jbp7M3MwIq9nt28n4XoZTphZvfwbVTqfX5Jc6yKchLTgG6ki5kNzW2lQ3sQq4U4TGcTVXnbmkKVz66K2R30TE5v2Bz9WiYws9MR3qXO2YnV9kmd+U4efy6FNL20zeUmoN6wZT9E2yJnvwSEKcq/mII5PmHikhNBWSfIUrnB9GL3gDrWx0UqdXm5CifQ==

Steps to reproduce

click the toggle button off and on

What is expected?

all text should be red

What is actually happening?

using v-bind inside of a teleport inside of a transition fails. It does actually work if there is an extra div wrapper around the transition. However in a case where a v-if transition is being triggered because the parent component has been unmounted, this will not work.

System Info

No response

Any additional comments?

see https://github.com/vuejs/core/issues/4605 and https://github.com/vuejs/core/commit/42239cf2846f50b6ac2c060dad381113840d9ea1

For anyone encountering this bug in the meantime

a workaround is to inject your own css var with [@vueuse/head]. In my case there was only one of the component at a time, but you could easily generate a unique name...

useHead(
  computed(() => ({
    style: [{ children: `:root {--my-special-css-var: ${myVar}; }` }],
  })),
);

It's not just the problem of transition components, see here,playground

@moushicheng - Thanks for adding this. Im not surprised... It seems to have to do with not finding an actual parent node to attach the inline style to.

This is because Teleport is not patched in the fast path. Maybe we should re-consider the solution in https://github.com/vuejs/core/pull/4609

This is because Teleport is not patched in the fast path. Maybe we should re-consider the solution in #4609

I made some modifications based on your pr(#4609 ), and I may need your help in some places. In addition, for the implementation of CSSVars in teleport, I think it really needs further consideration

Here's another playground for you.

Is there a reason why these vars aren't just hoisted to :root? If they're made adequately unique, there shouldn't be any fear of unintentionally overwriting existing vars, should there?

but you could easily generate a unique name

I actually ended up trying your method here, but making them unique required being able to refer to them uniquely inside my <style scoped> 😅

I'm exploring some other workarounds, but so far no dice! This is turning into a major blocker, unfortunately 😞

At this point, we're exploring rolling our own <DynamicTransition>, but I have a feeling that's going to get really messy.

Same problem here :(