Get the incrementer being able to be submitted, causing submits, and styling without flickering

module/components/incrementer.mjs

@@ -4,27 +4,42 @@ Attributes:
 @property {number} stepSize
 @property {number} largeStepSize
 */
-class DotDungeonIncrementer extends HTMLElement {
+export class DotDungeonIncrementer extends HTMLElement {
+	static elementName = `dd-incrementer`;
+
+	static styles = ``;
 
 	#input;
+	#publicInput;
+	#sr;
 
 	constructor() {
 		super();
 
+		const value = this.getAttribute(`value`);
+
+		/*
+		This input exists for the sole purpose of making it so that the form data
+		works with this input without needing to do jank work arounds (even though
+		this on it's own is already a sort of jank work around).
+		*/
+		const hiddenInput = document.createElement(`input`);
+		hiddenInput.type = `hidden`;
+		hiddenInput.name = this.getAttribute(`name`);
+		hiddenInput.value = value;
+		this.#publicInput = hiddenInput;
+		this.appendChild(hiddenInput);
+
 		const sr = this.attachShadow({ mode: `open` });
+		this.#sr = sr;
 		const container = document.createElement(`div`);
-
-		const style = document.createElement(`link`);
-		style.href = `./systems/dotdungeon/.styles/components/incrementer.css`;
-		style.rel = `stylesheet`;
-		container.appendChild(style);
-
+		if (DotDungeonIncrementer.styles) this.#embedStyles();
 
 		const input = document.createElement(`input`);
 		this.#input = input;
 		input.type = `number`;
-		input.value = this.getAttribute(`value`);
 		input.addEventListener(`change`, this.#updateValue.bind(this));
+		input.value = value;
 
 		const increment = document.createElement(`button`);
 		increment.innerHTML = `+`;
@@ -46,26 +61,46 @@ class DotDungeonIncrementer extends HTMLElement {
 		sr.appendChild(container);
 	};
 
+	connectedCallback() {
+		if (!DotDungeonIncrementer.styles) {
+			fetch(`./systems/dotdungeon/.styles/components/incrementer.css`)
+			.then(r => r.text())
+			.then(t => {
+				DotDungeonIncrementer.styles = t;
+				this.#embedStyles();
+			});
+		};
+	};
+
+	#embedStyles() {
+		const style = document.createElement(`style`);
+		style.innerHTML = DotDungeonIncrementer.styles;
+		this.#sr.appendChild(style);
+	};
+
 	#updateValue() {
-		// TODO: Emit a change event for the new value, and check for cancellation
-		const event = new Event(`change`);
-		this.dispatchEvent(event);
+		this.#publicInput.value = this.#input.value;
+		const event = new Event(`change`, { bubbles: true });
+		this.#publicInput.dispatchEvent(event);
 	};
 
 	#increment() {
-		console.log(`increment event`)
+		console.log(`increment event`);
 		this.#input.value++;
 		this.#updateValue();
 	};
 
 	#decrement() {
-		console.log(`decrement event`)
+		console.log(`decrement event`);
 		this.#input.value--;
 		this.#updateValue();
 	};
 };
 
 
-if (!window.customElements.get(`dd-incrementer`)) {
-	window.customElements.define(`dd-incrementer`, DotDungeonIncrementer);
+if (!window.customElements.get(DotDungeonIncrementer.elementName)) {
+	window.customElements.define(
+		DotDungeonIncrementer.elementName,
+		DotDungeonIncrementer
+	);
 };

module/components/index.mjs

@@ -1 +1 @@
-import "./incrementer.mjs";
+import "./incrementer.mjs";

styles/components/incrementer.scss

@@ -4,6 +4,7 @@ the corresponding web component. Importing this into other files is forbidden.
 */
 
 $default-border-radius: 4px;
+$default-height: 1.25rem;
 
 :host {
 	min-width: max-content;
@@ -11,10 +12,10 @@ $default-border-radius: 4px;
 
 div {
 	display: grid;
-	grid-template-columns: auto 50px auto;
+	grid-template-columns: var(--height, $default-height) 50px var(--height, $default-height);
 	// I dunno why this is needed for the height to not be calculated as 17px,
 	// but it is for some arcane reason
-	grid-template-rows: 1fr;
+	grid-template-rows: var(--height, $default-height);
 }
 
 input {
@@ -23,7 +24,6 @@ input {
 	font-family: inherit;
 	text-align: center;
 	padding: 0;
-	background: green;
 
 	&::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
 		-webkit-appearance: none;
@@ -36,11 +36,11 @@ input {
 button {
 	border: none;
 	outline: none;
-	height: 100%;
 	aspect-ratio: 1 / 1;
-	padding: 4px;
-	background: darkgreen;
-	max-width: 100%;
+	padding: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 
 	&:hover {
 		cursor: pointer;