fix(runtime-core): fix scopeId inheritance for component inside slots

packages/runtime-core/__tests__/helpers/scopeId.spec.ts

@@ -45,13 +45,18 @@ describe('scopeId runtime support', () => {
         return h('div', this.$slots.default())
       })
     }
+    const withChil2Id = withScopeId('child2')
+    const Child2 = {
+      __scopeId: 'child2',
+      render: withChil2Id(() => h('span'))
+    }
     const App = {
       __scopeId: 'parent',
       render: withParentId(() => {
         return h(
           Child,
           withParentId(() => {
-            return h('div')
+            return [h('div'), h(Child2)]
           })
         )
       })
@@ -62,7 +67,14 @@ describe('scopeId runtime support', () => {
     // - scopeId from parent
     // - slotted scopeId (with `-s` postfix) from child (the tree owner)
     expect(serializeInner(root)).toBe(
-      `<div parent child><div parent child-s></div></div>`
+      `<div parent child>` +
+        `<div parent child-s></div>` +
+        // component inside slot should have:
+        // - scopeId from template context
+        // - slotted scopeId from slot owner
+        // - its own scopeId
+        `<span parent child-s child2></span>` +
+        `</div>`
     )
   })
 })

packages/runtime-core/src/componentRenderUtils.ts

@@ -42,6 +42,7 @@ export function renderComponentRoot(
 ): VNode {
   const {
     type: Component,
+    parent,
     vnode,
     proxy,
     withProxy,
@@ -148,9 +149,15 @@ export function renderComponentRoot(
     }
 
     // inherit scopeId
-    if (vnode.scopeId) {
+    const scopeId = vnode.scopeId
-      root = cloneVNode(root, { [vnode.scopeId]: '' })
+    if (scopeId) {
+      root = cloneVNode(root, { [scopeId]: '' })
     }
+    const treeOwnerId = parent && parent.type.__scopeId
+    if (treeOwnerId && treeOwnerId !== scopeId) {
+      root = cloneVNode(root, { [treeOwnerId + '-s']: '' })
+    }
+
     // inherit directives
     if (vnode.dirs) {
       if (__DEV__ && !isElementRoot(root)) {