diff options
| author |  FredKSchott <FredKSchott@users.noreply.github.com>
| 2021-07-14 17:43:06 +0000 |
|---|---|---|
| committer |  GitHub Actions <actions@github.com>
| 2021-07-14 17:43:06 +0000 |
| commit | 1583ef173ae36eb9f325c2d163df17ea49e244a9 (patch) | |
| tree | b97a58f9e0004ffb208c4cf5db31d0c4215f9418 /docs/core-concepts/astro-components.md | |
| parent | d40edb0b673f380c9eb9c07add3e0cd2371d9623 (diff) | |
| download | astro-1583ef173ae36eb9f325c2d163df17ea49e244a9.tar.gz astro-1583ef173ae36eb9f325c2d163df17ea49e244a9.tar.zst astro-1583ef173ae36eb9f325c2d163df17ea49e244a9.zip | |
[ci] yarn format
Diffstat (limited to 'docs/core-concepts/astro-components.md')
| -rw-r--r-- | docs/core-concepts/astro-components.md | 23 |
1 files changed, 11 insertions, 12 deletions
diff --git a/docs/core-concepts/astro-components.md b/docs/core-concepts/astro-components.md index 701a27466..6b33a2cf4 100644 --- a/docs/core-concepts/astro-components.md +++ b/docs/core-concepts/astro-components.md @@ -36,7 +36,6 @@ CSS rules inside of a `<style>` tag are automatically scoped to that component. For best results, you should only have one `<style>` tag per-Astro component. This isn’t necessarily a limitation, but it will often result in better-optimized CSS in your final build. When you're working with pages, the `<style>` tag can go nested inside of your page `<head>`. For standalone components, the `<style>` tag can go at the top-level of your template. - ```html <!-- Astro Component CSS example --> <style> @@ -53,9 +52,13 @@ For best results, you should only have one `<style>` tag per-Astro component. Th <!-- Astro Page CSS example --> <html> <head> - <style>...</style> + <style> + ... + </style> </head> - <body>...</body> + <body> + ... + </body> </html> ``` @@ -102,7 +105,7 @@ import SomeComponent from './SomeComponent.astro'; </div> ``` -📚 You can also import and use components from other frontend frameworks like React, Svelte, and Vue. Read our guide on [Component Hydration](/core-concepts/component-hydration) to learn more. +📚 You can also import and use components from other frontend frameworks like React, Svelte, and Vue. Read our guide on [Component Hydration](/core-concepts/component-hydration) to learn more. ### Dynamic JSX Expressions @@ -120,6 +123,7 @@ const name = "Your name here"; <h1>Hello {name}!</h1> </div> ``` + #### Dynamic Attributes ```astro @@ -145,7 +149,6 @@ const items = ["Dog", "Cat", "Platipus"]; </ul> ``` - ### Component Props An Astro component can define and accept props. Props are available on the `Astro.props` global in your frontmatter script. @@ -201,7 +204,7 @@ Slots become even more powerful when using **named slots**. Rather than a single <div id="my-component"> <header> <!-- children with the `slot="header"` attribute will go here --> - <slot name="header" /> + <slot name="header" /> </header> <main> <!-- children without a `slot` (or with the `slot="default"`) attribute will go here --> @@ -209,7 +212,7 @@ Slots become even more powerful when using **named slots**. Rather than a single </main> <footer> <!-- children with the `slot="footer"` attribute will go here --> - <slot name="footer"> + <slot name="footer"> </footer> </div> @@ -285,7 +288,7 @@ Astro provides a `<slot />` component so that you can control where any children --- <h1>Begin</h1> <!-- slot: any given children are injected here --> -<slot /> +<slot /> <h1>End</h1> ``` @@ -294,7 +297,6 @@ Astro provides a `<slot />` component so that you can control where any children <!-- TODO: https://github.com/snowpackjs/astro/issues/360 Document Named Slots --> - ## Comparing `.astro` versus `.jsx` @@ -351,7 +353,4 @@ import thumbnailSrc from './thumbnail.png'; If you’d prefer to organize assets alongside Astro components, you may import the file in JavaScript inside the component script. This works as intended but this makes `thumbnail.png` harder to reference in other parts of your app, as its final URL isn’t easily-predictable (unlike assets in `public/*`, where the final URL is guaranteed to never change). - [code-ext]: https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode - - |