[SOLVED] Local Components breaks Build

Questions
1

Using a local component as shown below (example copied from docs), causes the build to fail,

<template>
  <ul>
    <!-- use tag names as variables -->
    <${ListItem} title="Item 1" />
    <${ListItem} title="Item 2" />
    <${ListItem} title="Item 3" />
  </ul>
</template>
<script>
  // create local component
  const ListItem = (props, { $h }) => {
    return () => $h`<li>${props.title}</li>`;
  }

  // export main component
  export default () => {
    return $render;
  }
</script>

[vite:build-html] Unable to parse HTML; parse5 error code invalid-first-character-of-tag-name
 at .../test.f7.html:24:10
22 |      <ul>
23 |          <!-- use tag names as variables -->
24 |          <${ListItem} title="Item 1" />
   |           ^
25 |          <${ListItem} title="Item 2" />
26 |          <${ListItem} title="Item 3" />
file: ../test.f7.html

Any help is appreciated,

2

I noticed that the IDE set the file extension to .f7.html, after changing it to .f7 the build was successful,