complain if named slots other than direct descendant of component (#4509)

Author: tanhauhau

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 * Allow `<svelte:self>` to be used in a slot ([#2798](https://github.com/sveltejs/svelte/issues/2798))
 * Expose object of unknown props in `$$restProps` ([#2930](https://github.com/sveltejs/svelte/issues/2930))
+* Prevent passing named slots other than from the top level within a component ([#3385](https://github.com/sveltejs/svelte/issues/3385))
 * Allow transitions and animations to work within iframes ([#3624](https://github.com/sveltejs/svelte/issues/3624))
 * Fix initialising slot fallbacks when unnecessary ([#3763](https://github.com/sveltejs/svelte/issues/3763))
 * Disallow binding directly to `const` variables ([#4479](https://github.com/sveltejs/svelte/issues/4479))

src/compiler/compile/nodes/Element.ts

@@ -278,7 +278,7 @@ export default class Element extends Node {
 	}
 
 	validate_attributes() {
-		const { component } = this;
+		const { component, parent } = this;
 
 		const attribute_map = new Map();
 
@@ -395,26 +395,10 @@ export default class Element extends Node {
 					component.slot_outlets.add(name);
 				}
 
-				let ancestor = this.parent;
-				do {
-					if (ancestor.type === 'InlineComponent') break;
-					if (ancestor.type === 'Element' && /-/.test(ancestor.name)) break;
-
-					if (ancestor.type === 'IfBlock' || ancestor.type === 'EachBlock') {
-						const type = ancestor.type === 'IfBlock' ? 'if' : 'each';
-						const message = `Cannot place slotted elements inside an ${type}-block`;
-
-						component.error(attribute, {
-							code: `invalid-slotted-content`,
-							message
-						});
-					}
-				} while (ancestor = ancestor.parent);
-
-				if (!ancestor) {
+				if (!(parent.type === 'InlineComponent' || within_custom_element(parent))) {
 					component.error(attribute, {
 						code: `invalid-slotted-content`,
-						message: `Element with a slot='...' attribute must be a descendant of a component or custom element`
+						message: `Element with a slot='...' attribute must be a child of a component or a descendant of a custom element`,
 					});
 				}
 			}
@@ -776,3 +760,12 @@ function should_have_attribute(
 		message: `A11y: <${name}> element should have ${article} ${sequence} attribute`
 	});
 }
+
+function within_custom_element(parent: INode) {
+	while (parent) {
+		if (parent.type === 'InlineComponent') return false;
+		if (parent.type === 'Element' && /-/.test(parent.name)) return true;
+		parent = parent.parent;
+	}
+	return false;
+}

test/runtime/samples/component-slot-nested-error-2/Nested.svelte

@@ -0,0 +1 @@
+<slot name="slot2"></slot>

test/runtime/samples/component-slot-nested-error-2/_config.js

@@ -0,0 +1,3 @@
+export default {
+	error: [`Element with a slot='...' attribute must be a child of a component or a descendant of a custom element`]
+};

test/runtime/samples/component-slot-nested-error-2/main.svelte

@@ -0,0 +1,11 @@
+<script>
+  import Nested from "./Nested.svelte";
+</script>
+
+<Nested>
+  <div slot="slot1">
+    <div>
+      <div slot="slot2" />
+    </div>
+  </div>
+</Nested>

test/runtime/samples/component-slot-nested-error-3/Nested.svelte

@@ -0,0 +1 @@
+<slot name="slot2"></slot>

test/runtime/samples/component-slot-nested-error-3/_config.js

@@ -0,0 +1,3 @@
+export default {
+	error: [`Element with a slot='...' attribute must be a child of a component or a descendant of a custom element`]
+};

test/runtime/samples/component-slot-nested-error-3/main.svelte

@@ -0,0 +1,11 @@
+<script>
+  import Nested from "./Nested.svelte";
+</script>
+
+<Nested>
+  <div>
+    <div>
+      <div slot="slot2" />
+    </div>
+  </div>
+</Nested>

test/runtime/samples/component-slot-nested-error/Nested.svelte

@@ -0,0 +1 @@
+<slot name="slot2"></slot>

test/runtime/samples/component-slot-nested-error/_config.js

@@ -0,0 +1,3 @@
+export default {
+	error: [`Element with a slot='...' attribute must be a child of a component or a descendant of a custom element`]
+};