run onMount in connectedCallback for custom elements

src/runtime/internal/Component.ts

@@ -57,6 +57,9 @@ export function mount_component(component, target, anchor) {
 
 	fragment && fragment.m(target, anchor);
 
+	// custom element: call onMount in connectedCallback instead
+	if (component.shadowRoot) return;
+
 	// onMount happens before the initial afterUpdate
 	add_render_callback(() => {
 		const new_on_destroy = on_mount.map(run).filter(is_function);
@@ -176,6 +179,10 @@ if (typeof HTMLElement === 'function') {
 				// @ts-ignore todo: improve typings
 				this.appendChild(this.$$.slotted[key]);
 			}
+
+			const new_on_destroy = this.$$.on_mount.map(run).filter(is_function);
+			this.$$.on_destroy.push(...new_on_destroy);
+			// don't reset on_mount array as not to interfere with reinsertion
 		}
 
 		attributeChangedCallback(attr, _oldValue, newValue) {

test/custom-elements/samples/oncreate/main.svelte

@@ -4,8 +4,11 @@
 	import { onMount } from 'svelte';
 
 	export let wasCreated;
+	export let propsSetBeforeMount;
+	export let attrs;
 
 	onMount(() => {
 		wasCreated = true;
+		propsSetBeforeMount = attrs === 'should be set';
 	});
 </script>

test/custom-elements/samples/oncreate/test.js

@@ -2,7 +2,8 @@ import * as assert from 'assert';
 import './main.svelte';
 
 export default function (target) {
-	target.innerHTML = '<my-app/>';
+	target.innerHTML = '<my-app attrs="should be set" />';
 	const el = target.querySelector('my-app');
 	assert.ok(el.wasCreated);
+	assert.ok(el.propsSetBeforeMount);
 }