refactor: migrate menu-group and menu-item HTML templates to separate JS files and update component initialization

Author: caperaven

components/menu/menu-group/menu-group.html

@@ -0,0 +1,4 @@
+export const HTML = `
+<link rel="stylesheet" href="__css__" />
+<slot></slot>
+`.replace("__css__", import.meta.url.replace(".html.js", ".css"));

components/menu/menu-group/menu-group.html.js

@@ -1,21 +1,17 @@
 import { ComponentModule } from "../../../src/modules/component.js";
+import { HTML } from "./menu-group.html.js";
 
 class MenuGroup extends HTMLElement {
     static name = Object.freeze("menu-group");
 
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
-        this.style.display = "none";
+        this.shadowRoot.innerHTML = HTML;
     }
 
     async connectedCallback() {
-        this.shadowRoot.innerHTML = await ComponentModule.load_html({
-            url: import.meta.url,
-        });
-
         await this.#addChevron();
-        this.style.display = "flex";
     }
 
     #addChevron() {

components/menu/menu-group/menu-group.js

@@ -2,6 +2,8 @@
     --menu-item-hover-bg: var(--selected-background-color);
     --menu-item-hover-fg: var(--selected-color);
 
+    display: flex;
+    flex-direction: row;
     padding: var(--padding);
     cursor: pointer;
     width: fit-content;

components/menu/menu-item/menu-item.css

@@ -0,0 +1,6 @@
+export const HTML = ` 
+<link rel="stylesheet" href="__css__" />
+<slot name="prefix"></slot>
+<slot></slot>
+<slot name="suffix"></slot>
+`.replace("__css__", import.meta.url.replace(".html.js", ".css"));

components/menu/menu-item/menu-item.html

@@ -1,20 +1,12 @@
-import { ComponentModule } from "../../../src/modules/component.js";
+import { HTML } from "./menu-item.html.js";
 
 class MenuItem extends HTMLElement {
     static name = Object.freeze("menu-item");
 
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
-        this.style.display = "none";
-    }
-
-    async connectedCallback() {
-        this.shadowRoot.innerHTML = await ComponentModule.load_html({
-            url: import.meta.url,
-        });
-
-        this.style.display = "flex";
+        this.shadowRoot.innerHTML = HTML;
     }
 }