3128: Test to show nested slots fails

src/compiler/compile/render_dom/index.ts

@@ -460,15 +460,22 @@ 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) {
+								const ctx = options.props.$$scope ? options.props.$$scope.ctx : {};
+								this.$$.slotted[key] = options.props.$$slots[key][0](ctx);
+								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/index.js

@@ -105,8 +105,9 @@ describe('custom-elements', function() {
 
 			const page = await browser.newPage();
 
-			page.on('console', (type, ...args) => {
-				console[type](...args);
+			page.on('console', msg => {
+				for (let i = 0; i < msg.args().length; ++i)
+    				console[msg.type()](`${i}: ${msg.args()[i]}`);
 			});
 
 			try {

test/custom-elements/samples/nested-slots/Block.svelte

@@ -0,0 +1,3 @@
+<svelte:options tag="my-block"/>
+
+<div><slot></slot></div>

test/custom-elements/samples/nested-slots/main.svelte

@@ -0,0 +1,7 @@
+<svelte:options tag="my-app"/>
+
+<script>
+	import Block from './Block.svelte';
+</script>
+
+<Block><strong>Name</strong></Block>

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

@@ -0,0 +1,15 @@
+import * as assert from 'assert';
+import './main.svelte';
+
+export default async function (target) {
+	target.innerHTML = '<my-app/>';
+	const el = target.querySelector('my-app');
+
+	const block = el.shadowRoot.children[0];
+
+	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;