Update "Fragments & Multiple Elements" examples

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 `<div>` or `<>`.
+An Astro component template can render multiple elements with no need to wrap everything in a single `<div>` 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 `<Fragment> </Fragment>` or `<> </>`.
+```astro
+---
+// Template with multiple elements
+---
+<p>No need to wrap elements in a single containing element.</p>
+<p>Astro supports multiple root elements in a template.</p>
+```
+
+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 `<Fragment> </Fragment>` or the shorthand `<> </>`.
 
 ```astro
 ---
@@ -173,6 +181,14 @@ const items = ["Dog", "Cat", "Platypus"];
 </ul>
 ```
 
+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 = '<p>Raw HTML content</p>';
+---
+<Fragment set:html={htmlString} />
+```
 
 ### Component Props