getSSRProps return value does not pass down innerHTML as dom props

[henkvhest]

Vue version

3.2.47

Link to minimal reproduction

https://stackblitz.com/edit/github-c1z4a8-we3axz?file=src/main.ts

Steps to reproduce

return { innerHTML: 'some value' } from a Vue directive via getSSRProps. innerHTML is then not propagated. (see also stackblitz example)

What is expected?

I expect innerHTML to be defined serverside so that my component is prefilled with content before rendering.

What is actually happening?

The innerHTML is not filled, which means the content stays blank (see stackblitz example)

System Info

System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Pro
    Memory: 96.88 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.14.2/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 112.0.5615.121
    Firefox: 112.0.1
    Safari: 16.0

Any additional comments?

I'm currently working rewriting some parts of our codebase from Nuxt 2 to Nuxt 3. I initially thought this was related to Nuxt but the same issue is happening in Vue 3 with SSR rendering too. I try to modify the innerHTML serverside but it seems that innerHTML is not propagated. I tried in the stackblitz example to write some content to innerHTML via getSSRProps. I'm not sure if this is a bug or intended behaviour, or perhaps there is a different way to modify innerHTML in getSSRProps?

[mannymu]

I use webpack and have the same problem

[mannymu]

getSSRProps does not support rendering of these properties. But I use v-html in ssr server is normal

[henkvhest]

Ah good find, seems like it's intentional indeed! I'll close this one

[edison1105]

I think it needs to be fixed, and this only happens in optimized compilation. For client-compiled render functions it works.

core/packages/server-renderer/src/render.ts

Line 317 in d2c3d8b

if (props.innerHTML) {

[yyx990803]

This is fixed by 79602f9

However note that the getSSRProps in the linked reproduction is incorrect - it should be:

app.directive('inner-html', {
    getSSRProps(binding) {
      return {
-       domProps: {
-         innerHTML: 'sanitizeCustom(directiveMeta.value)',
-       },
+       innerHTML: sanitizeCustom(binding.value)
      };
    },
  });

Also, innerHTML and textContent will only be respected if the element has no static children.