diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
index bca01fdb4c..bc6e451631 100644
--- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
@@ -542,9 +542,15 @@ export default class InlineComponentWrapper extends Wrapper {
 				`);
 			}
 
-			block.chunks.destroy.push(b`
-				@destroy_component(${name}, ${parent_node ? null : 'detaching'});
-			`);
+			if (parent_node) {
+				block.chunks.destroy.unshift(b`
+					@destroy_component(${name}, detaching);
+				`);
+			} else {
+				block.chunks.destroy.push(b`
+					@destroy_component(${name}, ${parent_node ? null : 'detaching'});
+				`);
+			}
 
 			block.chunks.outro.push(
 				b`@transition_out(${name}.$$.fragment, #local);`
diff --git a/test/runtime/samples/component-detach-destroy/CustomComponent.svelte b/test/runtime/samples/component-detach-destroy/CustomComponent.svelte
new file mode 100644
index 0000000000..04069924ec
--- /dev/null
+++ b/test/runtime/samples/component-detach-destroy/CustomComponent.svelte
@@ -0,0 +1,10 @@
+<script>
+  import { onDestroy } from "svelte"
+  onDestroy(() => {
+		const el = document.querySelector('#show')
+		console.log(`Element exist ${!!el}`)
+    console.log("Custom component destroyed.")
+  })
+</script>
+
+<p>Hello</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-detach-destroy/_config.js b/test/runtime/samples/component-detach-destroy/_config.js
new file mode 100644
index 0000000000..83bfa940f6
--- /dev/null
+++ b/test/runtime/samples/component-detach-destroy/_config.js
@@ -0,0 +1,27 @@
+let log;
+export default {
+	html: `
+	<button>Show/Hide</button><div id="show"><p>Hello</p></div>
+	`,
+
+	before_test() {
+		log = console.log;
+	},
+	after_test() {
+		console.log = log;
+	},
+
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+		const messages = [];
+		console.log = msg => messages.push(msg);
+		await button.dispatchEvent(event);
+		//This means element gets removed
+		assert.htmlEqual(target.innerHTML, `
+			<button>Show/Hide</button>
+		`);
+		//This means element existed on Destroy gets called
+		assert.deepEqual(messages, ['Element exist true', 'Custom component destroyed.']);
+	}
+};
diff --git a/test/runtime/samples/component-detach-destroy/main.svelte b/test/runtime/samples/component-detach-destroy/main.svelte
new file mode 100644
index 0000000000..e000c5d3fe
--- /dev/null
+++ b/test/runtime/samples/component-detach-destroy/main.svelte
@@ -0,0 +1,16 @@
+<script>
+  import CustomComponent from './CustomComponent.svelte'
+	let div;
+  let show = true
+</script>
+
+<button on:click={() => {
+	show = !show
+}}>Show/Hide</button>
+
+{#if show}
+  <div id="show">
+    <CustomComponent />
+  </div>
+{/if}
+