[fix] onDestroy runs after the component is detached from DOM

src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts

@@ -542,9 +542,15 @@ export default class InlineComponentWrapper extends Wrapper {
 				`);
 			}
 
+			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);`

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>

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.']);
+	}
+};

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}
+