diff --git a/packages/runtime-core/__tests__/helpers/scopeId.spec.ts b/packages/runtime-core/__tests__/helpers/scopeId.spec.ts index b14d3acbc44..c943ef97054 100644 --- a/packages/runtime-core/__tests__/helpers/scopeId.spec.ts +++ b/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( - `
` + `
` + + `
` + + // component inside slot should have: + // - scopeId from template context + // - slotted scopeId from slot owner + // - its own scopeId + `` + + `
` ) }) }) diff --git a/packages/runtime-core/src/componentRenderUtils.ts b/packages/runtime-core/src/componentRenderUtils.ts index 510f8b9af63..05813b9c93e 100644 --- a/packages/runtime-core/src/componentRenderUtils.ts +++ b/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) { - root = cloneVNode(root, { [vnode.scopeId]: '' }) + const scopeId = 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)) {