SSR Hydration errors stemming from v-bind in CSS coupled with child component style bindings #11735
Description
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.