summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar João Paquim <jpaquim@users.noreply.github.com> 2021-07-22 15:02:29 +0100
committerGravatar GitHub <noreply@github.com> 2021-07-22 07:02:29 -0700
commit6d37b7f80edbd67364486720525f7645119fb07f (patch)
tree6800b915b025e08b520d4261265de6ba6d22c058
parent9af0d85e9e9a4cfb3fc9c92822f67655e9f00628 (diff)
downloadastro-6d37b7f80edbd67364486720525f7645119fb07f.tar.gz
astro-6d37b7f80edbd67364486720525f7645119fb07f.tar.zst
astro-6d37b7f80edbd67364486720525f7645119fb07f.zip
docs: remove duplicate section describing slots (#820)
With the recently added documentation describing named slots, the previous Slots section was redundant, and was consolidated into the same section.
-rw-r--r--docs/src/pages/core-concepts/astro-components.md32
1 files changed, 2 insertions, 30 deletions
diff --git a/docs/src/pages/core-concepts/astro-components.md b/docs/src/pages/core-concepts/astro-components.md
index 59c2de33f..5c20169da 100644
--- a/docs/src/pages/core-concepts/astro-components.md
+++ b/docs/src/pages/core-concepts/astro-components.md
@@ -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.