function template(values) {
	return xtpl`
		<div id="${values.id}" class="${values.class1} ${values.class2} z" >
			***${values.a}++${values.b}##
		</div>
		<div data-${values.foo}-${values.bar}="${values.value}" ${values.options}>
			***${values.c}++${values.d}##
		</div>
		<div .prop="${values.data}" onclick="${values.listener}">
			${{static: "click me"}}
		</div>
	`
}

render(
	document.body,
	template({
		id: "id",
		class1: "x",
		class2: "y",
		foo: "foo",
		bar: "bar",
		value: "va",
		options: {
			name: "b",
		},
		a: "100",
		b: "200",
		c: "300",
		d: "400",
		data: [1, 2, 3],
		listener() {
			console.log("old", this.prop)
		},
	})
)

render(
	document.body,
	template({
		id: "qqq",
		class1: "zzzz",
		class2: "vvvv",
		foo: "iop",
		bar: "bnm",
		value: "98",
		options: {
			new: "value",
		},
		a: "900",
		b: "800",
		c: "700",
		d: "600",
		data: [10, 20],
		listener() {
			console.log("new", this.prop)
		},
	})
)