missing class attributes on wrapper functions

[simllll]

trafficstars

this happens only when using the wrapper functions for hydration and not by using a tag.

e.g. you have a <CustomComponentA class="xyz" />

and CustomComponentA has <div class="blub"></div> as template.

Currently only "xyz" is applied while the component is not hydrated, with this regular class merging is happening and the final result class is "xyz blub".

I've added a test for this scenario.

Without the patch following scenarios happen:

1. SSR (correct):

2. before hydration (wrong, this also causes some flickering):

3. after hydration (correct again):

with this patch missing classes (missing in vnode, but are available in $el) are applied to the loading component. @maoberlehner please let me know what you think of this issue.

thanks simon

[maoberlehner]

That's strange. Never realised that it behaves like that. But this seems to me like a bug in the server side rendering. Not sure if this should be fixed in here. But also I don't fully understand it yet. Maybe I will take some time to think it thru. But stopped working on this project because I expect this to be obsolete with Vue 3 (hopefully).

[patrickxchong]

@maoberlehner can you share your thoughts on why you think this component will be obsolete with Vue 3? I'm deciding whether I should aggressively optimize my Nuxt.js app with this component or hold off on that. I can't seem to find any info on lazy hydration being planned for Vue 3.

[maoberlehner]

See https://twitter.com/youyuxi/status/1265684355420225537 for example.

[patrickxchong]

Very cool, thank you! 👍