Custom element's props are not applied on the client side when they are SSR-ed
Vue version
3.2.45
Link to minimal reproduction
https://stackblitz.com/edit/nuxt-starter-b3q2qu
Steps to reproduce
- Go to https://stackblitz.com/edit/nuxt-starter-b3q2qu and let the project run in Chrome
- Open up the browser's dev tools and go to the console panel
- Filter the console message with "NUXT-SSR"
- Reload the preview in StackBlitz
What is expected?
The custom element should be rendered with the prop "name" set to "John Doe" on both the server and the client
What is actually happening?
The custom element is rendered with the prop "name" set to "John Doe" on the server. The custom element is rendered with the prop "name" set to "default" on the client.
System Info
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 16.14.2 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 7.17.0 - /usr/local/bin/npm
Any additional comments?
A Nuxt3 module is being worked on that is server-side rendering Lit components using @lit-labs/ssr package. The server rendering of these custom elements built on Lit work well. But during hydration on the client side, the custom elements are not created with the right props. Which results in Lit hydration issues mentioned here.
This seems to happen because, during hydration, the props are not applied/patched to the components. Except for the props that are named value and those that start with on.
It feels like custom element props should also be applied during hydration. Otherwise, they get instantiated with the wrong data on the client side.
1
If we are able to determine whether a given node is a custom element in this if statement here and patch the node, then it works extremely well.
However, trying to debug this we have found that the isCustomElement function from the app config is not available.
As a work-around, we could check customElements.get(el.localName) to see if it's in the custom elements registry (which is safe at this is client-side only)