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
This commit is contained in:
Happydev 2023-04-12 12:23:14 +00:00 committed by GitHub
parent bdfbe000d8
commit 76dd53e3f6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 11 additions and 1 deletions

View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix fallback content showing unexpectedly in some cases

View file

@ -35,7 +35,7 @@ export async function* renderSlot(
yield* iterator; yield* iterator;
} }
if (fallback) { if (fallback && !slotted) {
yield* renderSlot(result, fallback); yield* renderSlot(result, fallback);
} }
} }

View file

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

View file

@ -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>

View file

@ -1,5 +1,6 @@
--- ---
import Fallback from '../components/Fallback.astro'; import Fallback from '../components/Fallback.astro';
import Fallback2 from '../components/Fallback2.astro';
--- ---
<html> <html>
@ -11,6 +12,7 @@ import Fallback from '../components/Fallback.astro';
<Fallback> <Fallback>
<div id="override" /> <div id="override" />
</Fallback> </Fallback>
<Fallback2><div slot="override-2">Slotty slot.</div></Fallback2>
</div> </div>
</body> </body>
</html> </html>