Subscribe on changes!

css v-bind doesn't work when using <Teleport>

avatar
Jul 18th 2022

Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eNq1VF1v0zAU/SuXvKRDTVskNETo0NjgEYEAiQfKQ5o4iTfHtmynH0z971zb+WrJNqRB1YfY91z73uN7zl3wTsrZpiZBHCx1qqg0oImpJbCEFxerwOhV8HbFaSWFMnAHiuRwgFyJCkJMC990sY8iS1gTmc3dyh5sESueCq7x5FJsv5CiZony6At73iRPmCZniOtR3wgj9tRR2HLuK8W6cGFIJVliCK4AlhndQMoSrbH2REpXPOBvua6NERwuU0bTWwyO1GJUTTDhkyQcL3QhqGxsOffZD511WvHwMNPE/jitOc/l+G+ATUTzkfpWQQuI10l6WyhR8yxKBRMK0aEiWTiAbKkpo/ZajDvu+vil4FHKhCbjRByh503XTe69xR4R8LRqPXf3FXvK9Ei1yznOAX4t54PpwKU2e0ZAp0KSDHeew51Fr8Uu0vQX5UUMC5yvw4qXpmLTFV+LbO8xMsmyDgBQJaqgvIPPcNQ8riS0KE0MLxaLTemgW5qZ0m9s3UZPSAzbkhriFAKQUY2l7mPIGdk5ZMJowSNEVDqGlHBDlNu/qbWh+R75xC2Ot3UxrAXVYbvE9oJp4LUZVYmc3WjBUeW42WlzIPqB3L0BYL6XI6mo0UhzRnLKyQe7mvwI2zcJf/bClUrIHvnZriaOFPu+7avFaCJmL0kMV0IwkvCpxSc1w4h7yQPyPiTp2g5Nn/XVKHyHQVLoOAzB5h0es4dnUQTfhbpFPq+6G8DNJVAN+IyMkgyiqBGn85NmyJ8N20CaWptxou6NZuhALtQ+UwcZcRBH8qRn9QzB1/bL2+qpATXj3X91zb0XRPPQwBabPOrR0Wh75MKM9Nn21TZ70qsRuGfV8ECfw/7+hoQn0zAk4piUtvLHLWDmqms0LjQ1VKCsc7ojmZOaEbLVvPLK9gtG8u57LbCoyq/+lZBPjUIV68liCs1/dm4H3RrPEbnHFnS+WEh/fWNBL5sNb2C7qNl+1RqT3WuTX3v7Oi7DG3iMM7KmPJucaNSW9H987PAbGVnscQ==

Steps to reproduce

If I use vue's component and v-bind a css property, the css-variable is not created on the element. Resulting in the correct background color not being applied.

What is expected?

The background color is red when using vue teleport

What is actually happening?

the background color is not applied

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (6) x64 Intel(R) Core(TM) i5-8500 CPU @ 3.00GHz
    Memory: 5.53 GB / 15.81 GB
  Binaries:
    Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\node_modules\yarn\bin\yarn.CMD
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 103.0.5060.114
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.62)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    vue: ^3.2.37 => 3.2.37

Any additional comments?

No response