gather event listeners for slot default elements and render in a condition - fixes #1977

src/compile/render-dom/Block.ts

@@ -234,29 +234,7 @@ export default class Block {
 			this.builders.mount.addLine(`${this.autofocus}.focus();`);
 		}
 
-		if (this.event_listeners.length > 0) {
-			this.addVariable('#dispose');
-
-			if (this.event_listeners.length === 1) {
-				this.builders.hydrate.addLine(
-					`#dispose = ${this.event_listeners[0]};`
-				);
-
-				this.builders.destroy.addLine(
-					`#dispose();`
-				)
-			} else {
-				this.builders.hydrate.addBlock(deindent`
-					#dispose = [
-						${this.event_listeners.join(',\n')}
-					];
-				`);
-
-				this.builders.destroy.addLine(
-					`@run_all(#dispose);`
-				);
-			}
-		}
+		this.renderListeners();
 
 		const properties = new CodeBuilder();
 
@@ -403,6 +381,32 @@ export default class Block {
 		});
 	}
 
+	renderListeners(chunk: string = '') {
+		if (this.event_listeners.length > 0) {
+			this.addVariable(`#dispose${chunk}`);
+
+			if (this.event_listeners.length === 1) {
+				this.builders.hydrate.addLine(
+					`#dispose${chunk} = ${this.event_listeners[0]};`
+				);
+
+				this.builders.destroy.addLine(
+					`#dispose${chunk}();`
+				)
+			} else {
+				this.builders.hydrate.addBlock(deindent`
+					#dispose${chunk} = [
+						${this.event_listeners.join(',\n')}
+					];
+				`);
+
+				this.builders.destroy.addLine(
+					`@run_all(#dispose${chunk});`
+				);
+			}
+		}
+	}
+
 	toString() {
 		const localKey = this.key && this.getUniqueName('key');
 

src/compile/render-dom/wrappers/Slot.ts

@@ -72,7 +72,11 @@ export default class SlotWrapper extends Wrapper {
 		block.builders.update.pushCondition(`!${content_name}`);
 		block.builders.destroy.pushCondition(`!${content_name}`);
 
+		const listeners = block.event_listeners;
+		block.event_listeners = [];
 		this.fragment.render(block, parentNode, parentNodes);
+		block.renderListeners(`_${content_name}`);
+		block.event_listeners = listeners;
 
 		block.builders.create.popCondition();
 		block.builders.hydrate.popCondition();

test/runtime/samples/component-slot-used-with-default-event/Nested.html

@@ -0,0 +1,7 @@
+<script>
+	function click() {}
+</script>
+
+<p>
+	<slot><button on:click>Should not appear</button></slot>
+</p>

test/runtime/samples/component-slot-used-with-default-event/_config.js

@@ -0,0 +1,3 @@
+export default {
+	html: '<p>Hello</p>', show: true
+};

test/runtime/samples/component-slot-used-with-default-event/main.html

@@ -0,0 +1,7 @@
+<script>
+	import Nested from './Nested.html';
+</script>
+
+<Nested>
+	Hello
+</Nested>