diff --git a/src/pages/en/core-concepts/astro-components.md b/src/pages/en/core-concepts/astro-components.md index 0a9d2dbfe7c41..fa73a7693c56f 100644 --- a/src/pages/en/core-concepts/astro-components.md +++ b/src/pages/en/core-concepts/astro-components.md @@ -154,9 +154,17 @@ const items = ["Dog", "Cat", "Platypus"]; #### Fragments & Multiple Elements -Remember: an Astro component template can render multiple elements with no need to wrap everything in a single `
` or `<>`. +An Astro component template can render multiple elements with no need to wrap everything in a single `
` or `<>`, unlike JavaScript or JSX. -However, when using an Astro JSX-like expression to dynamically create elements, you must wrap these multiple elements inside of a **Fragment** just like you would in JavaScript or JSX. Astro supports using either ` ` or `<> `. +```astro +--- +// Template with multiple elements +--- +

No need to wrap elements in a single containing element.

+

Astro supports multiple root elements in a template.

+``` + +However, when using an expression to dynamically create multiple elements, you should wrap these elements inside a **fragment** as you would in JavaScript or JSX. Astro supports using either ` ` or the shorthand `<> `. ```astro --- @@ -173,6 +181,14 @@ const items = ["Dog", "Cat", "Platypus"]; ``` +Fragments can also be useful to avoid wrapper elements when adding [`set:*` directives](/en/reference/directives-reference/#sethtml), as in the following example: + +```astro +--- +const htmlString = '

Raw HTML content

'; +--- + +``` ### Component Props