Fix slot fallbacks unexpectedly showing up in some cases (#6819)

* test: add test fixture * test: add test case * test: revert unneeded changes in fixture * fix * chore: changeset
withastro · Apr 12, 2023 · 76dd53e · 76dd53e
1 parent bdfbe00
commit 76dd53e
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 1 deletion.
diff --git a/.changeset/healthy-experts-worry.md b/.changeset/healthy-experts-worry.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix fallback content showing unexpectedly in some cases
diff --git a/packages/astro/src/runtime/server/render/slot.ts b/packages/astro/src/runtime/server/render/slot.ts
@@ -35,7 +35,7 @@ export async function* renderSlot(
 		yield* iterator;
 	}
 
-	if (fallback) {
+	if (fallback && !slotted) {
 		yield* renderSlot(result, fallback);
 	}
 }

diff --git a/packages/astro/test/astro-slots.test.js b/packages/astro/test/astro-slots.test.js
@@ -52,6 +52,7 @@ describe('Slots', () => {
 		const $ = cheerio.load(html);
 
 		expect($('#override')).to.have.lengthOf(1);
+		expect($('#fallback-2').text()).to.equal('Slotty slot.');
 	});
 
 	it('Slots work with multiple elements', async () => {

diff --git a/packages/astro/test/fixtures/astro-slots/src/components/Fallback2.astro b/packages/astro/test/fixtures/astro-slots/src/components/Fallback2.astro
@@ -0,0 +1,2 @@
+<!-- note: to make testing easier this was inlined -->
+<div id="fallback-2"><slot name="override-2">Fallback should only show when no slot has been provided.</slot></div>
diff --git a/packages/astro/test/fixtures/astro-slots/src/pages/fallback-override.astro b/packages/astro/test/fixtures/astro-slots/src/pages/fallback-override.astro
@@ -1,5 +1,6 @@
 ---
 import Fallback from '../components/Fallback.astro';
+import Fallback2 from '../components/Fallback2.astro';
 ---
 
 <html>
@@ -11,6 +12,7 @@ import Fallback from '../components/Fallback.astro';
       <Fallback>
         <div id="override" />
       </Fallback>
+      <Fallback2><div slot="override-2">Slotty slot.</div></Fallback2>
     </div>
   </body>
 </html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<!-- note: to make testing easier this was inlined -->
		<div id="fallback-2"><slot name="override-2">Fallback should only show when no slot has been provided.</slot></div>