From d13095b317426a72948142a4f287daeb1f057358 Mon Sep 17 00:00:00 2001
From: Disservin <disservin.social@gmail.com>
Date: Thu, 8 Aug 2024 20:54:29 +0200
Subject: [PATCH 1/3] fix(compiler-core): warn when slot used on non-root
 template

Implements the warning from vue2 in vue3.

fixes https://github.com/vuejs/core/issues/11521
---
 .../compiler-core/__tests__/transform.spec.ts | 72 +++++++++++++++++++
 packages/compiler-core/src/errors.ts          |  4 ++
 packages/compiler-core/src/transform.ts       | 16 ++++-
 packages/compiler-dom/src/errors.ts           |  2 +-
 4 files changed, 92 insertions(+), 2 deletions(-)

diff --git a/packages/compiler-core/__tests__/transform.spec.ts b/packages/compiler-core/__tests__/transform.spec.ts
index 0946d3648..89e13856e 100644
--- a/packages/compiler-core/__tests__/transform.spec.ts
+++ b/packages/compiler-core/__tests__/transform.spec.ts
@@ -20,6 +20,7 @@ import { transformElement } from '../src/transforms/transformElement'
 import { transformSlotOutlet } from '../src/transforms/transformSlotOutlet'
 import { transformText } from '../src/transforms/transformText'
 import { PatchFlags } from '@vue/shared'
+import type { CompilerOptions } from '@vue/compiler-core'
 
 describe('compiler: transform', () => {
   test('context state', () => {
@@ -378,4 +379,75 @@ describe('compiler: transform', () => {
       )
     })
   })
+
+  describe('errors', () => {
+    function transformWithCodegen(
+      template: string,
+      options: CompilerOptions = {},
+    ) {
+      const ast = baseParse(template)
+      transform(ast, {
+        nodeTransforms: [
+          transformIf,
+          transformFor,
+          transformText,
+          transformSlotOutlet,
+          transformElement,
+        ],
+        ...options,
+      })
+      return ast
+    }
+
+    test('warn when v-slot used on non-root level <template>', () => {
+      const onError = vi.fn()
+
+      const ast = transformWithCodegen(
+        `
+        <template>
+          <Bar>
+            <template>
+              <template #header> Header </template>
+            </template>
+          </Bar>
+        </template>`,
+        { onError },
+      )
+
+      expect(onError.mock.calls[0]).toMatchObject([
+        {
+          code: ErrorCodes.X_TEMPLATE_NOT_ROOT,
+          loc: (ast.children[0] as any).children[0].children[0].children[0].loc,
+        },
+      ])
+    })
+
+    test('dont warn when v-slot used on root level <template>', () => {
+      const onError = vi.fn()
+
+      transformWithCodegen(
+        `<template>
+          <Comp>
+            <template #header> Header </template>
+          </Comp>
+        </template>`,
+        { onError },
+      )
+
+      expect(onError.mock.calls).toEqual([])
+    })
+
+    test('dont warn when v-slot used on root level <template> inside custom component', () => {
+      const onError = vi.fn()
+
+      transformWithCodegen(
+        `<template>
+          <div is="vue:customComp"><template v-slot="slotProps"></template></div>
+        </template>`,
+        { onError },
+      )
+
+      expect(onError.mock.calls).toEqual([])
+    })
+  })
 })
