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

docs: remove duplicate section describing slots (#820)

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
Show stats Download patch file Download diff file Expand all files Collapse all files

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.