use data-... attributes for custom attributes

src/backend/components/boardgame.tsx

@@ -52,7 +52,7 @@ export const getBoardgameHtml = (key: string, gameState: BoardgameStateType, gam
     .map(([name]) => name);
 
   return (
-    <board-game track={key} className={gameActiveClassNames.join(" ")} game-variant={gameVariant}>
+    <board-game data-track={key} className={gameActiveClassNames.join(" ")} game-variant={gameVariant}>
       <progressive-form-wrapper>
         <form method="post" is="progressive-form">
           <p class="when-outcome-undecided">

src/backend/components/counter.tsx

@@ -6,15 +6,15 @@ export const getCounterHtml = (req: Request, key: string) => {
   return (
     <>
       <form method="post" is="progressive-form">
-        <button type="submit" name={key} value={`${counter - 1}`} is="reactive-button" track={key} delta="-1">
+        <button type="submit" name={key} value={`${counter - 1}`} is="reactive-button" data-track={key} data-delta="-1">
           -
         </button>{" "}
-        <button type="submit" name={key} value={`${counter + 1}`} is="reactive-button" track={key} delta="+1">
+        <button type="submit" name={key} value={`${counter + 1}`} is="reactive-button" data-track={key} data-delta="+1">
           +
         </button>
       </form>{" "}
       Value of "{key}":{" "}
-      <span class="counter" is="reactive-span" track={key}>
+      <span class="counter" is="reactive-span" data-track={key}>
         {counter}
       </span>
     </>

src/frontend/components/reactive-button.ts

@@ -4,7 +4,7 @@ class ReactiveButton extends HTMLButtonElement {
   private readonly trackingTools = new TrackingTools(this);
 
   handleTrackedValueUpdate(newValue: string | null) {
-    const delta = parseInt(this.getAttribute("delta") ?? "0", 10);
+    const delta = parseInt(this.getAttribute("data-delta") ?? "0", 10);
     this.value = (parseInt(newValue ?? "0", 10) + delta).toString();
   }
 

src/frontend/utils/query-tracking-utils.ts

@@ -27,7 +27,7 @@ export class TrackingTools<
   constructor(private readonly element: TElement) {}
 
   private setTrackerIfNeeded() {
-    const trackKey = this.element.getAttribute("track");
+    const trackKey = this.element.getAttribute("data-track");
     if (trackKey != this.currentTrackKey) {
       if (this.clearTracker) {
         this.clearTracker();

src/jsx-augmentations.ts

@@ -1,13 +1,6 @@
 declare module "preact/jsx-runtime" {
   // eslint-disable-next-line @typescript-eslint/no-namespace -- preact uses namespaces, so we have too
   namespace JSX {
-    // eslint-disable-next-line @typescript-eslint/consistent-type-definitions -- this is how declaration merging is done
-    interface HTMLAttributes {
-      // custom attribute used by query-tracker web components
-      delta?: string;
-      track?: string;
-    }
-
     // eslint-disable-next-line @typescript-eslint/consistent-type-definitions -- this is how declaration merging is done
     interface IntrinsicElements {
       "board-game": HTMLAttributes;