search

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.55k stars 8.31k forks source link

Attribute are not applied to a child component when SSR-ed with compiler option `whitespace: 'preserve'` #8072

Open bill876 opened 1 year ago

bill876 commented 1 year ago

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.

jonysk commented 5 months ago

any updates or plans to resolve this issue?