Extend Foundry's MultiSelectElement so that I can provide a label to it

module/Apps/elements/CustomMultiSelect.mjs

@@ -0,0 +1,21 @@
+const { HTMLMultiSelectElement } = foundry.applications.elements;
+
+export class CustomMultiSelect extends HTMLMultiSelectElement {
+	static tagName = `stats-tracker-multi-select`;
+
+	get placeholder() {
+		return this.getAttribute(`placeholder`);
+	};
+
+	_buildElements() {
+		const [ tags, select ] = super._buildElements();
+
+		const label = document.createElement(`div`);
+		label.ariaHidden = true;
+		label.innerHTML = game.i18n.localize(this.placeholder);
+
+		select.ariaLabel = game.i18n.localize(this.placeholder);
+
+		return [ label, tags, select ];
+	};
+};

module/Apps/elements/_index.mjs

@@ -0,0 +1,19 @@
+import { CustomMultiSelect } from "./CustomMultiSelect.mjs";
+import { Logger } from "../../utils/Logger.mjs";
+
+const components = [
+	CustomMultiSelect,
+];
+
+export function registerCustomComponents() {
+	(CONFIG.CACHE ??= {}).componentListeners ??= [];
+	for (const component of components) {
+		if (!window.customElements.get(component.tagName)) {
+			Logger.debug(`Registering component "${component.tagName}"`);
+			window.customElements.define(
+				component.tagName,
+				component,
+			);
+		};
+	}
+};

module/hooks/init.mjs

@@ -1,6 +1,7 @@
 import helpers from "../handlebarsHelpers/_index.mjs";
 import { Logger } from "../utils/Logger.mjs";
 import { MemoryDatabase } from "../utils/databases/Memory.mjs";
+import { registerCustomComponents } from "../Apps/elements/_index.mjs";
 import { registerMetaSettings } from "../settings/meta.mjs";
 import { UserFlagDatabase } from "../utils/databases/UserFlag.mjs";
 
@@ -16,4 +17,5 @@ Hooks.on(`init`, () => {
 	}
 
 	Handlebars.registerHelper(helpers);
+	registerCustomComponents();
 });

public/styles/elements/custom-multi-select.css

@@ -0,0 +1,9 @@
+stats-tracker-multi-select {
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr);
+	gap: 2px;
+
+	select {
+		grid-column: 1 / -1;
+	}
+}

public/styles/main.css

@@ -1,3 +1,5 @@
 @layer resets, elements, components, apps, exceptions;
 
+@import url("./elements/custom-multi-select.css") layer(elements);
+
 @import url("./Apps/StatsViewer.css") layer(apps);