v-bind() in CSS doesn't work for Teleports

[Rusinas]

Vue version

3.2.41

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9kcFOwzAMhl/F5FIm0VbiWDokbjwAEpdcutYdnZI4irNNY+q74yYt4sQtf/zn+x37rt68ry5nVI1quQ+Tj8AYz/5Vu8l6ChHuEHCEGcZAFgqxFtpp15PjCD0ZCrBfHI8Fd8aSK3baAWwGy8et/I7GEHxSMMPDYmrrnCdJIiJab7qIogDaYbpAbzrmvVZfeL2SVqkAkCjJU4spuz/QYGo1kvgPNNx+7f+QVlb+V1wR66vEXk45aQuQl239p1ORHG8mN10lPNwzYiQXS56+sYFntC/5Mo2rgUt5mNzwWCRZ7FJxTgNJMPWk8uhL2/nqxORkOQmr1wJr1WxBWslKFi3/i9FzU9c89stKT1xRONZyqsLZxclihWzLQ6ArYxCwVmvyrOYfFByt/Q==

Steps to reproduce

1. Use component to teleport some elements of your component outside of its flow.
2. Apply to those elements classes with usage of v-bind()

What is expected?

Custom properties created for teleported elements and successfully applied.

What is actually happening?

Custom properties created only for parent component and since teleported elements are outside of it, custom variables are inaccessible for them.

System Info

No response

Any additional comments?

I am not sure, but maybe it is a good idea to store all custom variables created via v-bind() in CSS on the root level of the document?

Let's say I have a button which color defined in store. In component I apply this color using v-bind(), and the custom property will be created for each button (i.e. for erery property and every single element that is using v-bind), despite the fact that its value relies on the same variable.

[LinusBorg]

duplicate of #4605