hello-world.html html

<hello-world>
	<label>Your name<br>
		<input type="text">
	</label>
	<p>Hello, <span>World</span>!</p>
</hello-world>

hello-world.ts ts

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

export type HelloWorldProps = {
	name: string;
};

export default component(
	"hello-world",
	{
		name: RESET,
	},
	(el) => [
		first("span", setText("name")),
		first(
			"input",
			on("input", (e: Event) => {
				el.name = (e.target as HTMLInputElement)?.value || RESET;
			}),
		),
	],
);

declare global {
	interface HTMLElementTagNameMap {
		"hello-world": Component<HelloWorldProps>;
	}
}