v-bind in CSS for async component not applied

[halsandr]

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNqVU8GO2jAQ/RXLF4IENuq2lzSgbQ89V6JHX0IyLN4mtmU7YRHi33diJyELWqQ9RPJ4nt+8PD+f6S9jWNsATWnmCiuNJw58YzZCESJro60nZwv7C9lbXZMZQmc/J7369LvxXqu+zXgsO8qI675CK+fJUZb+QNYE2RJBv61W5k3Q+Q3IHfTxj7S4isB9XjmIoCtgC7gu7xFXVAlVfkKAgiP5i8qkgySx4HTVwpysN+TcYUn3r/9kDbrxQ3dBfqxWke4yH0gDHfMHUEny4figlrV51QAO9LaBcDg2o9L7bked8Wg4Wo2Fh9pUuYdgfLZtnAHlYoV1Kdt+icXoebuU+7WgowpBSRpcXkev+fXMzj4+H4V+RpDxQUDGJ9IyPqqmCxoTsaxzw16dVpio4JLoG07QdPBNUMxHVwt68N64lPNGmf8vrNA1f8Yet43yeDHLUtfPT+yJfUcFzk+3Gbh6ubP66MDiQEEXE26Omy3YpQVVggX7cNYNdjrvpnU3M9ylUBf8/WvwH76lEvZSAWbSuOmbwgz4GF3TtTArE2DS2zYLtzJLydZbqV5ikL6Q/AU+mFco/BdewMieH3PZs+Peo+zuYriKKncO0zWkTdA+TB5QZgTFRMX1xzwFXudPFRBXaANlOMzG6PbqgyEpBnknVZkE61jY6/UHpR3Lhl7eAasGqXg=

Steps to reproduce

The issue is apparent in the repro (the buttons are different widths).

The important points to reproduce this are; an async component using v-bind in CSS must be hidden by v-if="false" in a parent, when the component is then shown, the CSS variable is not applied.

What is expected?

The buttons should both have a 200px width applied.

What is actually happening?

Only the first button has the 200px width applied.

System Info

No response

Any additional comments?

No response

[Mosharush]

Hello,

I am writing to inquire about any updates on this issue. It appears that the associated Pull Request is ready for review.

Additionally, I have found a potential bug use case for this issue, which can be viewed here.

Here is the code for reference:

<template>
  <div class="card" :style="`--title-color: ${titleColor};`">
    <h1>Test v-bind vs manual handle CSS vars</h1>
    <p>Background color: {{ bgColor }}</p>
    <p>Title color: {{ titleColor }}</p>
  </div>
</template>

<script setup>
const bgColor = "red";
const titleColor = "blue";
</script>

<style>
.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: v-bind(bgColor);
}

h1 {
  color: var(--title-color);
}
</style>

Expected Behavior

The div with the class card should have a red background due to the v-bind directive on the background-color property in the style section. Furthermore, the h1 title's text color should be blue because of the CSS variable (--title-color) binding.

Current Behavior

At present, only the CSS variable binding is functioning as expected, with the h1 title appearing in blue. The v-bind directive does not seem to be applying correctly, as the div with the class card is not displaying the expected red background.

Best regards.