support nested <slot> elements

src/generators/server-side-rendering/visitors/Slot.ts

@@ -12,7 +12,7 @@ export default function visitSlot(
 	const name = node.attributes.find((attribute: Node) => attribute.name);
 	const slotName = name && name.value[0].data || 'default';
 
-	generator.append(`\${options && options.slotted && options.slotted.${slotName} ? options.slotted.${slotName}() : '`);
+	generator.append(`\${options && options.slotted && options.slotted.${slotName} ? options.slotted.${slotName}() : \``);
 
 	generator.elementDepth += 1;
 
@@ -22,5 +22,5 @@ export default function visitSlot(
 
 	generator.elementDepth -= 1;
 
-	generator.append(`'}`);
+	generator.append(`\`}`);
 }

src/parse/state/tag.ts

@@ -153,13 +153,6 @@ export default function tag(parser: Parser) {
 					start
 				);
 			}
-
-			if (item.type === 'Element' && item.name === 'slot') {
-				parser.error(
-					`<slot> elements cannot be nested`,
-					start
-				);
-			}
 		}
 	}
 

test/runtime/samples/component-slot-nested/Nested.html

@@ -0,0 +1,5 @@
+<div>
+	<slot name='foo'>
+		<slot name='bar'></slot>
+	</slot>
+</div>

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

@@ -0,0 +1,6 @@
+export default {
+	html: `
+		<div>
+			<p slot='bar'>bar</p>
+		</div>`
+};

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

@@ -0,0 +1,13 @@
+<Nested>
+	<p slot='bar'>bar</p>
+</Nested>
+
+<script>
+	import Nested from './Nested.html';
+
+	export default {
+		components: {
+			Nested
+		}
+	};
+</script>

test/server-side-rendering/index.js

@@ -90,11 +90,9 @@ describe("ssr", () => {
 				delete require.cache[resolved];
 			});
 
-			const component = require(`../runtime/samples/${dir}/main.html`);
-			let html;
-
 			try {
-				html = component.render(config.data);
+				const component = require(`../runtime/samples/${dir}/main.html`);
+				const html = component.render(config.data);
 
 				if (config.html) {
 					assert.htmlEqual(html, config.html);

test/validator/samples/component-slot-nested/errors.json

@@ -1,8 +0,0 @@
-[{
-	"message": "<slot> elements cannot be nested",
-	"loc": {
-		"line": 2,
-		"column": 1
-	},
-	"pos": 8
-}]

test/validator/samples/component-slot-nested/input.html

@@ -1,3 +0,0 @@
-<slot>
-	<slot name='foo'></slot>
-</slot>