[astro-components] add named slots example using Fragment

[sarah11918]

Description (required)

This adds another example to the section on named slots that shows using the named slot attribute on the Fragment component (<Fragment slot="header">) because the only existing examples showed adding the attribute to HTML elements.

In response to a request from an issue. Also note that this pattern is used and documented in the AstroWind template: https://astrowind.vercel.app/astrowind-template-in-depth , so it seemed reasonable to include an example here!

Am open to refining this example, or choosing a better one. Note that this one adds style classes (not style attributes) and therefore is maybe reflective of how it might be used, but not copy/pasteable. We could also choose to show inline styles if we cared instead.

Direct deploy preview: https://docs-git-named-fragment-slots-astrodotbuild.vercel.app/en/core-concepts/astro-components/#named-slots

Related issues & labels (optional)

• Closes Slots can also be Fragments besides HTML elements, but it's not explained #5959

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview		Dec 28, 2023 5:04pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
docs-i18n	⬜️ Ignored (Inspect)	Visit Preview		Dec 28, 2023 5:04pm

[VoxelMC]

The changes look great, Sarah! It's always nice to have another example for a bit of an abstract concept. :)

[VoxelMC]

Suggested change

	<Fragment slot="header"> <!-- pass table header -->
	<tr><th>Column 1</th><th>Column 2</th></tr>
	</Fragment>
	<Fragment slot="body"> <!-- pass table body -->
	<Fragment slot="header"> <!-- passed into table header -->
	<tr><th>Column 1</th><th>Column 2</th></tr>
	</Fragment>
	<Fragment slot="body"> <!-- passed into table body -->

I don't know if this makes sense, but it does in my head. For clarity - the slots terminology doesn't seem to have a clear directionality to it, in my opinion (name <--> slot attributes).

[sarah11918]

So, my attempt at this has been to use the phrase "slot placeholder" when talking about the <slot /> element itself (that happens to have a name attribute, but I'm not emphasizing this). Then, when talking about the content that will go into the slot, I do say "slot attribute" because in this case, the slot is in fact an attribute, not an element.

So, I'm trying to less equate attributes and more distinguish which role "slot" has in each case... hopefully somewhat successfully? 😅

[sarah11918]

Thanks everyone! Going to merge this as NWTWWHB now! 🥳