Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.32.0

Stencil Framework Output Target

Vue

Stencil Framework Output Target Version

0.10.7

Current Behavior

When using the vue output target in Nuxt with SSR, I get a lot of errors for Hydration class mismatch, for example:

[Vue warn]: Hydration class mismatch on 
<my-component class="hydrated" first="Stencil" last="'Don't call me a framework' JS" ref="[object Object]"> 
  - rendered on server: class="hydrated"
  - expected on client: class=""
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 
  at <MyComponent first="Stencil" last="'Don't call me a framework' JS" > 
  at <App key=4 > 
  at <NuxtRoot>

When rendered in SSR, the Stencil generate the correct class, but when the Vue hydrates in client the classes generated in SSR side are removed, in this case "hydrated". By buidng my own components I notice that class i added in my components are remove too.

For example, these is one of my components:

@Component({
  tag: 'nv-alert',
  shadow: false,
})
export class NvAlert {
   /**
   * The color of the alert.
   */
  @Prop() color?: Color = 'primary';

  render() {
    return (
      <Host class={{ 'nv-alert': true }}>
        <slot />
      </Host>
    );
  }
}

But i get the same error:

[Vue warn]: Hydration class mismatch on 
<nv-alert class="hydrated custom-class-in-vue nv-alert" ref="[object Object]"> 
  - rendered on server: class="hydrated custom-class-in-vue nv-alert"
  - expected on client: class="custom-class-in-vue"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 
  at <NvAlert > 
  at <App key=4 > 
  at <NuxtRoot>

Note that the "custom-class" is added in my vue components, in my Nuxt project. So in Hydrate the Vue is removing all class that is not synced with clint, in my case, the style of my component is powered my global class "nv-alert" and this is broking the component style.

Expected Behavior

Keep SSR, component and user classes without throw errors

Steps to Reproduce

1. clone this repo and install all deps.
2. run the nuxt example and open the browser in http://localhost:3000/
3. See in devtools console the mismatch errors

Code Reproduction URL

https://github.com/stenciljs/output-targets

Additional Information

I'm not expert in this subject, but after some tests i notice that the getElementClasses in runtime is using the html element from ref that don't have the SSR classes.

So i open a PR to adjust this by using the element from currentInstance?.vnode. Maybe this can help, what do you think?

#651