Improve reliability of the version selector

src/components/VersionDropdown.astro

@@ -3,8 +3,7 @@ import { Icon } from 'astro-icon/components'
 import { loaderList, versionList} from '../js/modversion.js'
 ---
 
-<div id="version-dropdown">
-  <div class="">
+<version-dropdown>
   <div class="wrapper">
     <label for="loader-selector" class="sr-only">Select the Modloader</label>
     <select
@@ -28,11 +27,13 @@ import { loaderList, versionList} from '../js/modversion.js'
       <Icon name="ion:copy-outline"></Icon>
     </select>
   </div>
-  </div>
-</div>
+</version-dropdown>
 
 <script>
 import { getResultingVersion, setGameVersion, setLoaderVersion } from "../js/modversion";
+// Define the behaviour for our new type of HTML element.
+class VersionDropdown extends HTMLElement {
+  connectedCallback() {
     // Get the gradle.properties code block
     const versionLabel = document.getElementById("midnightlib-version");
     // Get the 2 selectors defined above
@@ -55,7 +56,10 @@ import { getResultingVersion, setGameVersion, setLoaderVersion } from "../js/mod
       setGameVersion(value);
       if (versionLabel) versionLabel.innerText = `midnightlib_version = `+getResultingVersion();
     });
-
+  }
+}
+// Tell the browser to use our VersionDropdown class for <version-dropdown> elements.
+customElements.define('version-dropdown', VersionDropdown);
 </script>
 
 <style lang="scss" is:global>