diff options
author | 2021-07-22 15:02:29 +0100 | |
---|---|---|
committer | 2021-07-22 07:02:29 -0700 | |
commit | 6d37b7f80edbd67364486720525f7645119fb07f (patch) | |
tree | 6800b915b025e08b520d4261265de6ba6d22c058 | |
parent | 9af0d85e9e9a4cfb3fc9c92822f67655e9f00628 (diff) | |
download | astro-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.md | 32 |
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. |