SSR/Hydration: Re-Render due to hydration mismatch creates inconsistent DOM - textContent updated correctly, class attr isn't.

[loyep]

Version

3.2.23

Reproduction link

github.com

Steps to reproduce

• step 1

yarn && yarn dev

What is expected?

Class and text values are the same.

What is actually happening?

---

<template>
  <div :class="color">
    {{ color }}
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";

console.log(process.client);

const color = computed(() => {
  return process.client ? "black" : "red";
});
</script>

<style>
.red {
  color: red;
}
.black {
  color: black;
}
</style>

[loyep]

@posva

[LinusBorg]

Seems we have a bug here when bailing out of hydration because of a mismatch - the text content was updated, but the class attribute wasn't.

[LinusBorg]

@loyep Even though yes, this is a bug - your usage of a computed here is wrong, too.

Looking at the console, you can see that it causes a hydration mismatch.

[loyep]

Yes, I know. Only in this way can we reproduce this problem quickly.

[loyep]

LinusBorg

Not only class, but also style attributes