SSR Hydration errors stemming from v-bind in CSS coupled with child component style bindings

[adamdehaven]

Vue version

3.4.38

Link to minimal reproduction

Vue SFC Playground Reproduction

Steps to reproduce

Load the playground reproduction, and ensure SSR is enabled. You'll see the Hydration Error warning in the console.

Code Example

Note

This is the same code submitted in the reproduction

Click to view the code from the reproduction

// App.vue
<script setup>
import ComponentTest from './ComponentTest.vue'

const props = defineProps({
  backgroundColor: {
    type: String,
    default: 'blue'
  },
  padding: {
    type: String,
    default: '20px'
  }
})
</script>

<template>
  <ComponentTest class="parent-component">
    <div class="child-content">
      Hello 👋
    </div>
  </ComponentTest>
</template>

<style scoped>
.parent-component {
  background-color: v-bind('props.backgroundColor')
}

.child-content {
  color: #fff;
  padding: v-bind('props.padding')
}
</style>

// ComponentTest.vue
<template>
  <div :style="{ display }">
    <slot name="default" />
  </div>
</template>

<script setup lang="ts">
defineProps({
  display: {
    type: String,
    default: 'flex',
  }
})
</script>

What is expected?

The inline style bindings in the child component would be resolved properly during SSR to prevent hydration errors.

What is actually happening?

The style bindings are not being properly merged, triggering a hydration error in SSR

System Info

No response

Any additional comments?

Essentially, the problem occurs when you use v-bind in a parent component (which under the hood inlines CSS custom properties on the root of the child component) and then you ALSO have bound dynamic styles to the root element internally.

[adamdehaven]

a side note: this only happens in DEV.

This could be correct; however, I’m not 100% sure.

With a more complicated example, I see some properties are totally omitted; it’s not just the difference in slashes.

[edison1105]

a side note: this only happens in DEV.

This could be correct; however, I’m not 100% sure. With a more complicated example, I see some properties are totally omitted; it’s not just the difference in slashes

I've made a PR to fix this issue. You can try using these temporary packages to see if they solve all your issues. If they don’t, please continue to provide feedback.

[adamdehaven]

Ah yep I just noticed the linked PR after I submitted the comment.