HTML components.
Zero runtime.

<!-- src/pages/index.html -->
<!DOCTYPE html>
<html lang="en">
  <body>
    <demo-counter data-bascik-prop-label="Instance A" />
    <demo-counter data-bascik-prop-label="Instance B" />
  </body>
</html>

<!-- src/components/demo-counter/demo-counter.html -->
<div class="ctr">
  <span class="ctr-label" data-bascik-prop-label> Counter </span>
  <output class="ctr-count" id="count" aria-live="polite">0</output>
  <div class="ctr-btns">
    <button class="ctr-dec" id="dec" type="button" aria-label="Decrease">
      −
    </button>
    <button class="ctr-inc" id="inc" type="button" aria-label="Increase">
      +
    </button>
  </div>
</div>
<script src="demo-counter.ts"></script>

/* src/components/demo-counter/demo-counter.css */
.ctr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.ctr-count {
  font-size: 2.4rem;
  font-weight: 700;
  color: #d3ff8d;
}
.ctr-dec,
.ctr-inc {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  cursor: pointer;
}

// src/components/demo-counter/demo-counter.ts
const count = document.getElementById("count") as HTMLElement;
const dec = document.getElementById("dec") as HTMLButtonElement;
const inc = document.getElementById("inc") as HTMLButtonElement;
let n: number = 0;

dec.addEventListener("click", () => {
  n--;
  count.textContent = String(n);
});
inc.addEventListener("click", () => {
  n++;
  count.textContent = String(n);
});

<!-- dist/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .bascik__demo-counter__ctr {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
      }
      .bascik__demo-counter__ctr-count {
        font-size: 2.4rem;
        font-weight: 700;
        color: #d3ff8d;
      }
      .bascik__demo-counter__ctr-dec,
      .bascik__demo-counter__ctr-inc {
        width: 40px;
        height: 40px;
        border-radius: 6px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="bascik__demo-counter__ctr">
      <span class="ctr-label">Instance A</span>
      <output
        class="bascik__demo-counter__ctr-count"
        id="bascik__demo-counter__aefe6402__count"
        aria-live="polite"
        >0</output
      >
      <div class="ctr-btns">
        <button
          class="bascik__demo-counter__ctr-dec"
          id="bascik__demo-counter__aefe6402__dec"
          type="button"
          aria-label="Decrease"
        >
          −
        </button>
        <button
          class="bascik__demo-counter__ctr-inc"
          id="bascik__demo-counter__aefe6402__inc"
          type="button"
          aria-label="Increase"
        >
          +
        </button>
      </div>
    </div>
    <div class="bascik__demo-counter__ctr">
      <span class="ctr-label">Instance B</span>
      <output
        class="bascik__demo-counter__ctr-count"
        id="bascik__demo-counter__eea6e425__count"
        aria-live="polite"
        >0</output
      >
      <div class="ctr-btns">
        <button
          class="bascik__demo-counter__ctr-dec"
          id="bascik__demo-counter__eea6e425__dec"
          type="button"
          aria-label="Decrease"
        >
          −
        </button>
        <button
          class="bascik__demo-counter__ctr-inc"
          id="bascik__demo-counter__eea6e425__inc"
          type="button"
          aria-label="Increase"
        >
          +
        </button>
      </div>
    </div>
    <script>
      (function () {
        const count = document.getElementById(
          "bascik__demo-counter__aefe6402__count",
        );
        const dec = document.getElementById(
          "bascik__demo-counter__aefe6402__dec",
        );
        const inc = document.getElementById(
          "bascik__demo-counter__aefe6402__inc",
        );
        let n = 0;
        dec.addEventListener("click", () => {
          n--;
          count.textContent = String(n);
        });
        inc.addEventListener("click", () => {
          n++;
          count.textContent = String(n);
        });
      })();
      //# sourceURL=src/components/demo-counter/demo-counter.ts
    </script>
    <script>
      (function () {
        const count = document.getElementById(
          "bascik__demo-counter__eea6e425__count",
        );
        const dec = document.getElementById(
          "bascik__demo-counter__eea6e425__dec",
        );
        const inc = document.getElementById(
          "bascik__demo-counter__eea6e425__inc",
        );
        let n = 0;
        dec.addEventListener("click", () => {
          n--;
          count.textContent = String(n);
        });
        inc.addEventListener("click", () => {
          n++;
          count.textContent = String(n);
        });
      })();
      //# sourceURL=src/components/demo-counter/demo-counter.ts?instance=2
    </script>
  </body>
</html>