docs: improve single root element note about comments (#4245)

Co-authored-by: Daniel Roe <daniel@roe.dev>

docs/content/2.guide/3.directory-structure/10.pages.md

@@ -57,8 +57,38 @@ If you are using [app.vue](/guide/directory-structure/app), make sure to use the
 </template>
 ```
 
-::alert{type=warning}
+Pages **must have a single root element** to allow route transitions between pages. (HTML comments are considered elements as well.)
-Note that pages **must have a single root element** to allow route transitions between pages.
+
+This means that when the route is server rendered, or statically generated, you will be able to see its contents correctly, but when you navigate towards that route during client side navigation the transition between routes will fail and you'll see that the route will not be rendered.
+
+Here are some examples to illustrate what a page with a single root element looks like:
+
+::code-group
+
+```vue [pages/working.vue]
+<template>
+  <div>
+    <!-- This page correctly has only one single root element -->
+    Page content
+  </div>
+</template>
+```
+
+```vue [pages/bad-1.vue]
+<template>
+  <!-- This page will not render when route changes during client side navigation, because of this comment -->
+  <div>Page content</div>
+</template>
+```
+
+```vue [pages/bad-2.vue]
+<template>
+  <div>This page</div>
+  <div>Has more than one root element</div>
+  <div>And will not render when route changes during client side navigation</div>
+</template>
+```
+
 ::
 
 ## Dynamic Routes