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

)

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`]
+};

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

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

test/validator/samples/component-slotted-custom-element-2/errors.json

@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-slotted-content",
+		"message": "Element with a slot='...' attribute must be a child of a component or a descendant of a custom element",
+		"start": { "line": 10, "column": 9, "character": 138 },
+		"end": { "line": 10, "column": 19, "character": 148 },
+		"pos": 138
+	}
+]

test/validator/samples/component-slotted-custom-element-2/input.svelte

@@ -0,0 +1,14 @@
+<script>
+	import Nested from './Nested.svelte';
+	let thing = false;
+</script>
+
+<custom-element>
+	<Nested>
+		{#if thing}
+			<div>
+				<div slot='bar' />
+			</div>
+		{/if}
+	</Nested>
+</custom-element>

test/validator/samples/component-slotted-custom-element/errors.json

@@ -0,0 +1 @@
+[]

test/validator/samples/component-slotted-custom-element/input.svelte

@@ -0,0 +1,15 @@
+<script>
+	import Nested from './Nested.svelte';
+	let thing = false;
+</script>
+
+<Nested>
+	<custom-element>
+		<div>
+			<div slot='foo' />
+		</div>
+		{#if thing}
+			<div slot='bar' />
+		{/if}
+	</custom-element>
+</Nested>

test/validator/samples/component-slotted-each-block/errors.json

@@ -1,6 +1,6 @@
 [{
 	"code": "invalid-slotted-content",
-	"message": "Cannot place slotted elements inside an each-block",
+	"message": "Element with a slot='...' attribute must be a child of a component or a descendant of a custom element",
 	"start": {
 		"line": 7,
 		"column": 7,

test/validator/samples/component-slotted-if-block/errors.json

@@ -1,6 +1,6 @@
 [{
 	"code": "invalid-slotted-content",
-	"message": "Cannot place slotted elements inside an if-block",
+	"message": "Element with a slot='...' attribute must be a child of a component or a descendant of a custom element",
 	"start": {
 		"line": 7,
 		"column": 7,

test/validator/samples/slot-attribute-invalid/errors.json

@@ -1,6 +1,6 @@
 [{
 	"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",
 	"start": {
 		"line": 1,
 		"column": 5,