diff --git a/packages/compiler-core/src/errors.ts b/packages/compiler-core/src/errors.ts
index 58e113ab1..920776719 100644
--- a/packages/compiler-core/src/errors.ts
+++ b/packages/compiler-core/src/errors.ts
@@ -90,6 +90,7 @@ export enum ErrorCodes {
   X_V_MODEL_ON_PROPS,
   X_INVALID_EXPRESSION,
   X_KEEP_ALIVE_INVALID_CHILDREN,
+  X_TEMPLATE_NOT_ROOT,
 
   // generic errors
   X_PREFIX_ID_NOT_SUPPORTED,
@@ -151,6 +152,9 @@ export const errorMessages: Record<ErrorCodes, string> = {
     'End bracket for dynamic directive argument was not found. ' +
     'Note that dynamic directive argument cannot contain spaces.',
   [ErrorCodes.X_MISSING_DIRECTIVE_NAME]: 'Legal directive name was expected.',
+  [ErrorCodes.X_TEMPLATE_NOT_ROOT]:
+    `<template v-slot> can only appear at the root level inside ` +
+    `the receiving component`,
 
   // transform errors
   [ErrorCodes.X_V_IF_NO_EXPRESSION]: `v-if/v-else-if is missing expression.`,
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index 5e8cfee3f..da0b5bc6a 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -30,7 +30,12 @@ import {
   isArray,
   isString,
 } from '@vue/shared'
-import { defaultOnError, defaultOnWarn } from './errors'
+import {
+  ErrorCodes,
+  createCompilerError,
+  defaultOnError,
+  defaultOnWarn,
+} from './errors'
 import {
   CREATE_COMMENT,
   FRAGMENT,
@@ -496,6 +501,15 @@ export function createStructuralDirectiveTransform(
       // structural directive transforms are not concerned with slots
       // as they are handled separately in vSlot.ts
       if (node.tagType === ElementTypes.TEMPLATE && props.some(isVSlot)) {
+        if (
+          context.parent &&
+          'tagType' in context.parent &&
+          context.parent.tagType !== ElementTypes.COMPONENT
+        ) {
+          context.onError(
+            createCompilerError(ErrorCodes.X_TEMPLATE_NOT_ROOT, node.loc),
+          )
+        }
         return
       }
       const exitFns = []
diff --git a/packages/compiler-dom/src/errors.ts b/packages/compiler-dom/src/errors.ts
index b47624840..5bffa4e53 100644
--- a/packages/compiler-dom/src/errors.ts
+++ b/packages/compiler-dom/src/errors.ts
@@ -21,7 +21,7 @@ export function createDOMCompilerError(
 }
 
 export enum DOMErrorCodes {
-  X_V_HTML_NO_EXPRESSION = 53 /* ErrorCodes.__EXTEND_POINT__ */,
+  X_V_HTML_NO_EXPRESSION = 54 /* ErrorCodes.__EXTEND_POINT__ */,
   X_V_HTML_WITH_CHILDREN,
   X_V_TEXT_NO_EXPRESSION,
   X_V_TEXT_WITH_CHILDREN,

From 27ed27e2eeb6cf483a9de84c06b07481c57a4b02 Mon Sep 17 00:00:00 2001
From: Disservin <disservin.social@gmail.com>
Date: Fri, 16 Aug 2024 20:22:04 +0200
Subject: [PATCH 2/3] fix(compiler-core): warn when slot used on non-root
 template

Implements the warning from vue2 in vue3.

fixes https://github.com/vuejs/core/issues/11521
---
 .../compiler-core/__tests__/transform.spec.ts | 72 -------------------
 .../__tests__/transforms/vSlot.spec.ts        | 41 +++++++++++
 packages/compiler-core/src/errors.ts          |  8 +--
 packages/compiler-core/src/transform.ts       | 16 +----
 .../compiler-core/src/transforms/vSlot.ts     | 13 ++++
 5 files changed, 59 insertions(+), 91 deletions(-)

diff --git a/packages/compiler-core/__tests__/transform.spec.ts b/packages/compiler-core/__tests__/transform.spec.ts
index 89e13856e..0946d3648 100644
--- a/packages/compiler-core/__tests__/transform.spec.ts
+++ b/packages/compiler-core/__tests__/transform.spec.ts
@@ -20,7 +20,6 @@ import { transformElement } from '../src/transforms/transformElement'
 import { transformSlotOutlet } from '../src/transforms/transformSlotOutlet'
 import { transformText } from '../src/transforms/transformText'
 import { PatchFlags } from '@vue/shared'
-import type { CompilerOptions } from '@vue/compiler-core'
 
 describe('compiler: transform', () => {
   test('context state', () => {
@@ -379,75 +378,4 @@ describe('compiler: transform', () => {
       )
     })
   })
-
-  describe('errors', () => {
-    function transformWithCodegen(
-      template: string,
-      options: CompilerOptions = {},
-    ) {
-      const ast = baseParse(template)
-      transform(ast, {
-        nodeTransforms: [
-          transformIf,
-          transformFor,
-          transformText,
-          transformSlotOutlet,
-          transformElement,
-        ],
-        ...options,
-      })
-      return ast
-    }
-
-    test('warn when v-slot used on non-root level <template>', () => {
-      const onError = vi.fn()
-
-      const ast = transformWithCodegen(
-        `
-        <template>
-          <Bar>
-            <template>
-              <template #header> Header </template>
-            </template>
-          </Bar>
-        </template>`,
-        { onError },
-      )
-
-      expect(onError.mock.calls[0]).toMatchObject([
-        {
-          code: ErrorCodes.X_TEMPLATE_NOT_ROOT,
-          loc: (ast.children[0] as any).children[0].children[0].children[0].loc,
-        },
-      ])
-    })
-
-    test('dont warn when v-slot used on root level <template>', () => {
-      const onError = vi.fn()
-
-      transformWithCodegen(
-        `<template>
-          <Comp>
-            <template #header> Header </template>
-          </Comp>
-        </template>`,
-        { onError },
-      )
-
-      expect(onError.mock.calls).toEqual([])
-    })
-
-    test('dont warn when v-slot used on root level <template> inside custom component', () => {
-      const onError = vi.fn()
-
-      transformWithCodegen(
-        `<template>
-          <div is="vue:customComp"><template v-slot="slotProps"></template></div>
-        </template>`,
-        { onError },
-      )
-
-      expect(onError.mock.calls).toEqual([])
-    })
-  })
 })
diff --git a/packages/compiler-core/__tests__/transforms/vSlot.spec.ts b/packages/compiler-core/__tests__/transforms/vSlot.spec.ts
index 4766c2ca9..f79a5fe0a 100644
--- a/packages/compiler-core/__tests__/transforms/vSlot.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vSlot.spec.ts
@@ -28,6 +28,7 @@ import { createObjectMatcher } from '../testUtils'
 import { PatchFlags } from '@vue/shared'
 import { transformFor } from '../../src/transforms/vFor'
 import { transformIf } from '../../src/transforms/vIf'
+import type { CompilerError } from '../../src/errors'
 
 function parseWithSlots(template: string, options: CompilerOptions = {}) {
   const ast = parse(template, {
@@ -928,6 +929,46 @@ describe('compiler: transform component slots', () => {
         },
       })
     })
+
+    test('error when v-slot used on non-root level <template>', () => {
+      const onError = vi.fn()
+
+      const { root } = parseWithSlots(
+        `<Bar><template><template #header> Header </template></template></Bar>`,
+        { onError },
+      )
+
+      expect(onError.mock.calls[0]).toMatchObject([
+        {
+          code: ErrorCodes.X_V_SLOT_TEMPLATE_NOT_ROOT,
+          loc: (root.children[0] as any).children[0].children[0].loc,
+        },
+      ])
+    })
+
+    test('error when v-slot used on non-root level <template> with v-if', () => {
+      const onError = vi.fn().mockImplementation((error: CompilerError) => {
+        throw error
+      })
+
+      expect(() => {
+        parseWithSlots(
+          `<Bar><template v-if="true"><template #header> Header </template></template></Bar>`,
+          { onError },
+        )
+      }).toThrow()
+
+      expect(onError.mock.calls[0]).toMatchObject([
+        {
+          code: ErrorCodes.X_V_SLOT_TEMPLATE_NOT_ROOT,
+          loc: {
+            start: { column: 28, line: 1, offset: 27 },
+            end: { column: 65, line: 1, offset: 64 },
+            source: '<template #header> Header </template>',
+          },
+        },
+      ])
+    })
   })
 
   describe(`with whitespace: 'preserve'`, () => {
diff --git a/packages/compiler-core/src/errors.ts b/packages/compiler-core/src/errors.ts
index 920776719..057f9a276 100644
--- a/packages/compiler-core/src/errors.ts
+++ b/packages/compiler-core/src/errors.ts
@@ -84,13 +84,13 @@ export enum ErrorCodes {
   X_V_SLOT_DUPLICATE_SLOT_NAMES,
   X_V_SLOT_EXTRANEOUS_DEFAULT_SLOT_CHILDREN,
   X_V_SLOT_MISPLACED,
+  X_V_SLOT_TEMPLATE_NOT_ROOT,
   X_V_MODEL_NO_EXPRESSION,
   X_V_MODEL_MALFORMED_EXPRESSION,
   X_V_MODEL_ON_SCOPE_VARIABLE,
   X_V_MODEL_ON_PROPS,
   X_INVALID_EXPRESSION,
   X_KEEP_ALIVE_INVALID_CHILDREN,
-  X_TEMPLATE_NOT_ROOT,
 
   // generic errors
   X_PREFIX_ID_NOT_SUPPORTED,
@@ -152,9 +152,6 @@ export const errorMessages: Record<ErrorCodes, string> = {
     'End bracket for dynamic directive argument was not found. ' +
     'Note that dynamic directive argument cannot contain spaces.',
   [ErrorCodes.X_MISSING_DIRECTIVE_NAME]: 'Legal directive name was expected.',
-  [ErrorCodes.X_TEMPLATE_NOT_ROOT]:
-    `<template v-slot> can only appear at the root level inside ` +
-    `the receiving component`,
 
   // transform errors
   [ErrorCodes.X_V_IF_NO_EXPRESSION]: `v-if/v-else-if is missing expression.`,
@@ -176,6 +173,9 @@ export const errorMessages: Record<ErrorCodes, string> = {
     `Extraneous children found when component already has explicitly named ` +
     `default slot. These children will be ignored.`,
   [ErrorCodes.X_V_SLOT_MISPLACED]: `v-slot can only be used on components or <template> tags.`,
+  [ErrorCodes.X_V_SLOT_TEMPLATE_NOT_ROOT]:
+    `<template v-slot> can only appear at the root level inside ` +
+    `the receiving component`,
   [ErrorCodes.X_V_MODEL_NO_EXPRESSION]: `v-model is missing expression.`,
   [ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION]: `v-model value must be a valid JavaScript member expression.`,
   [ErrorCodes.X_V_MODEL_ON_SCOPE_VARIABLE]: `v-model cannot be used on v-for or v-slot scope variables because they are not writable.`,
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index da0b5bc6a..5e8cfee3f 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -30,12 +30,7 @@ import {
   isArray,
   isString,
 } from '@vue/shared'
-import {
-  ErrorCodes,
-  createCompilerError,
-  defaultOnError,
-  defaultOnWarn,
-} from './errors'
+import { defaultOnError, defaultOnWarn } from './errors'
 import {
   CREATE_COMMENT,
   FRAGMENT,
@@ -501,15 +496,6 @@ export function createStructuralDirectiveTransform(
       // structural directive transforms are not concerned with slots
       // as they are handled separately in vSlot.ts
       if (node.tagType === ElementTypes.TEMPLATE && props.some(isVSlot)) {
-        if (
-          context.parent &&
-          'tagType' in context.parent &&
-          context.parent.tagType !== ElementTypes.COMPONENT
-        ) {
-          context.onError(
-            createCompilerError(ErrorCodes.X_TEMPLATE_NOT_ROOT, node.loc),
-          )
-        }
         return
       }
       const exitFns = []
diff --git a/packages/compiler-core/src/transforms/vSlot.ts b/packages/compiler-core/src/transforms/vSlot.ts
index db367f39c..9d65cf699 100644
--- a/packages/compiler-core/src/transforms/vSlot.ts
+++ b/packages/compiler-core/src/transforms/vSlot.ts
@@ -49,6 +49,19 @@ export const trackSlotScopes: NodeTransform = (node, context) => {
     (node.tagType === ElementTypes.COMPONENT ||
       node.tagType === ElementTypes.TEMPLATE)
   ) {
+    const { parent } = context
+    if (
+      node.tagType === ElementTypes.TEMPLATE &&
+      parent &&
+      (('tagType' in parent && parent.tagType !== ElementTypes.COMPONENT) ||
+        (parent.type && parent.type > NodeTypes.ELEMENT)) &&
+      node.props.some(isVSlot)
+    ) {
+      context.onError(
+        createCompilerError(ErrorCodes.X_V_SLOT_TEMPLATE_NOT_ROOT, node.loc),
+      )
+    }
+
     // We are only checking non-empty v-slot here
     // since we only care about slots that introduce scope variables.
     const vSlot = findDir(node, 'slot')

From aa0c2748526bf43ec34669804a52d3827a32babd Mon Sep 17 00:00:00 2001
From: Disservin <disservin.social@gmail.com>
Date: Mon, 19 Aug 2024 20:06:49 +0200
Subject: [PATCH 3/3] fix(compiler-core): warn when slot used on non-root
 template

---
 .../compiler-core/__tests__/parse.spec.ts     | 92 +++++++++++++++++++
 .../__tests__/transforms/vSlot.spec.ts        | 41 ---------
 packages/compiler-core/src/errors.ts          |  8 +-
 packages/compiler-core/src/parser.ts          | 15 ++-
 .../compiler-core/src/transforms/vSlot.ts     | 13 ---
 5 files changed, 110 insertions(+), 59 deletions(-)

diff --git a/packages/compiler-core/__tests__/parse.spec.ts b/packages/compiler-core/__tests__/parse.spec.ts
index 22fb209cf..2f9723dd2 100644
--- a/packages/compiler-core/__tests__/parse.spec.ts
+++ b/packages/compiler-core/__tests__/parse.spec.ts
@@ -3259,4 +3259,96 @@ describe('compiler: parse', () => {
       })
     }
   })
+
+  describe('vue specific errors', () => {
+    test('error when v-slot used on non-root level <template>', () => {
+      const onError = vi.fn()
+
+      baseParse(
+        `<Bar><template><template #header> Header </template></template></Bar>`,
+        { onError },
+      )
+
+      expect(onError.mock.calls[0]).toMatchObject([
+        {
+          code: ErrorCodes.X_SLOT_TEMPLATE_NOT_ROOT,
+          loc: {
+            start: { column: 16, line: 1, offset: 15 },
+            end: { column: 53, line: 1, offset: 52 },
+            source: '<template #header> Header </template>',
+          },
+        },
+      ])
+    })
+
+    test('error when v-slot used on non-root level <template> with v-if', () => {
+      const onError = vi.fn()
+
+      baseParse(
+        `<Bar><template v-if="true"><template #header> Header </template></template></Bar>`,
+        { onError },
+      )
+
+      expect(onError.mock.calls[0]).toMatchObject([
+        {
+          code: ErrorCodes.X_SLOT_TEMPLATE_NOT_ROOT,
+          loc: {
+            start: { column: 28, line: 1, offset: 27 },
+            end: { column: 65, line: 1, offset: 64 },
+            source: '<template #header> Header </template>',
+          },
+        },
+      ])
+    })
+
+    test('error when v-slot used on non-root level <template> together with v-if', () => {
+      const onError = vi.fn()
+
+      baseParse(
+        `  <div><template v-if="true"><template v-if="true" #item> Header </template></template></div>`,
+        { onError },
+      )
+
+      expect(onError.mock.calls[0]).toMatchObject([
+        {
+          code: ErrorCodes.X_SLOT_TEMPLATE_NOT_ROOT,
+          loc: {
+            start: { column: 30, line: 1, offset: 29 },
+            end: { column: 77, line: 1, offset: 76 },
+            source: '<template v-if="true" #item> Header </template>',
+          },
+        },
+      ])
+    })
+
+    test('error when v-slot used on non-root level <template> inside dynamic component', () => {
+      const onError = vi.fn()
+
+      baseParse(
+        `<component is="MyComp"><template><template #item>bar</template></template></component>`,
+        { onError },
+      )
+
+      expect(onError.mock.calls[0]).toMatchObject([
+        {
+          code: ErrorCodes.X_SLOT_TEMPLATE_NOT_ROOT,
+          loc: {
+            start: { column: 34, line: 1, offset: 33 },
+            end: { column: 64, line: 1, offset: 63 },
+            source: '<template #item>bar</template>',
+          },
+        },
+      ])
+    })
+
+    test('shouldnt error when v-slot used on non-root level <template> inside dynamic component with casting', () => {
+      const onError = vi.fn()
+
+      baseParse(`<div is="vue:MyComp"><template #item>bar</template></div>`, {
+        onError,
+      })
+
+      expect(onError.mock.calls[0]).toEqual(undefined)
+    })
+  })
 })
diff --git a/packages/compiler-core/__tests__/transforms/vSlot.spec.ts b/packages/compiler-core/__tests__/transforms/vSlot.spec.ts
index f79a5fe0a..4766c2ca9 100644
--- a/packages/compiler-core/__tests__/transforms/vSlot.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vSlot.spec.ts
@@ -28,7 +28,6 @@ import { createObjectMatcher } from '../testUtils'
 import { PatchFlags } from '@vue/shared'
 import { transformFor } from '../../src/transforms/vFor'
 import { transformIf } from '../../src/transforms/vIf'
-import type { CompilerError } from '../../src/errors'
 
 function parseWithSlots(template: string, options: CompilerOptions = {}) {
   const ast = parse(template, {
@@ -929,46 +928,6 @@ describe('compiler: transform component slots', () => {
         },
       })
     })
-
-    test('error when v-slot used on non-root level <template>', () => {
-      const onError = vi.fn()
-
-      const { root } = parseWithSlots(
-        `<Bar><template><template #header> Header </template></template></Bar>`,
-        { onError },
-      )
-
-      expect(onError.mock.calls[0]).toMatchObject([
-        {
-          code: ErrorCodes.X_V_SLOT_TEMPLATE_NOT_ROOT,
-          loc: (root.children[0] as any).children[0].children[0].loc,
-        },
-      ])
-    })
-
-    test('error when v-slot used on non-root level <template> with v-if', () => {
-      const onError = vi.fn().mockImplementation((error: CompilerError) => {
-        throw error
-      })
-
-      expect(() => {
-        parseWithSlots(
-          `<Bar><template v-if="true"><template #header> Header </template></template></Bar>`,
-          { onError },
-        )
-      }).toThrow()
-
-      expect(onError.mock.calls[0]).toMatchObject([
-        {
-          code: ErrorCodes.X_V_SLOT_TEMPLATE_NOT_ROOT,
-          loc: {
-            start: { column: 28, line: 1, offset: 27 },
-            end: { column: 65, line: 1, offset: 64 },
-            source: '<template #header> Header </template>',
-          },
-        },
-      ])
-    })
   })
 
   describe(`with whitespace: 'preserve'`, () => {
diff --git a/packages/compiler-core/src/errors.ts b/packages/compiler-core/src/errors.ts
index 057f9a276..e0e3eadaf 100644
--- a/packages/compiler-core/src/errors.ts
+++ b/packages/compiler-core/src/errors.ts
@@ -69,6 +69,7 @@ export enum ErrorCodes {
   X_MISSING_INTERPOLATION_END,
   X_MISSING_DIRECTIVE_NAME,
   X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END,
+  X_SLOT_TEMPLATE_NOT_ROOT,
 
   // transform errors
   X_V_IF_NO_EXPRESSION,
@@ -84,7 +85,6 @@ export enum ErrorCodes {
   X_V_SLOT_DUPLICATE_SLOT_NAMES,
   X_V_SLOT_EXTRANEOUS_DEFAULT_SLOT_CHILDREN,
   X_V_SLOT_MISPLACED,
-  X_V_SLOT_TEMPLATE_NOT_ROOT,
   X_V_MODEL_NO_EXPRESSION,
   X_V_MODEL_MALFORMED_EXPRESSION,
   X_V_MODEL_ON_SCOPE_VARIABLE,
@@ -152,6 +152,9 @@ export const errorMessages: Record<ErrorCodes, string> = {
     'End bracket for dynamic directive argument was not found. ' +
     'Note that dynamic directive argument cannot contain spaces.',
   [ErrorCodes.X_MISSING_DIRECTIVE_NAME]: 'Legal directive name was expected.',
+  [ErrorCodes.X_SLOT_TEMPLATE_NOT_ROOT]:
+    `<template v-slot> can only appear at the root level inside ` +
+    `the receiving component`,
 
   // transform errors
   [ErrorCodes.X_V_IF_NO_EXPRESSION]: `v-if/v-else-if is missing expression.`,
@@ -173,9 +176,6 @@ export const errorMessages: Record<ErrorCodes, string> = {
     `Extraneous children found when component already has explicitly named ` +
     `default slot. These children will be ignored.`,
   [ErrorCodes.X_V_SLOT_MISPLACED]: `v-slot can only be used on components or <template> tags.`,
-  [ErrorCodes.X_V_SLOT_TEMPLATE_NOT_ROOT]:
-    `<template v-slot> can only appear at the root level inside ` +
-    `the receiving component`,
   [ErrorCodes.X_V_MODEL_NO_EXPRESSION]: `v-model is missing expression.`,
   [ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION]: `v-model value must be a valid JavaScript member expression.`,
   [ErrorCodes.X_V_MODEL_ON_SCOPE_VARIABLE]: `v-model cannot be used on v-for or v-slot scope variables because they are not writable.`,
diff --git a/packages/compiler-core/src/parser.ts b/packages/compiler-core/src/parser.ts
index cac943dd6..d7bb165f8 100644
--- a/packages/compiler-core/src/parser.ts
+++ b/packages/compiler-core/src/parser.ts
@@ -749,13 +749,26 @@ function backTrack(index: number, c: number) {
 }
 
 const specialTemplateDir = new Set(['if', 'else', 'else-if', 'for', 'slot'])
-function isFragmentTemplate({ tag, props }: ElementNode): boolean {
+function isFragmentTemplate({ tag, props, loc }: ElementNode): boolean {
   if (tag === 'template') {
     for (let i = 0; i < props.length; i++) {
       if (
         props[i].type === NodeTypes.DIRECTIVE &&
         specialTemplateDir.has((props[i] as DirectiveNode).name)
       ) {
+        if (
+          stack[0] &&
+          'tagType' in stack[0] &&
+          !isComponent(stack[0]) &&
+          props.find(p => p.name === 'slot')
+        ) {
+          currentOptions.onError(
+            createCompilerError(
+              ErrorCodes.X_SLOT_TEMPLATE_NOT_ROOT,
+              getLoc(loc.start.offset, loc.end.offset),
+            ),
+          )
+        }
         return true
       }
     }
diff --git a/packages/compiler-core/src/transforms/vSlot.ts b/packages/compiler-core/src/transforms/vSlot.ts
index 9d65cf699..db367f39c 100644
--- a/packages/compiler-core/src/transforms/vSlot.ts
+++ b/packages/compiler-core/src/transforms/vSlot.ts
@@ -49,19 +49,6 @@ export const trackSlotScopes: NodeTransform = (node, context) => {
     (node.tagType === ElementTypes.COMPONENT ||
       node.tagType === ElementTypes.TEMPLATE)
   ) {
-    const { parent } = context
-    if (
-      node.tagType === ElementTypes.TEMPLATE &&
-      parent &&
-      (('tagType' in parent && parent.tagType !== ElementTypes.COMPONENT) ||
-        (parent.type && parent.type > NodeTypes.ELEMENT)) &&
-      node.props.some(isVSlot)
-    ) {
-      context.onError(
-        createCompilerError(ErrorCodes.X_V_SLOT_TEMPLATE_NOT_ROOT, node.loc),
-      )
-    }
-
     // We are only checking non-empty v-slot here
     // since we only care about slots that introduce scope variables.
     const vSlot = findDir(node, 'slot')