Repository: sveltejs/svelte (JavaScript)
Date: 2017-08-29 12:03:30+00:00
Task type: Feature

Issue:
<slot> can be nested
I misread this — it turns out [you can nest](https://webkit.org/blog/4096/introducing-shadow-dom-api/) `<slot>` elements in web components, so we should too:

```html
<b>Name</b>:
<slot name="fullName">
    <slot name="firstName"></slot>
    <slot name="lastName"></slot>
</slot><br>
<b>Email</b>: <slot name="email">Unknown</slot><br>
<b>Address</b>: <slot name="address">Unknown</slot>
```

If no `slot='fullName'` element was provided, it would render the `slot='firstName'` and `slot='lastName'` ones instead. Should be straightforward, I *think* it's just a case of removing the validation.


Issue discussion:

Solution patch:
diff --git a/src/generators/server-side-rendering/visitors/Slot.ts b/src/generators/server-side-rendering/visitors/Slot.ts
--- a/src/generators/server-side-rendering/visitors/Slot.ts
+++ b/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(`\`}`);
 }
diff --git a/src/parse/state/tag.ts b/src/parse/state/tag.ts
--- a/src/parse/state/tag.ts
+++ b/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 patch:
diff --git a/test/runtime/samples/component-slot-nested/Nested.html b/test/runtime/samples/component-slot-nested/Nested.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested/Nested.html
@@ -0,0 +1,5 @@
+<div>
+	<slot name='foo'>
+		<slot name='bar'></slot>
+	</slot>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-nested/_config.js b/test/runtime/samples/component-slot-nested/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested/_config.js
@@ -0,0 +1,6 @@
+export default {
+	html: `
+		<div>
+			<p slot='bar'>bar</p>
+		</div>`
+};
diff --git a/test/runtime/samples/component-slot-nested/main.html b/test/runtime/samples/component-slot-nested/main.html
new file mode 100644
--- /dev/null
+++ b/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>
diff --git a/test/server-side-rendering/index.js b/test/server-side-rendering/index.js
--- a/test/server-side-rendering/index.js
+++ b/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);
diff --git a/test/validator/samples/component-slot-nested/errors.json b/test/validator/samples/component-slot-nested/errors.json
deleted file mode 100644
--- a/test/validator/samples/component-slot-nested/errors.json
+++ /dev/null
@@ -1,8 +0,0 @@
-[{
-	"message": "<slot> elements cannot be nested",
-	"loc": {
-		"line": 2,
-		"column": 1
-	},
-	"pos": 8
-}]
\ No newline at end of file
diff --git a/test/validator/samples/component-slot-nested/input.html b/test/validator/samples/component-slot-nested/input.html
deleted file mode 100644
--- a/test/validator/samples/component-slot-nested/input.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<slot>
-	<slot name='foo'></slot>
-</slot>
\ No newline at end of file