michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

docs: remove duplicate section describing slots ()

Browse source 
With the recently added documentation describing named slots, the previous Slots section was redundant, and was consolidated into the same section.
This commit is contained in:
João Paquim 2021-07-22 15:02:29 +01:00 • committed by GitHub
parent 9af0d85e9e
commit 6d37b7f80e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 2 additions and 30 deletions

32
docs/src/pages/core-concepts/astro-components.md
View file

@ -196,6 +196,8 @@ const { greeting = 'Hello', name } = Astro.props;
</MyComponent>
```
Note that if the `<slot>` tag is not used in the HTML template, any children passed to the component will not be rendered.
Slots become even more powerful when using **named slots**. Rather than a single `<slot>` element which renders _all_ children, named slots allow you to specify multiple places where children should be placed.
> **Note:** The `slot` attribute is not restricted to plain HTML, components can use `slot` as well!
@ -269,36 +271,6 @@ const items = ["Dog", "Cat", "Platipus"];
</ul>
```
### Slots
Sometimes, an Astro component will be passed children. This is especially common for components like sidebars or dialog boxes that represent generic "wrappers” around content.
```astro
<WrapChildrenWithText>
<img src="https://placehold.co/400" />
<WrapChildrenWithText>
```
Astro provides a `<slot />` component so that you can control where any children are rendered within the component. This is heavily inspired by the [`<slot>` HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).
```astro
---
// Example: components/WrapChildrenWithText.astro
// Usage: <WrapChildrenWithText><img src="https://placehold.co/400" /><WrapChildrenWithText>
// Renders: <h1>Begin</h1><img src="https://placehold.co/400" /><h1>End</h1>
---
<h1>Begin</h1>
<!-- slot: any given children are injected here -->
<slot />
<h1>End</h1>
```
<!-- TODO: https://github.com/snowpackjs/astro/issues/600
If you don't provide a `<slot />` component in your HTML template, any children passed to your component will not be rendered. -->
<!-- TODO: https://github.com/snowpackjs/astro/issues/360
Document Named Slots -->
## Comparing `.astro` versus `.jsx`
`.astro` files can end up looking very similar to `.jsx` files, but there are a few key differences. Here's a comparison between the two formats.