fix(ssr): avoid scopeId inheritance when recursing components

packages/server-renderer/__tests__/ssrScopeId.spec.ts

@@ -1,6 +1,7 @@
-import { createApp, h, mergeProps, withCtx } from 'vue'
+import { createApp, createVNode, h, mergeProps, withCtx } from 'vue'
 import { renderToString } from '../src/renderToString'
 import { ssrRenderAttrs, ssrRenderComponent, ssrRenderSlot } from '../src'
+import { renderVNode } from '../src/render'
 
 describe('ssr: scopedId runtime behavior', () => {
   test('id on component root', async () => {
@@ -269,4 +270,23 @@ describe('ssr: scopedId runtime behavior', () => {
         `</div>`,
     )
   })
+
+  // #12159
+  test('avoid scopeId inheritance when recursing components', async () => {
+    let count = 2
+
+    const Comp = {
+      __scopeId: 'comp',
+      ssrRender: (ctx: any, push: any, parent: any, attrs: any) => {
+        if (--count) {
+          push(ssrRenderComponent(h(Comp), attrs, null, parent))
+        } else {
+          renderVNode(push, createVNode('div', attrs, 'vuejs'), parent)
+        }
+      },
+    }
+
+    const result = await renderToString(createApp(Comp)) // output: `<div></div>`
+    expect(result).toBe(`<div comp>vuejs</div>`)
+  })
 })

packages/server-renderer/src/render.ts

@@ -19,6 +19,7 @@ import {
   ShapeFlags,
   escapeHtml,
   escapeHtmlComment,
+  hasOwn,
   isArray,
   isFunction,
   isPromise,
@@ -303,7 +304,7 @@ function renderElementVNode(
     openTag += ssrRenderAttrs(props, tag)
   }
 
-  if (scopeId) {
+  if (scopeId && (!props || !hasOwn(props, scopeId))) {
     openTag += ` ${scopeId}`
   }
   // inherit parent chain scope id if this is the root node