Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
bill876 opened this issue Apr 12, 2023 · 1 comment · May be fixed by #12304
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope: ssr

Comments

@bill876
Copy link

bill876 commented Apr 12, 2023

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

jonysk commented May 23, 2024

any updates or plans to resolve this issue?

@edison1105 edison1105 added scope: ssr 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Nov 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope: ssr
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants