search

vuejs / core

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

Custom element's props are not applied on the client side when they are SSR-ed #7203

Closed prashantpalikhe closed 1 month ago

prashantpalikhe commented 1 year ago

Vue version

3.2.45

Link to minimal reproduction

https://stackblitz.com/edit/nuxt-starter-b3q2qu

Steps to reproduce

  1. Go to https://stackblitz.com/edit/nuxt-starter-b3q2qu and let the project run in Chrome
  2. Open up the browser's dev tools and go to the console panel
  3. Filter the console message with "NUXT-SSR"
  4. 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.

steveworkman commented 1 year ago

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)