fix: dynamic base class import

routes/[...index].ts

@@ -88,6 +88,7 @@ async function insertRegistry(
 
 async function buildRegistry(usedCustomElements: string[], type: "js" | "ts") {
   let registryScript = `<script type='module'>`;
+  let baseClassImported = false;
 
   for (const name of usedCustomElements) {
     const content = await useStorage().getItem(
@@ -97,7 +98,6 @@ async function buildRegistry(usedCustomElements: string[], type: "js" | "ts") {
       `class WebComponent {}; class HTMLElement {}; (${content.toString()})`
     );
     const className = new evalStore().constructor.name;
-    let baseClassImported = false;
 
     if (
       !baseClassImported &&

src/pages/demo/index.html

@@ -20,7 +20,7 @@
     <main>
       <a href="/demo/about">{{ count }}</a>
       <div>
-        <hello-world name="{{name }}"></hello-world>
+        <my-hello-world name="{{name }}"></my-hello-world>
       </div>
       <p>some text: {{greeting}}</p>
       {{greeting}} hey<br />
@@ -28,7 +28,7 @@
     </main>
     <my-footer></my-footer>
     <script>
-      const helloWorld = document.querySelector("hello-world");
+      const helloWorld = document.querySelector("my-hello-world");
       setTimeout(() => {
         helloWorld.setAttribute("name", "Nitro");
       }, 2000);

src/pages/index.html

@@ -10,7 +10,7 @@
       </p>
       <p>
         Here's a sample interactive custom element:
-        <hello-world name="McFly"></hello-world>
+        <vanilla-hello-world name="McFly"></vanilla-hello-world>
       </p>
       <p>
         Start at the very basic of writing HTML files and enhance with standard