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)) {