add more callouts for the custom element naming reqs

app/docs/md/index.md

@@ -66,7 +66,7 @@ Your project should now look like this:
 
 ```
 app
-├── elements .......... custom element pure functions
+├── elements .......... HTML custom element pure functions
 └── pages ............. file-based routing
     ├── about.html
     └── index.html
@@ -75,7 +75,7 @@ app
 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.
+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:
 

app/docs/md/learn/concepts/html/elements.md

@@ -10,7 +10,7 @@ Enhance single-file components are designed to be used without needing to import
 
 ## Naming convention
 
-Per the [spec](https://html.spec.whatwg.org/multipage/custom-elements.html#prod-potentialcustomelementname), custom element tag names are two or more words separated by a dash.
+Per the [spec](https://html.spec.whatwg.org/multipage/custom-elements.html#prod-potentialcustomelementname), custom element tag names have two or more words separated by a dash ([MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Web_Components/Using_custom_elements)). So your elements need to look like `<foo-bar>`. `<foo>` won't work.
 In your Enhance project the names of the files in your project's `app/elements` file correspond to the tag name of your custom element. Meaning `my-header.mjs` will be authored as `<my-header></my-header>` in your HTML page.
 
 ## Expansion

app/docs/md/learn/starter-project/elements.md

@@ -6,7 +6,7 @@ Elements are the reusable building blocks of your Enhance application. They are
 
 ## Naming
 
-The file name of your element will be the tag name you author with. Meaning `app/elements/my-message.mjs` will be authored as `<my-message></my-message>` in your HTML page.
+The file name of your element will be the tag name you author with. Meaning `app/elements/my-message.mjs` will be authored as `<my-message></my-message>` in your HTML page. Enhance elements are HTML custom elements, so they [require two or more words separated by a dash](/docs/learn/concepts/html/elements).
 
 ```
 app/elements/my-message → <my-message></my-message>