populate component.slots

src/generators/dom/index.ts

@@ -201,6 +201,8 @@ export default function dom(
 				`}
 			`}
 
+			${generator.slots.size && `this.slots = {};`}
+
 			this._fragment = @create_main_fragment( this._state, this );
 
 			if ( options.target ) {

src/generators/dom/visitors/Slot.ts

@@ -15,6 +15,8 @@ export default function visitSlot(
 	componentStack: Node[]
 ) {
 	const slotName = getStaticAttributeValue(node, 'name') || 'default';
+	generator.slots.add(slotName);
+
 	const name = block.getUniqueName(`slot_${slotName}`);
 	const content_name = block.getUniqueName(`slot_content_${slotName}`);
 
@@ -34,6 +36,14 @@ export default function visitSlot(
 		`);
 	}
 
+	block.builders.mount.addLine(
+		`#component.slots.${slotName} = ${name};`
+	);
+
+	block.builders.unmount.addLine(
+		`#component.slots.${slotName} = null;`
+	);
+
 	block.builders.create.pushCondition(`!${content_name}`);
 	block.builders.mount.pushCondition(`!${content_name}`);
 	block.builders.unmount.pushCondition(`!${content_name}`);

test/runtime/samples/component-slot-default/_config.js

@@ -1,3 +1,7 @@
 export default {
-	html: '<p><slot>Hello</slot></p>'
+	html: '<p><slot>Hello</slot></p>',
+
+	test(assert, component) {
+		assert.htmlEqual(component.refs.nested.slots.default.innerHTML, 'Hello');
+	}
 };

test/runtime/samples/component-slot-default/main.html

@@ -1,4 +1,4 @@
-<Nested>
+<Nested ref:nested>
 	Hello
 </Nested>
 

test/runtime/samples/component-slot-named/_config.js

@@ -5,5 +5,11 @@ export default {
 			<slot name='bar'><p slot='bar'>bar</p></slot>
 			<slot name='foo'><p slot='foo'>foo</p></slot>
 		</div>
-	`
+	`,
+
+	test(assert, component) {
+		assert.htmlEqual(component.refs.nested.slots.default.innerHTML, 'Hello');
+		assert.htmlEqual(component.refs.nested.slots.foo.innerHTML, `<p slot='foo'>foo</p>`);
+		assert.htmlEqual(component.refs.nested.slots.bar.innerHTML, `<p slot='bar'>bar</p>`);
+	}
 };

test/runtime/samples/component-slot-named/main.html

@@ -1,4 +1,4 @@
-<Nested>
+<Nested ref:nested>
 	Hello
 
 	<p slot='foo'>foo</p>