Merge eaa5ef565c into fa4f1c45f4

packages/svelte/src/internal/client/dom/elements/custom-element.js

@@ -114,13 +114,13 @@ if (typeof HTMLElement === 'function') {
 				const $$slots = {};
 				const existing_slots = get_custom_elements_slots(this);
 				for (const name of this.$$s) {
-					if (name in existing_slots) {
-						if (name === 'default' && !this.$$d.children) {
-							this.$$d.children = create_slot(name);
-							$$slots.default = true;
-						} else {
-							$$slots[name] = create_slot(name);
-						}
+					if (name === 'default' && !this.$$d.children) {
+						// Always create the default slot, even if no children are present initially,
+						// because children may be added dynamically later (fixes #13638)
+						this.$$d.children = create_slot(name);
+						$$slots.default = true;
+					} else if (name !== 'default' && name in existing_slots) {
+						$$slots[name] = create_slot(name);
 					}
 				}
 				for (const attribute of this.attributes) {

packages/svelte/tests/runtime-browser/custom-elements-samples/no-initial-children-default-slot/_config.js

@@ -0,0 +1,25 @@
+import { test } from '../../assert';
+const tick = () => Promise.resolve();
+
+export default test({
+	async test({ assert, target }) {
+		// Mount the custom element with no initial children
+		target.innerHTML = `<my-widget></my-widget>`;
+		await tick();
+
+		/** @type {any} */
+		const ce = target.querySelector('my-widget');
+
+		// The default slot should be created even without initial children
+		assert.htmlEqual(ce.shadowRoot.innerHTML, `<slot></slot>`);
+
+		// Now add a child dynamically
+		const span = document.createElement('span');
+		span.textContent = 'hello';
+		ce.appendChild(span);
+		await tick();
+
+		// The slot element should still be present to render the dynamically added child
+		assert.htmlEqual(ce.shadowRoot.innerHTML, `<slot></slot>`);
+	}
+});

packages/svelte/tests/runtime-browser/custom-elements-samples/no-initial-children-default-slot/main.svelte

@@ -0,0 +1,3 @@
+<svelte:options customElement="my-widget" />
+
+<slot></slot>