Skip to content

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

Closed
@loyep

Description

@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?

img1

img2


<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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    🍰 p2-nice-to-havePriority 2: this is not breaking anything but nice to have it addressed.scope: ssr

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      X