Similar to #6553
see #6553 (comment)

Well, I really need to use v-html on dynamic component because it can be both div and span depending on what math formula my universial componentt Math is rendering:

<template>
    <component
        :is="isBlockMath ? 'div' : 'span'"
        :class="[$style.math, isBlockMath ? $style.blockMath : $style.inlineMath, meta.freeze && $style.freeze]"
        v-html="mathHtml"
        v-once />
</template>

The workaround is using v-if which sucks and requires duplicating attributes:

<template>
    <div v-if="isBlockMath" v-html="mathHtml" :class="classes" v-once></div>
    <span v-else v-html="mathHtml" :class="classes" v-once></span>
</template>

And if using v-html is not allowed, why it silently eats it up and breaks output html, without showing any errors or warnings?

So there is simply nothing to discuss here, as I see it...
Right now it just don't work as it is intended to work (and it actually does work without SSR), so this is 100% a bug.

@Gwynerva
Here is a workaround may be better.

@edison1105 Thank you. Yeah I think this will do. But still as I already said v-html on dynamic component is already working just fine without SSR, so I can't see any reasons why it should not work with SSR.

I think using v-html or v-text on a component(or dynamic component) is somewhat of an anti-pattern, not sure if it will be supported, Let's wait for Evan's input.

As the use case doesn’t involve custom components, I think it’s legit for dynamic element tags.

Of course I am talking about "vanilla" HTML tags. Can't think of why someone would need to v-html custom components, which will most likely break them and when you can directly edit these components to accept props, slots and etc.

Tried to use render function h during setup to conditionally create VNode.
It works without SSR, and partially works in SSR but creates hydration mismatches — on server side it creates an empty comment <!---->. This time not even creating correct wrapping tag, as it was in the example in the first post here.

<script setup>
import { h } from 'vue';

const isBlock = true;
const MyNode = h(isBlock ? 'div' : 'span', { innerHTML: '<strong>Hello World!</strong>' });
</script>

<template>
  <MyNode />
</template>

I am not sure but I think this might be the same bug.

UPDATE:

Turns out when using setup syntax h is not working on server side at all:

<script setup>
import { h } from 'vue';
const MyNode = h('div', { innerHTML: '<strong>Hello World!</strong>' });
</script>

<template>
  <MyNode />
</template>

To sum up, there are two bugs, both working just fine in normal Vue and not working in Vue SSR:

1. h is not working in SSR when using <script setup> syntax causing hydration errors. There is a fix from @linzhe141
2. <component> with dynamic :is and v-html not working in SSR, silently skipping the entire tag body. There is a fix from @noootwo

It was pointed out that second bug needs discussion, but the first one I think obviously is an SSR bug.

What is even worse, the first bug actually prevents a simple possible workaround to avoid using v-html on <component> in the use case I metioned above and therefore, avoid meeting second bug.

@danielroe I think it would be better to rename issue to something like "Dynamic tag generation fails in SSR" to address both problems in one issue.

@yyx990803 Would be really cool to see both or at least the first one to be fixed. Because right now the only way is to duplicate tags directly in <template>, writing all attributes twice, or use sub-components without setup syntax.

Tried to use render function h during setup to conditionally create VNode. It works without SSR, and partially works in SSR but creates hydration mismatches — on server side it creates an empty comment <!---->. This time not even creating correct wrapping tag, as it was in the example in the first post here.

<script setup>
import { h } from 'vue';

const isBlock = true;
const MyNode = h(isBlock ? 'div' : 'span', { innerHTML: '<strong>Hello World!</strong>' });
</script>

<template>
  <MyNode />
</template>

I am not sure but I think this might be the same bug.

UPDATE:

Turns out when using setup syntax h is not working on server side at all:

<script setup>
import { h } from 'vue';
const MyNode = h('div', { innerHTML: '<strong>Hello World!</strong>' });
</script>

<template>
  <MyNode />
</template>

This is considered an edge case. IMO, a VNode cannot be rendered directly, at least, it should be <component :is="VNode"/> see, and rendering a VNode directly will no reactivity, such as in this case.

@edison1105

I'm a relative newcomer to Vue but isn't <component :is="FooComponent" /> supposed to do exactly the same as writing <FooComponent /> but with an ability to replace currently rendering component with something else at runtime with :is attribute?

And if so, what is wrong (besides loosing reactivity) about rendering vnode directly via <VNode /> if rendering it via <component :is="VNode" /> does exactly the same thing?

UPDATE:

I tried rendering h with <component :is="..." /> and it works, resolving my problem with math tag:

<script lang="ts" setup>
// ...

const Tag = h(props.isBlockMath ? 'div' : 'span', { innerHTML: props.html });
</script>

<template>
    <component :is="Tag" :class="classes" v-once />
</template>

Finally, the workaround without creating sub-Vue files.
But the questions remain: if this works with <component ... /> why it is not working without it, considering <component :is="Tag" /> does the same as <Tag />? And also why it is not working with when combining :is="..." and v-html="..." at the same time?

<script lang="ts" setup>
// ...

const Tag = h(props.isBlockMath ? 'div' : 'span', { innerHTML: props.html });
</script>

<template>
    <!-- Works -->
    <component :is="Tag" :class="classes" v-once />
    <!-- Fails -->
    <component :is="isBlockMath ? 'div' : 'span'" :class="classes" v-html="html" v-once />
    <!-- Also Fails -->
    <component :is="isBlockMath ? h('div') : h('span')" :class="classes" v-html="html" v-once />
</template>