From cd1818fa54b67b0dd03a796703e3b30e303f3969 Mon Sep 17 00:00:00 2001
From: Taylor Beseda <tbeseda@gmail.com>
Date: Wed, 27 Mar 2024 17:04:08 -0600
Subject: [PATCH] Update index.md

---
 app/docs/md/index.md | 49 +++++++++++++++++++++++---------------------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/app/docs/md/index.md b/app/docs/md/index.md
index 17d27b5d..389debc7 100644
--- a/app/docs/md/index.md
+++ b/app/docs/md/index.md
@@ -70,27 +70,30 @@ app
     └── index.html
 ```
 
-Add a [pure function](https://en.wikipedia.org/wiki/Pure_function) that returns an HTML string.
-Your function will be passed an object containing an `html` render function for expanding custom elements.
-
-Add a `my-header.mjs` file in the `app/elements/` folder. Notice that we're using a two-word-or-more name for our custom element.
-
-The contents of `my-header.mjs` should look like this:
-
-<doc-code filename="app/elements/my-header.mjs" >
-
-```javascript
-export default function MyHeader({ html }) {
-  return html`
-    <header>
-      <h1>Header</h1>
-      <nav>
-        <a href=/>home</a>
-        <a href=/about>about</a>
-      </nav>
-    </header>
-  `
-}
+Start with simple `.html` files for your app's custom elements.
+Your custom elements will be automatically expanded when their tags are used in your pages.
+
+<doc-callout level="info">
+
+Beginning with simple HTML elements helps get an app off the ground and gives a great baseline for enhancement.  
+Converting to dynamic `.mjs` is an easy upgrade when needed! [Further docs](/docs/conventions/elements) cover that in more detail.
+
+</doc-callout>
+
+Create a `my-header.html` file in the `app/elements/` folder. Notice that we're using a two-word-or-more name for our custom element.
+
+The contents of `my-header.html` should look like this:
+
+<doc-code filename="app/elements/my-header.html" >
+
+```html
+<header>
+  <h1>Header</h1>
+  <nav>
+    <a href=/>home</a>
+    <a href="/about">about</a>
+  </nav>
+</header>
 ```
 
 </doc-code>
@@ -99,8 +102,8 @@ Your project should now look like this:
 
 ```
 app
-├── elements .......... custom element pure functions
-│   └── my-header.mjs
+├── elements .......... custom elements
+│   └── my-header.html
 └── pages ............. file-based routing
     ├── about.html
     └── index.html