my-counter.html html

<my-counter count="42">
	<p>
		Count: <span class="count"></span><br>
		Parity: <span class="parity"></span>
	</p>
	<button type="button" class="decrement">−</button>
	<button type="button" class="increment">+</button>
</my-counter>

my-counter.css css

my-counter {
	display: flex;
	gap: 0.5rem;
	margin-block: 1rem;

	p {
		display: inline-block;
		margin: 0;
		flex: 1;
	}

	span {
		margin-right: 0.5rem;
	}

	button {
		padding: 0.25rem 0.5rem;
		flex: 0;
	}
}

my-counter.ts ts

import {
	type Component,
	asInteger,
	component,
	first,
	on,
	setText,
} from "../../../";

export type MyCounterProps = {
	count: number;
};

export default component(
	"my-counter",
	{
		count: asInteger(),
	},
	(el) => [
		first(".count", setText("count")),
		first(
			".parity",
			setText(() => (el.count % 2 ? "odd" : "even")),
		),
		first(
			".increment",
			on("click", () => {
				el.count++;
			}),
		),
		first(
			".decrement",
			on("click", () => {
				el.count--;
			}),
		),
	],
);

declare global {
	interface HTMLElementTagNameMap {
		"my-counter": Component<MyCounterProps>;
	}
}