Vue version

3.2.47

Link to minimal reproduction

https://stackblitz.com/edit/vue-ssr-repro-xlrnx1

Steps to reproduce

Open the homepage in the reproduction. Look at the "Register now!" html.

What is expected?

The "Register now!" link has class wide and is 500px wide.

What is actually happening?

The "Register now!" link does not have class wide.

System Info

No response

Any additional comments?

The "Register now!" link (from component MyCta.vue) should have attributes that are set from the parent component MyWideCta.vue. One example is class wide, which should make the link box 500px wide.

This indeed happens most of the time.

However, if (1) the root element in MyCta.vue can be one of multiple, controlled with v-if AND (2) compilerOptions has whitespace: 'preserve' set, the server-rendered result does not have the attributes from the parent applied to MyCta root element.

The client rendering works as expected, which can be seen by clicking on another page link and back to home.

Changing MyCta.vue to always have a single root element, or removing whitespace: 'preserve' option, makes the ssr result the same as client-rendered result.