fix: allow `let:` directives on slot elements (#10391)

fixes #10382

---------

Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>

.changeset/friendly-candles-relate.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: allow `let:` directives on slot elements

packages/svelte/src/compiler/errors.js

@@ -273,7 +273,8 @@ const attributes = {
 
 /** @satisfies {Errors} */
 const slots = {
-	'invalid-slot-element-attribute': () => `<slot> can only receive attributes, not directives`,
+	'invalid-slot-element-attribute': () =>
+		`<slot> can only receive attributes and (optionally) let directives`,
 	'invalid-slot-attribute': () => `slot attribute must be a static value`,
 	/** @param {boolean} is_default */
 	'invalid-slot-name': (is_default) =>

packages/svelte/src/compiler/phases/2-analyze/validation.js

@@ -494,6 +494,7 @@ const validation = {
 			parent === undefined ||
 			(parent.type !== 'Component' &&
 				parent.type !== 'RegularElement' &&
+				parent.type !== 'SlotElement' &&
 				parent.type !== 'SvelteElement' &&
 				parent.type !== 'SvelteComponent' &&
 				parent.type !== 'SvelteSelf' &&
@@ -609,7 +610,7 @@ const validation = {
 						error(attribute, 'invalid-slot-name', true);
 					}
 				}
-			} else if (attribute.type !== 'SpreadAttribute') {
+			} else if (attribute.type !== 'SpreadAttribute' && attribute.type !== 'LetDirective') {
 				error(attribute, 'invalid-slot-element-attribute');
 			}
 		}

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -2916,6 +2916,9 @@ export const template_visitors = {
 		/** @type {import('estree').Expression[]} */
 		const spreads = [];
 
+		/** @type {import('estree').ExpressionStatement[]} */
+		const lets = [];
+
 		let is_default = true;
 
 		/** @type {import('estree').Expression} */
@@ -2931,16 +2934,21 @@ export const template_visitors = {
 				if (attribute.name === 'name') {
 					name = value;
 					is_default = false;
-				} else {
+				} else if (attribute.name !== 'slot') {
 					if (attribute.metadata.dynamic) {
 						props.push(b.get(attribute.name, [b.return(value)]));
 					} else {
 						props.push(b.init(attribute.name, value));
 					}
 				}
+			} else if (attribute.type === 'LetDirective') {
+				lets.push(/** @type {import('estree').ExpressionStatement} */ (context.visit(attribute)));
 			}
 		}
 
+		// Let bindings first, they can be used on attributes
+		context.state.init.push(...lets);
+
 		const props_expression =
 			spreads.length === 0
 				? b.object(props)

packages/svelte/src/compiler/phases/3-transform/server/transform-server.js

@@ -1576,6 +1576,9 @@ const template_visitors = {
 		/** @type {import('estree').Expression[]} */
 		const spreads = [];
 
+		/** @type {import('estree').ExpressionStatement[]} */
+		const lets = [];
+
 		/** @type {import('estree').Expression} */
 		let expression = b.member_id('$$props.children');
 
@@ -1586,16 +1589,21 @@ const template_visitors = {
 				const value = serialize_attribute_value(attribute.value, context);
 				if (attribute.name === 'name') {
 					expression = b.member(b.member_id('$$props.$$slots'), value, true, true);
-				} else {
+				} else if (attribute.name !== 'slot') {
 					if (attribute.metadata.dynamic) {
 						props.push(b.get(attribute.name, [b.return(value)]));
 					} else {
 						props.push(b.init(attribute.name, value));
 					}
 				}
+			} else if (attribute.type === 'LetDirective') {
+				lets.push(/** @type {import('estree').ExpressionStatement} */ (context.visit(attribute)));
 			}
 		}
 
+		// Let bindings first, they can be used on attributes
+		context.state.init.push(...lets);
+
 		const props_expression =
 			spreads.length === 0
 				? b.object(props)

packages/svelte/src/compiler/phases/scope.js

@@ -357,6 +357,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 		},
 
 		SvelteFragment,
+		SlotElement: SvelteFragment,
 		SvelteElement: SvelteFragment,
 		RegularElement: SvelteFragment,
 

packages/svelte/tests/runtime-legacy/samples/slot-let-forwarding/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<div><div slot="x">5</div></div>`
+});

packages/svelte/tests/runtime-legacy/samples/slot-let-forwarding/inner.svelte

@@ -0,0 +1,3 @@
+<div>
+	<slot name="x" foo={5} />
+</div>

packages/svelte/tests/runtime-legacy/samples/slot-let-forwarding/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	import Outer from './outer.svelte';
+</script>
+
+<Outer>
+	<div slot="x" let:foo>
+		{foo}
+	</div>
+</Outer>

packages/svelte/tests/runtime-legacy/samples/slot-let-forwarding/outer.svelte

@@ -0,0 +1,9 @@
+<script>
+	import Inner from './inner.svelte';
+</script>
+
+<Inner>
+	<slot name="x" slot="x" let:foo {foo}>
+			{foo}
+	</slot>
+</Inner>