Make passed 23673slots render through slotted option

Author: Cameron Stitt

src/compiler/compile/render_dom/index.ts

@@ -460,15 +460,21 @@ export default function dom(
 					${dev_props_check}
 
 					if (options) {
+						this.$$.slotted = {};
+
 						if (options.target) {
 							@insert(options.target, this, options.anchor);
 						}
 
-						${(props.length > 0 || uses_props) && deindent`
 						if (options.props) {
+							for (const key in options.props.$$slots) {
+								this.$$.slotted[key] = options.props.$$slots[key][0]();
+								this.$$.slotted[key].c();
+							}
+							${(props.length > 0 || uses_props) && deindent`
 							this.$set(options.props);
-							@flush();
-						}`}
+							@flush();`}
+						}
 					}
 				}
 

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

@@ -449,9 +449,15 @@ export default class InlineComponentWrapper extends Wrapper {
 				);
 			}
 
-			block.builders.mount.add_line(
-				`@mount_component(${name}, ${parent_node || '#target'}, ${parent_node ? 'null' : 'anchor'});`
-			);
+			if (component.compile_options.customElement) {
+				block.builders.mount.add_line(
+					`@insert(${ parent_node || '#target'}, ${name}, ${parent_node ? 'null' : 'anchor'});`
+				)
+			} else {
+				block.builders.mount.add_line(
+					`@mount_component(${name}, ${parent_node || '#target'}, ${parent_node ? 'null' : 'anchor'});`
+				);
+			}
 
 			block.builders.intro.add_block(deindent`
 				@transition_in(${name}.$$.fragment, #local);

src/runtime/internal/Component.ts

@@ -146,7 +146,7 @@ if (typeof HTMLElement !== 'undefined') {
 			// @ts-ignore todo: improve typings
 			for (const key in this.$$.slotted) {
 				// @ts-ignore todo: improve typings
-				this.appendChild(this.$$.slotted[key]);
+				this.$$.slotted[key].m(this, null);
 			}
 		}
 
@@ -155,6 +155,11 @@ if (typeof HTMLElement !== 'undefined') {
 		}
 
 		$destroy() {
+			// @ts-ignore todo: improve typings
+			for (const key in this.$$.slotted) {
+				// @ts-ignore todo: improve typings
+				this.$$.slotted[key].d();
+			}
 			destroy_component(this, 1);
 			this.$destroy = noop;
 		}

test/custom-elements/samples/nested-slots/test.js

@@ -7,7 +7,9 @@ export default async function (target) {
 
 	const block = el.shadowRoot.children[0];
 
-	const [slot] = block.children;
+	const h1 = block.shadowRoot.children[0];
+
+	const [slot] = h1.children;
 
 	assert.equal(slot.assignedNodes().length, 1);
-}
+}

test/js/samples/css-shadow-dom-keyframes/expected.js

@@ -44,13 +44,22 @@ class Component extends SvelteElement {
 		init(this, { target: this.shadowRoot }, null, create_fragment, safe_not_equal, []);
 
 		if (options) {
+			this.$$.slotted = {};
+
 			if (options.target) {
 				insert(options.target, this, options.anchor);
 			}
+
+			if (options.props) {
+				for (const key in options.props.$$slots) {
+					this.$$.slotted[key] = options.props.$$slots[key][0]();
+					this.$$.slotted[key].c();
+				}
+			}
 		}
 	}
 }
 
 customElements.define("custom-element", Component);
 
-export default Component;
+export default Component;