From 05c7288e03c50d9c899d7328fb5f560452e8b302 Mon Sep 17 00:00:00 2001
From: Dane Bratz <dane@skipperhospitality.com>
Date: Fri, 25 Nov 2022 14:33:38 -0800
Subject: [PATCH] solutions + tests + docs

---
 site/content/docs/03-template-syntax.md           |  8 ++++++++
 src/compiler/compile/nodes/shared/map_children.ts | 13 ++++++++++++-
 test/runtime/samples/$$slot/A.svelte              |  4 +++-
 test/runtime/samples/$$slot/_config.js            |  2 ++
 4 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md
index 9afe399469..bad314e419 100644
--- a/site/content/docs/03-template-syntax.md
+++ b/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>`
 
diff --git a/src/compiler/compile/nodes/shared/map_children.ts b/src/compiler/compile/nodes/shared/map_children.ts
index e6ad1d7f6e..2acaad1702 100644
--- a/src/compiler/compile/nodes/shared/map_children.ts
+++ b/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;
diff --git a/test/runtime/samples/$$slot/A.svelte b/test/runtime/samples/$$slot/A.svelte
index ffa166166c..0c44b1e349 100644
--- a/test/runtime/samples/$$slot/A.svelte
+++ b/test/runtime/samples/$$slot/A.svelte
@@ -28,4 +28,6 @@ $$slots: {toString($$slots)}
 	</div>
 {:else}
 	Slot b is not available
-{/if}
\ No newline at end of file
+{/if}
+
+<slot compiler-ignore name="c"></slot>
diff --git a/test/runtime/samples/$$slot/_config.js b/test/runtime/samples/$$slot/_config.js
index 46e435ae97..6a9fb2cc35 100644
--- a/test/runtime/samples/$$slot/_config.js
+++ b/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 }) {