fix: ensure event handlers referencing $host are not hoisted (#12775)

.changeset/smooth-windows-explain.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure event handlers referencing $host are not hoisted

packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js

@@ -155,8 +155,8 @@ function get_delegated_event(event_name, handler, context) {
 	const visited_references = new Set();
 	const scope = target_function.metadata.scope;
 	for (const [reference] of scope.references) {
-		// Bail out if the arguments keyword is used
+		// Bail out if the arguments keyword is used or $host is referenced
-		if (reference === 'arguments') return unhoisted;
+		if (reference === 'arguments' || reference === '$host') return unhoisted;
 		// Bail out if references a store subscription
 		if (scope.get(`$${reference}`)?.kind === 'store_sub') return unhoisted;
 

packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune/_config.js

@@ -14,11 +14,13 @@ export default test({
 
 		await tick();
 
-		el.shadowRoot.querySelector('button').click();
+		el.shadowRoot.querySelectorAll('button')[0].click();
-		assert.deepEqual(events, ['greeting', 'hello']);
+		el.shadowRoot.querySelectorAll('button')[1].click();
+		assert.deepEqual(events, ['greeting', 'hello', 'greeting', 'welcome']);
 
 		el.removeEventListener('greeting', handle_evt);
-		el.shadowRoot.querySelector('button').click();
+		el.shadowRoot.querySelectorAll('button')[0].click();
-		assert.deepEqual(events, ['greeting', 'hello']);
+		el.shadowRoot.querySelectorAll('button')[1].click();
+		assert.deepEqual(events, ['greeting', 'hello', 'greeting', 'welcome']);
 	}
 });

packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune/main.svelte

@@ -4,6 +4,11 @@
 	function greet(greeting) {
 		$host().dispatchEvent(new CustomEvent('greeting', { detail: greeting }))
 	}
+
+	function welcome() {
+		$host().dispatchEvent(new CustomEvent('greeting', { detail: 'welcome' }))
+	}
 </script>
 
 <button onclick={() => greet('hello')}>say hello</button>
+<button onclick={welcome}>say welcome</button>