solutions + tests + docs

site/content/docs/03-template-syntax.md

@@ -1609,6 +1609,14 @@ Named slots can also expose values. The `let:` directive goes on the element wit
 </FancyList>
 ```
 
+---
+
+Svelte can also instructed to ignore a `<slot>` element and treat it in a semantically generic way so that that `<slot>` can retain its default behavior as an HTML Element.
+This is useful if you are rendering your Svelte application to a `shadowRoot` and you wish to have slotted content come from the light DOM outside of the Svelte application
+
+```sv
+<slot name="some-slot" compiler-ignore></slot>
+```
 
 ### `<svelte:self>`
 

src/compiler/compile/nodes/shared/map_children.ts

@@ -47,11 +47,22 @@ function get_constructor(type) {
 	}
 }
 
+function should_treat_as_element(child: TemplateNode) {
+	switch (child.type) {
+		case 'Slot':
+			return child.attributes.some((attr) => attr.name === 'compiler-ignore' && attr.value);
+		default: return false;
+	}
+}
+
 export default function map_children(component, parent, scope, children: TemplateNode[]) {
 	let last = null;
 	let ignores = [];
 
-	return children.map(child => {
+	return children.map(child => {		
+		if (should_treat_as_element(child)) {
+			child.type = 'Element';
+		}
 		const constructor = get_constructor(child.type);
 
 		const use_ignores = child.type !== 'Text' && child.type !== 'Comment' && ignores.length;

test/runtime/samples/$$slot/A.svelte

@@ -28,4 +28,6 @@ $$slots: {toString($$slots)}
 	</div>
 {:else}
 	Slot b is not available
-{/if}
+{/if}
+
+<slot compiler-ignore name="c"></slot>

test/runtime/samples/$$slot/_config.js

@@ -4,11 +4,13 @@ export default {
 		<span slot="a">hello world</span>
 		$$slots: {"a":true,"default":true}
 		Slot b is not available
+		<slot compiler-ignore name="c"></slot>
 
 		<span>bye world</span>
 		<span slot="a">hello world</span>
 		$$slots: {"a":true,"b":true,"default":true}
 		<div><span slot="b">hello world</span></div>
+		<slot compiler-ignore name="c"></slot>
 	`,
 
 	async test({ assert, component }) {