fix: assign correct scope to attributes of named slot (#12476)

fixes #12213

Author: dummdidumm

.changeset/cold-shrimps-hug.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: assign correct scope to attributes of named slot

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

@@ -386,16 +386,20 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 		Component(node, { state, visit, path }) {
 			state.scope.reference(b.id(node.name), path);
 
-			for (const attribute of node.attributes) {
-				visit(attribute);
-			}
-
 			// let:x is super weird:
 			// - for the default slot, its scope only applies to children that are not slots themselves
 			// - for named slots, its scope applies to the component itself, too
 			const [scope, is_default_slot] = analyze_let_directives(node, state.scope);
-			if (!is_default_slot) {
+			if (is_default_slot) {
+				for (const attribute of node.attributes) {
+					visit(attribute);
+				}
+			} else {
 				scopes.set(node, scope);
+
+				for (const attribute of node.attributes) {
+					visit(attribute, { ...state, scope });
+				}
 			}
 
 			for (const child of node.fragment.nodes) {

packages/svelte/tests/runtime-legacy/samples/component-slot-named-scope/Child.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	export let onclick;
+</script>
+
+<button {onclick}>
+	<slot />
+</button>

packages/svelte/tests/runtime-legacy/samples/component-slot-named-scope/Parent.svelte

@@ -0,0 +1 @@
+<slot name="item" item={1} />

packages/svelte/tests/runtime-legacy/samples/component-slot-named-scope/_config.js

@@ -0,0 +1,12 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, logs, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+		assert.deepEqual(logs, [1]);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/component-slot-named-scope/main.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import Parent from './Parent.svelte';
+	import Child from './Child.svelte';
+</script>
+
+<Parent>
+	<Child slot="item" let:item onclick={() => console.log(item)}>asd</Child>
+</Parent>