diff --git a/packages/compiler-ssr/__tests__/ssrElement.spec.ts b/packages/compiler-ssr/__tests__/ssrElement.spec.ts
index 8f0e28f4e14..4056b4c3c71 100644
--- a/packages/compiler-ssr/__tests__/ssrElement.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrElement.spec.ts
@@ -25,7 +25,7 @@ describe('ssr: element', () => {
test('v-html', () => {
expect(getCompiledString(`
`)).toMatchInlineSnapshot(`
"\`\${
- _ctx.foo
+ (_ctx.foo) ?? ''
}
\`"
`)
})
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
index 050528f5870..7175b797d48 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
@@ -22,6 +22,7 @@ import {
createAssignmentExpression,
createCallExpression,
createCompilerError,
+ createCompoundExpression,
createConditionalExpression,
createInterpolation,
createSequenceExpression,
@@ -188,7 +189,10 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
// special cases with children override
if (prop.type === NodeTypes.DIRECTIVE) {
if (prop.name === 'html' && prop.exp) {
- rawChildrenMap.set(node, prop.exp)
+ rawChildrenMap.set(
+ node,
+ createCompoundExpression([`(`, prop.exp, `) ?? ''`]),
+ )
} else if (prop.name === 'text' && prop.exp) {
node.children = [createInterpolation(prop.exp, prop.loc)]
} else if (prop.name === 'slot') {