fix: replay function invocations on custom element

fixes #8954

Author: dummdidumm

.changeset/thick-yaks-eat.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: replay function invocations on custom element

packages/svelte/src/runtime/internal/Component.js

@@ -169,6 +169,8 @@ if (typeof HTMLElement === 'function') {
 		$$cn = false;
 		/** Component props data */
 		$$d = {};
+		/** Component binding invocations recorded before the component was mounted, to playback on creation */
+		$$b = [];
 		/** `true` if currently in the process of reflecting component props back to attributes */
 		$$r = false;
 		/** @type {Record<string, CustomElementPropDefinition>} Props definition (name, reflected, type etc) */
@@ -270,6 +272,11 @@ if (typeof HTMLElement === 'function') {
 					}
 				});
 
+				// Replay binding invocations
+				for (const binding of this.$$b) {
+					binding();
+				}
+
 				// Reflect component props as attributes
 				const reflect_attributes = () => {
 					this.$$r = true;
@@ -410,14 +417,25 @@ export function create_custom_element(
 			set(value) {
 				value = get_custom_element_value(prop, value, props_definition);
 				this.$$d[prop] = value;
+				console.log('did set', value, this.$$d);
 				this.$$c?.$set({ [prop]: value });
 			}
 		});
 	});
 	accessors.forEach((accessor) => {
 		Object.defineProperty(Class.prototype, accessor, {
 			get() {
-				return this.$$c?.[accessor];
+				if (this.$$c) {
+					return this.$$c[accessor];
+				} else {
+					// This is only an approximation of what's possible.
+					// It only handles the case where the accessor is a function without a return value
+					return (...args) => {
+						this.$$b.push(() => {
+							this.$$c[accessor](...args);
+						});
+					};
+				}
 			}
 		});
 	});

packages/svelte/test/runtime-browser/custom-elements-samples/bindings/main.svelte

@@ -0,0 +1,13 @@
+<svelte:options customElement="my-app" />
+
+<script>
+	export let prop = false;
+	let innerVar = false;
+
+	export function toggle() {
+		innerVar = !innerVar;
+		prop = !prop;
+	}
+</script>
+
+<p>{prop} {innerVar}</p>

packages/svelte/test/runtime-browser/custom-elements-samples/bindings/test.js

@@ -0,0 +1,18 @@
+import * as assert from 'assert.js';
+import { tick } from 'svelte';
+import './main.svelte';
+
+export default async function (target) {
+	const element = document.createElement('my-app');
+	element.prop = true;
+	element.toggle();
+	target.appendChild(element);
+	await tick();
+	const el = target.querySelector('my-app');
+
+	await tick();
+
+	assert.ok(!el.prop);
+	const p = el.shadowRoot.querySelector('p');
+	assert.equal(p.textContent, 'false true');
+}

packages/svelte/test/runtime-browser/custom-elements-samples/oncreate/main.svelte

@@ -1,7 +1,7 @@
 <svelte:options customElement="my-app" />
 
 <script>
-	import { onMount } from "svelte";
+	import { onMount } from 'svelte';
 
 	export let prop = false;
 	export let propsInitialized;