From 4c2edcf58ce93a046f35381b14384b2995a589b3 Mon Sep 17 00:00:00 2001
From: Jan Andrle <andrle.jan@centrum.cz>
Date: Wed, 11 Dec 2024 16:21:17 +0100
Subject: [PATCH] :bug: :zap: Updated types and removed `empty`

---
 dist/dde-with-signals.js                    | 181 ++++++++++----------
 dist/dde.js                                 | 107 ++++++------
 dist/esm-with-signals.d.ts                  | 119 ++++++++-----
 dist/esm-with-signals.js                    | 181 ++++++++++----------
 dist/esm.d.ts                               | 119 ++++++++-----
 dist/esm.js                                 | 107 ++++++------
 docs/components/examples/scopes/cleaning.js |   4 +-
 index.d.ts                                  |  34 ++--
 src/dom.js                                  |  29 ++--
 9 files changed, 486 insertions(+), 395 deletions(-)

diff --git a/dist/dde-with-signals.js b/dist/dde-with-signals.js
index 798dde3..38fde21 100644
--- a/dist/dde-with-signals.js
+++ b/dist/dde-with-signals.js
@@ -70,7 +70,7 @@ var A = [{
 	},
 	host: (t) => t ? t(d.D.body) : d.D.body,
 	prevent: !0
-}], m = {
+}], x = {
 	get current() {
 		return A[A.length - 1];
 	},
@@ -106,15 +106,17 @@ function P(t, e, ...n) {
 	let r = W(this), o = 0, c, i;
 	switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {
 		case typeof t == "function": {
-			o = 1, m.push({ scope: t, host: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((h) => h(i)), void 0) : i }), c = t(e || void 0);
-			let a = c instanceof d.F;
+			o = 1;
+			let a = (...p) => p.length ? (o === 1 ? n.unshift(...p) : p.forEach((m) => m(i)), void 0) : i;
+			x.push({ scope: t, host: a }), c = t(e || void 0);
+			let h = c instanceof d.F;
 			if (c.nodeName === "#comment") break;
-			let l = P.mark({
+			let v = P.mark({
 				type: "component",
 				name: t.name,
-				host: a ? "this" : "parentElement"
+				host: h ? "this" : "parentElement"
 			});
-			c.prepend(l), a && (i = l);
+			c.prepend(v), h && (i = v);
 			break;
 		}
 		case t === "#text":
@@ -129,23 +131,28 @@ function P(t, e, ...n) {
 		case !c:
 			c = j.call(this, d.D.createElement(t), e);
 	}
-	return ht(c), i || (i = c), n.forEach((a) => a(i)), o && m.pop(), o = 2, c;
+	return ht(c), i || (i = c), n.forEach((a) => a(i)), o && x.pop(), o = 2, c;
 }
+P.mark = function(t, e = !1) {
+	t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
+	let n = e ? "" : "/", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);
+	return e && (r.end = d.D.createComment("</dde:mark>")), r;
+};
 function Wt(t, e, n) {
 	typeof e != "object" && (n = e, e = t);
 	let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((i, a) => Reflect.set(i, a.name || r, a) && i, {}), c = T(o, r);
 	if (t.append = new Proxy(t.append, {
-		apply(i, a, l) {
-			if (l[0] === e) return i.apply(t, l);
-			if (!l.length) return t;
+		apply(i, a, h) {
+			if (h[0] === e) return i.apply(t, h);
+			if (!h.length) return t;
 			let v = d.D.createDocumentFragment();
-			for (let h of l) {
-				if (!h || !h.slot) {
-					c && v.append(h);
+			for (let p of h) {
+				if (!p || !p.slot) {
+					c && v.append(p);
 					continue;
 				}
-				let x = h.slot, w = o[x];
-				vt(h, "remove", "slot"), w && (bt(w, h, n), Reflect.deleteProperty(o, x));
+				let m = p.slot, y = o[m];
+				vt(p, "remove", "slot"), y && (bt(y, p, n), Reflect.deleteProperty(o, m));
 			}
 			return c && (o[r].replaceWith(v), Reflect.deleteProperty(o, r)), t.append = i, t;
 		}
@@ -158,16 +165,14 @@ function Wt(t, e, n) {
 function bt(t, e, n) {
 	n && n(t, e);
 	try {
-		t.replaceWith(j(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));
+		t.replaceWith(j(e, {
+			className: [e.className, t.className],
+			dataset: { ...t.dataset }
+		}));
 	} catch {
 		t.replaceWith(e);
 	}
 }
-P.mark = function(t, e = !1) {
-	t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
-	let n = e ? "" : "/", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);
-	return e && (r.end = d.D.createComment("</dde:mark>")), r;
-};
 function qt(t) {
 	let e = this;
 	return function(...r) {
@@ -190,7 +195,7 @@ function nt(t, e, n) {
 		t,
 		e,
 		n,
-		(a, l) => nt.call(c, t, a, l)
+		(a, h) => nt.call(c, t, a, h)
 	);
 	let [i] = e;
 	if (i === "=") return r(e.slice(1), n);
@@ -208,7 +213,7 @@ function nt(t, e, n) {
 		case "dataset":
 			return I(o, n, et.bind(null, t[e]));
 		case "ariaset":
-			return I(o, n, (a, l) => r("aria-" + a, l));
+			return I(o, n, (a, h) => r("aria-" + a, h));
 		case "classList":
 			return gt.call(c, t, n);
 	}
@@ -227,9 +232,6 @@ function gt(t, e) {
 		(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)
 	), t;
 }
-function Ft(t) {
-	return Array.from(t.children).forEach((e) => e.remove()), t;
-}
 function vt(t, e, n, r) {
 	return t instanceof d.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r);
 }
@@ -264,21 +266,21 @@ function et(t, e, n) {
 }
 
 // src/events-observer.js
-var D = d.M ? yt() : new Proxy({}, {
+var D = d.M ? wt() : new Proxy({}, {
 	get() {
 		return () => {
 		};
 	}
 });
-function yt() {
+function wt() {
 	let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) {
 		for (let f of u)
 			if (f.type === "childList") {
-				if (h(f.addedNodes, !0)) {
+				if (p(f.addedNodes, !0)) {
 					s();
 					continue;
 				}
-				x(f.removedNodes, !0) && s();
+				m(f.removedNodes, !0) && s();
 			}
 	}, r = new d.M(n(a));
 	return {
@@ -327,35 +329,35 @@ function yt() {
 	function a() {
 		!e || t.size || (e = !1, r.disconnect());
 	}
-	function l() {
+	function h() {
 		return new Promise(function(s) {
 			(requestIdleCallback || requestAnimationFrame)(s);
 		});
 	}
 	async function v(s) {
-		t.size > 30 && await l();
+		t.size > 30 && await h();
 		let u = [];
 		if (!(s instanceof Node)) return u;
 		for (let f of t.keys())
 			f === s || !(f instanceof Node) || s.contains(f) && u.push(f);
 		return u;
 	}
-	function h(s, u) {
+	function p(s, u) {
 		let f = !1;
 		for (let b of s) {
-			if (u && v(b).then(h), !t.has(b)) continue;
+			if (u && v(b).then(p), !t.has(b)) continue;
 			let N = t.get(b);
 			N.length_c && (b.dispatchEvent(new Event(_)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), f = !0);
 		}
 		return f;
 	}
-	function x(s, u) {
+	function m(s, u) {
 		let f = !1;
 		for (let b of s)
-			u && v(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(w(b)), f = !0);
+			u && v(b).then(m), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(y(b)), f = !0);
 		return f;
 	}
-	function w(s) {
+	function y(s) {
 		return () => {
 			s.isConnected || (s.dispatchEvent(new Event(C)), t.delete(s));
 		};
@@ -363,17 +365,17 @@ function yt() {
 }
 
 // src/customElement.js
-function Zt(t, e, n, r = _t) {
-	m.push({
+function Jt(t, e, n, r = _t) {
+	x.push({
 		scope: t,
 		host: (...i) => i.length ? i.forEach((a) => a(t)) : t
 	}), typeof r == "function" && (r = r.call(t, t));
 	let o = t[O];
-	o || wt(t);
+	o || yt(t);
 	let c = n.call(t, r);
-	return o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(C, D.observe(e), { once: !0 }), m.pop(), e.append(c);
+	return o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(C, D.observe(e), { once: !0 }), x.pop(), e.append(c);
 }
-function wt(t) {
+function yt(t) {
 	return J(t.prototype, "connectedCallback", function(e, n, r) {
 		e.apply(n, r), n.dispatchEvent(new Event(_));
 	}), J(t.prototype, "disconnectedCallback", function(e, n, r) {
@@ -396,43 +398,43 @@ function _t(t) {
 }
 
 // src/events.js
-function Qt(t, e, n) {
+function Kt(t, e, n) {
 	return e || (e = {}), function(o, ...c) {
 		n && (c.unshift(o), o = typeof n == "function" ? n() : n);
 		let i = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
 		return o.dispatchEvent(i);
 	};
 }
-function y(t, e, n) {
+function w(t, e, n) {
 	return function(o) {
 		return o.addEventListener(t, e, n), o;
 	};
 }
 var it = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
-y.connected = function(t, e) {
+w.connected = function(t, e) {
 	return e = it(e), function(r) {
 		return r.addEventListener(_, t, e), r[O] ? r : r.isConnected ? (r.dispatchEvent(new Event(_)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r);
 	};
 };
-y.disconnected = function(t, e) {
+w.disconnected = function(t, e) {
 	return e = it(e), function(r) {
 		return r.addEventListener(C, t, e), r[O] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r;
 	};
 };
 var Z = /* @__PURE__ */ new WeakMap();
-y.disconnectedAsAbort = function(t) {
+w.disconnectedAsAbort = function(t) {
 	if (Z.has(t)) return Z.get(t);
 	let e = new AbortController();
-	return Z.set(t, e), t(y.disconnected(() => e.abort())), e;
+	return Z.set(t, e), t(w.disconnected(() => e.abort())), e;
 };
 var At = /* @__PURE__ */ new WeakSet();
-y.attributeChanged = function(t, e) {
+w.attributeChanged = function(t, e) {
 	return typeof e != "object" && (e = {}), function(r) {
 		if (r.addEventListener(M, t, e), r[O] || At.has(r) || !d.M) return r;
 		let o = new d.M(function(i) {
-			for (let { attributeName: a, target: l } of i)
-				l.dispatchEvent(
-					new CustomEvent(M, { detail: [a, l.getAttribute(a)] })
+			for (let { attributeName: a, target: h } of i)
+				h.dispatchEvent(
+					new CustomEvent(M, { detail: [a, h.getAttribute(a)] })
 				);
 		});
 		return q(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;
@@ -440,10 +442,10 @@ y.attributeChanged = function(t, e) {
 };
 
 // src/signals-lib.js
-var p = "__dde_signal";
+var l = "__dde_signal";
 function z(t) {
 	try {
-		return T(t, p);
+		return T(t, l);
 	} catch {
 		return !1;
 	}
@@ -460,10 +462,10 @@ function E(t, e) {
 		for (let a of c)
 			i.has(a) || L(a, r);
 	};
-	return g.set(n[p], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n;
+	return g.set(n[l], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n;
 }
 E.action = function(t, e, ...n) {
-	let r = t[p], { actions: o } = r;
+	let r = t[l], { actions: o } = r;
 	if (!o || !(e in o))
 		throw new Error(`'${t}' has no action with name '${e}'!`);
 	if (o[e].apply(r, n), r.skip) return delete r.skip;
@@ -482,8 +484,8 @@ E.symbols = {
 };
 E.clear = function(...t) {
 	for (let n of t) {
-		let r = n[p];
-		r && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[p]);
+		let r = n[l];
+		r && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[l]);
 	}
 	function e(n, r) {
 		r.listeners.forEach((o) => {
@@ -497,22 +499,22 @@ var R = "__dde_reactive";
 E.el = function(t, e) {
 	let n = P.mark({ type: "reactive" }, !0), r = n.end, o = d.D.createDocumentFragment();
 	o.append(n, r);
-	let { current: c } = m, i = {}, a = (l) => {
+	let { current: c } = x, i = {}, a = (h) => {
 		if (!n.parentNode || !r.parentNode)
 			return L(t, a);
 		let v = i;
-		i = {}, m.push(c);
-		let h = e(l, function(u, f) {
+		i = {}, x.push(c);
+		let p = e(h, function(u, f) {
 			let b;
 			return T(v, u) ? (b = v[u], delete v[u]) : b = f(), i[u] = b, b;
 		});
-		m.pop(), Array.isArray(h) || (h = [h]);
-		let x = document.createComment("");
-		h.push(x), n.after(...h);
-		let w;
-		for (; (w = x.nextSibling) && w !== r; )
-			w.remove();
-		x.remove(), n.isConnected && St(c.host());
+		x.pop(), Array.isArray(p) || (p = [p]);
+		let m = document.createComment("");
+		p.push(m), n.after(...p);
+		let y;
+		for (; (y = m.nextSibling) && y !== r; )
+			y.remove();
+		m.remove(), n.isConnected && St(c.host());
 	};
 	return Q(t, a), ft(t, a, n, e), a(t()), o;
 };
@@ -535,12 +537,12 @@ function Ct(t) {
 var G = "__dde_attributes";
 E.observedAttributes = function(t) {
 	let e = t[G] = {}, n = F(t, Ct(e));
-	return y.attributeChanged(function({ detail: o }) {
+	return w.attributeChanged(function({ detail: o }) {
 		/*! This maps attributes to signals (`S.observedAttributes`).
 			* Investigate `__dde_attributes` key of the element.*/
 		let [c, i] = o, a = this[G][c];
 		if (a) return E.action(a, "_set", i);
-	})(t), y.disconnected(function() {
+	})(t), w.disconnected(function() {
 		/*! This removes all signals mapped to attributes (`S.observedAttributes`).
 			* Investigate `__dde_attributes` key of the element.*/
 		E.clear(...Object.values(this[G]));
@@ -559,15 +561,15 @@ var ut = {
 	}
 };
 function ft(t, e, ...n) {
-	let { current: r } = m;
+	let { current: r } = x;
 	r.prevent || r.host(function(o) {
-		o[R] || (o[R] = [], y.disconnected(
+		o[R] || (o[R] = [], w.disconnected(
 			() => (
 				/*!
 				* Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).
 				* You can investigate the `__dde_reactive` key of the element.
 				* */
-				o[R].forEach(([[c, i]]) => L(c, i, c[p] && c[p].host && c[p].host() === o))
+				o[R].forEach(([[c, i]]) => L(c, i, c[l] && c[l].host && c[l].host() === o))
 			)
 		)(o)), o[R].push([[t, e], ...n]);
 	});
@@ -593,8 +595,8 @@ function at(t, e, n, r = !1) {
 	X(n) !== "[object Object]" && (n = {});
 	let { onclear: c } = E.symbols;
 	n[c] && (o.push(n[c]), delete n[c]);
-	let { host: i } = m;
-	return Reflect.defineProperty(t, p, {
+	let { host: i } = x;
+	return Reflect.defineProperty(t, l, {
 		value: {
 			value: e,
 			actions: n,
@@ -607,28 +609,28 @@ function at(t, e, n, r = !1) {
 		enumerable: !1,
 		writable: !1,
 		configurable: !0
-	}), t.toJSON = () => t(), t.valueOf = () => t[p] && t[p].value, Object.setPrototypeOf(t[p], Dt), t;
+	}), t.toJSON = () => t(), t.valueOf = () => t[l] && t[l].value, Object.setPrototypeOf(t[l], Dt), t;
 }
 function Rt() {
 	return H[H.length - 1];
 }
 function K(t) {
-	if (!t[p]) return;
-	let { value: e, listeners: n } = t[p], r = Rt();
+	if (!t[l]) return;
+	let { value: e, listeners: n } = t[l], r = Rt();
 	return r && n.add(r), g.has(r) && g.get(r).add(t), e;
 }
 function dt(t, e, n) {
-	if (!t[p]) return;
-	let r = t[p];
+	if (!t[l]) return;
+	let r = t[l];
 	if (!(!n && r.value === e))
 		return r.value = e, r.listeners.forEach((o) => o(e)), e;
 }
 function Q(t, e) {
-	if (t[p])
-		return t[p].listeners.add(e);
+	if (t[l])
+		return t[l].listeners.add(e);
 }
 function L(t, e, n) {
-	let r = t[p];
+	let r = t[l];
 	if (!r) return;
 	let o = r.listeners.delete(e);
 	if (n && !r.listeners.size) {
@@ -651,19 +653,18 @@ globalThis.dde= {
 	classListDeclarative: gt,
 	createElement: P,
 	createElementNS: qt,
-	customElementRender: Zt,
-	customElementWithDDE: wt,
-	dispatchEvent: Qt,
+	customElementRender: Jt,
+	customElementWithDDE: yt,
+	dispatchEvent: Kt,
 	el: P,
 	elNS: qt,
 	elementAttribute: vt,
-	empty: Ft,
 	isSignal: z,
-	lifecyclesToEvents: wt,
+	lifecyclesToEvents: yt,
 	observedAttributes: _t,
-	on: y,
+	on: w,
 	registerReactivity: B,
-	scope: m,
+	scope: x,
 	signal: E,
 	simulateSlots: Wt
 };
diff --git a/dist/dde.js b/dist/dde.js
index 9213f89..c6a64cc 100644
--- a/dist/dde.js
+++ b/dist/dde.js
@@ -1,7 +1,7 @@
 //deka-dom-el library is available via global namespace `dde`
 (()=> {
 // src/signals-common.js
-var C = {
+var m = {
 	isSignal(t) {
 		return !1;
 	},
@@ -10,15 +10,15 @@ var C = {
 	}
 };
 function V(t, e = !0) {
-	return e ? Object.assign(C, t) : (Object.setPrototypeOf(t, C), t);
+	return e ? Object.assign(m, t) : (Object.setPrototypeOf(t, m), t);
 }
 function L(t) {
-	return C.isPrototypeOf(t) && t !== C ? t : C;
+	return m.isPrototypeOf(t) && t !== m ? t : m;
 }
 
 // src/helpers.js
 var q = (...t) => Object.prototype.hasOwnProperty.call(...t);
-function E(t) {
+function x(t) {
 	return typeof t > "u";
 }
 function N(t, e) {
@@ -50,14 +50,14 @@ var a = {
 	M: globalThis.MutationObserver
 };
 function K(t, e, n) {
-	if (Reflect.set(t, e, n), !!E(n)) {
+	if (Reflect.set(t, e, n), !!x(n)) {
 		if (Reflect.deleteProperty(t, e), t instanceof a.H && t.getAttribute(e) === "undefined")
 			return t.removeAttribute(e);
 		if (Reflect.get(t, e) === "undefined")
 			return Reflect.set(t, e, "");
 	}
 }
-var x = "__dde_lifecyclesToEvents", g = "dde:connected", y = "dde:disconnected", D = "dde:attributeChanged";
+var y = "__dde_lifecyclesToEvents", g = "dde:connected", w = "dde:disconnected", D = "dde:attributeChanged";
 
 // src/dom.js
 var v = [{
@@ -102,15 +102,17 @@ function j(t, e, ...n) {
 	let r = L(this), o = 0, c, f;
 	switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {
 		case typeof t == "function": {
-			o = 1, S.push({ scope: t, host: (...b) => b.length ? (o === 1 ? n.unshift(...b) : b.forEach((h) => h(f)), void 0) : f }), c = t(e || void 0);
-			let d = c instanceof a.F;
+			o = 1;
+			let d = (...l) => l.length ? (o === 1 ? n.unshift(...l) : l.forEach((E) => E(f)), void 0) : f;
+			S.push({ scope: t, host: d }), c = t(e || void 0);
+			let p = c instanceof a.F;
 			if (c.nodeName === "#comment") break;
-			let p = j.mark({
+			let b = j.mark({
 				type: "component",
 				name: t.name,
-				host: d ? "this" : "parentElement"
+				host: p ? "this" : "parentElement"
 			});
-			c.prepend(p), d && (f = p);
+			c.prepend(b), p && (f = b);
 			break;
 		}
 		case t === "#text":
@@ -127,6 +129,11 @@ function j(t, e, ...n) {
 	}
 	return Q(c), f || (f = c), n.forEach((d) => d(f)), o && S.pop(), o = 2, c;
 }
+j.mark = function(t, e = !1) {
+	t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
+	let n = e ? "" : "/", r = a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`);
+	return e && (r.end = a.D.createComment("</dde:mark>")), r;
+};
 function bt(t, e, n) {
 	typeof e != "object" && (n = e, e = t);
 	let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((f, d) => Reflect.set(f, d.name || r, d) && f, {}), c = q(o, r);
@@ -135,13 +142,13 @@ function bt(t, e, n) {
 			if (p[0] === e) return f.apply(t, p);
 			if (!p.length) return t;
 			let b = a.D.createDocumentFragment();
-			for (let h of p) {
-				if (!h || !h.slot) {
-					c && b.append(h);
+			for (let l of p) {
+				if (!l || !l.slot) {
+					c && b.append(l);
 					continue;
 				}
-				let A = h.slot, _ = o[A];
-				tt(h, "remove", "slot"), _ && (X(_, h, n), Reflect.deleteProperty(o, A));
+				let E = l.slot, _ = o[E];
+				tt(l, "remove", "slot"), _ && (X(_, l, n), Reflect.deleteProperty(o, E));
 			}
 			return c && (o[r].replaceWith(b), Reflect.deleteProperty(o, r)), t.append = f, t;
 		}
@@ -154,16 +161,14 @@ function bt(t, e, n) {
 function X(t, e, n) {
 	n && n(t, e);
 	try {
-		t.replaceWith(O(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));
+		t.replaceWith(O(e, {
+			className: [e.className, t.className],
+			dataset: { ...t.dataset }
+		}));
 	} catch {
 		t.replaceWith(e);
 	}
 }
-j.mark = function(t, e = !1) {
-	t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
-	let n = e ? "" : "/", r = a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`);
-	return e && (r.end = a.D.createComment("</dde:mark>")), r;
-};
 function gt(t) {
 	let e = this;
 	return function(...r) {
@@ -223,16 +228,13 @@ function Y(t, e) {
 		(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)
 	), t;
 }
-function vt(t) {
-	return Array.from(t.children).forEach((e) => e.remove()), t;
-}
 function tt(t, e, n, r) {
 	return t instanceof a.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r);
 }
 function et(t, e) {
 	if (!(e in t)) return !1;
 	let n = I(t, e);
-	return !E(n.set);
+	return !x(n.set);
 }
 function I(t, e) {
 	if (t = Object.getPrototypeOf(t), !t) return {};
@@ -249,18 +251,18 @@ function Z(t) {
 	return Array.isArray(t) ? t.filter(Boolean).join(" ") : t;
 }
 function nt(t, e, n, r) {
-	return t[(E(r) ? "remove" : "set") + e](n, Z(r));
+	return t[(x(r) ? "remove" : "set") + e](n, Z(r));
 }
 function rt(t, e, n, r, o = null) {
-	return t[(E(r) ? "remove" : "set") + e + "NS"](o, n, Z(r));
+	return t[(x(r) ? "remove" : "set") + e + "NS"](o, n, Z(r));
 }
 function H(t, e, n) {
-	if (Reflect.set(t, e, n), !!E(n))
+	if (Reflect.set(t, e, n), !!x(n))
 		return Reflect.deleteProperty(t, e);
 }
 
 // src/events-observer.js
-var w = a.M ? ot() : new Proxy({}, {
+var A = a.M ? ot() : new Proxy({}, {
 	get() {
 		return () => {
 		};
@@ -270,11 +272,11 @@ function ot() {
 	let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(u) {
 		for (let s of u)
 			if (s.type === "childList") {
-				if (h(s.addedNodes, !0)) {
+				if (l(s.addedNodes, !0)) {
 					i();
 					continue;
 				}
-				A(s.removedNodes, !0) && i();
+				E(s.removedNodes, !0) && i();
 			}
 	}, r = new a.M(n(d));
 	return {
@@ -336,52 +338,52 @@ function ot() {
 			s === i || !(s instanceof Node) || i.contains(s) && u.push(s);
 		return u;
 	}
-	function h(i, u) {
+	function l(i, u) {
 		let s = !1;
-		for (let l of i) {
-			if (u && b(l).then(h), !t.has(l)) continue;
-			let m = t.get(l);
-			m.length_c && (l.dispatchEvent(new Event(g)), m.connected = /* @__PURE__ */ new WeakSet(), m.length_c = 0, m.length_d || t.delete(l), s = !0);
+		for (let h of i) {
+			if (u && b(h).then(l), !t.has(h)) continue;
+			let C = t.get(h);
+			C.length_c && (h.dispatchEvent(new Event(g)), C.connected = /* @__PURE__ */ new WeakSet(), C.length_c = 0, C.length_d || t.delete(h), s = !0);
 		}
 		return s;
 	}
-	function A(i, u) {
+	function E(i, u) {
 		let s = !1;
-		for (let l of i)
-			u && b(l).then(A), !(!t.has(l) || !t.get(l).length_d) && ((globalThis.queueMicrotask || setTimeout)(_(l)), s = !0);
+		for (let h of i)
+			u && b(h).then(E), !(!t.has(h) || !t.get(h).length_d) && ((globalThis.queueMicrotask || setTimeout)(_(h)), s = !0);
 		return s;
 	}
 	function _(i) {
 		return () => {
-			i.isConnected || (i.dispatchEvent(new Event(y)), t.delete(i));
+			i.isConnected || (i.dispatchEvent(new Event(w)), t.delete(i));
 		};
 	}
 }
 
 // src/customElement.js
-function Dt(t, e, n, r = it) {
+function mt(t, e, n, r = it) {
 	S.push({
 		scope: t,
 		host: (...f) => f.length ? f.forEach((d) => d(t)) : t
 	}), typeof r == "function" && (r = r.call(t, t));
-	let o = t[x];
+	let o = t[y];
 	o || ct(t);
 	let c = n.call(t, r);
-	return o || t.dispatchEvent(new Event(g)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(y, w.observe(e), { once: !0 }), S.pop(), e.append(c);
+	return o || t.dispatchEvent(new Event(g)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(w, A.observe(e), { once: !0 }), S.pop(), e.append(c);
 }
 function ct(t) {
 	return k(t.prototype, "connectedCallback", function(e, n, r) {
 		e.apply(n, r), n.dispatchEvent(new Event(g));
 	}), k(t.prototype, "disconnectedCallback", function(e, n, r) {
 		e.apply(n, r), (globalThis.queueMicrotask || setTimeout)(
-			() => !n.isConnected && n.dispatchEvent(new Event(y))
+			() => !n.isConnected && n.dispatchEvent(new Event(w))
 		);
 	}), k(t.prototype, "attributeChangedCallback", function(e, n, r) {
 		let [o, , c] = r;
 		n.dispatchEvent(new CustomEvent(D, {
 			detail: [o, c]
 		})), e.apply(n, r);
-	}), t.prototype[x] = !0, t;
+	}), t.prototype[y] = !0, t;
 }
 function k(t, e, n) {
 	t[e] = new Proxy(t[e] || (() => {
@@ -392,7 +394,7 @@ function it(t) {
 }
 
 // src/events.js
-function _t(t, e, n) {
+function Rt(t, e, n) {
 	return e || (e = {}), function(o, ...c) {
 		n && (c.unshift(o), o = typeof n == "function" ? n() : n);
 		let f = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
@@ -407,12 +409,12 @@ function R(t, e, n) {
 var G = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
 R.connected = function(t, e) {
 	return e = G(e), function(r) {
-		return r.addEventListener(g, t, e), r[x] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => w.offConnected(r, t)) && w.onConnected(r, t), r);
+		return r.addEventListener(g, t, e), r[y] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => A.offConnected(r, t)) && A.onConnected(r, t), r);
 	};
 };
 R.disconnected = function(t, e) {
 	return e = G(e), function(r) {
-		return r.addEventListener(y, t, e), r[x] || N(e.signal, () => w.offDisconnected(r, t)) && w.onDisconnected(r, t), r;
+		return r.addEventListener(w, t, e), r[y] || N(e.signal, () => A.offDisconnected(r, t)) && A.onDisconnected(r, t), r;
 	};
 };
 var W = /* @__PURE__ */ new WeakMap();
@@ -424,7 +426,7 @@ R.disconnectedAsAbort = function(t) {
 var st = /* @__PURE__ */ new WeakSet();
 R.attributeChanged = function(t, e) {
 	return typeof e != "object" && (e = {}), function(r) {
-		if (r.addEventListener(D, t, e), r[x] || st.has(r) || !a.M) return r;
+		if (r.addEventListener(D, t, e), r[y] || st.has(r) || !a.M) return r;
 		let o = new a.M(function(f) {
 			for (let { attributeName: d, target: p } of f)
 				p.dispatchEvent(
@@ -442,13 +444,12 @@ globalThis.dde= {
 	classListDeclarative: Y,
 	createElement: j,
 	createElementNS: gt,
-	customElementRender: Dt,
+	customElementRender: mt,
 	customElementWithDDE: ct,
-	dispatchEvent: _t,
+	dispatchEvent: Rt,
 	el: j,
 	elNS: gt,
 	elementAttribute: tt,
-	empty: vt,
 	lifecyclesToEvents: ct,
 	observedAttributes: it,
 	on: R,
diff --git a/dist/esm-with-signals.d.ts b/dist/esm-with-signals.d.ts
index 18a5868..38df36e 100644
--- a/dist/esm-with-signals.d.ts
+++ b/dist/esm-with-signals.d.ts
@@ -1,13 +1,13 @@
 declare global{ /* ddeSignal */ }
 type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
 type SupportedElement=
-	  HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
-	| SVGElementTagNameMap[keyof SVGElementTagNameMap]
-	| MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
-	| CustomElementTagNameMap[keyof CustomElementTagNameMap]
+		HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
+	|	SVGElementTagNameMap[keyof SVGElementTagNameMap]
+	|	MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
+	|	CustomElementTagNameMap[keyof CustomElementTagNameMap]
 declare global {
 	type ddeComponentAttributes= Record<any, any> | undefined;
-	type ddeElementAddon<El extends SupportedElement | DocumentFragment>= (element: El)=> El | void;
+	type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node>= (element: El)=> any;
 }
 type PascalCase=
 `${Capitalize<string>}${string}`;
@@ -15,43 +15,64 @@ type AttrsModified= {
 	/**
 	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
 	 */
-	style: string | Partial<CSSStyleDeclaration> | ddeSignal<string> | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
+	style: string | Partial<CSSStyleDeclaration> | ddeSignal<string>
+		| Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
 	/**
-	 * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` for others.
+	 * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1.
+	 * In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))`
+	 * for others.
 	 */
 	classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>,
 	/**
 	 * By default simiral to `className`, but also supports `string[]`
 	 * */
 	className: string | (string|boolean|undefined|ddeSignal<string|boolean|undefined>)[];
+	/**
+	 * Used by the dataset HTML attribute to represent data for custom attributes added to elements.
+	 * Values are converted to string (see {@link DOMStringMap}).
+	 *
+	 * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap)
+	 * */
+	dataset: Record<string,string|number|ddeSignal<string|number>>,
 	/**
 	 * Sets `aria-*` simiraly to `dataset`
 	 * */
 	ariaset: Record<string,string|ddeSignal<string>>,
-} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal<string>> & Record<`.${string}`, any>
+}	& Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal<string>>
+	& Record<`.${string}`, any>
 type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>;
 /**
  * Just element attributtes
  *
- * In most cases, you can use native propertie such as [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)).
+ * In most cases, you can use native propertie such as
+ * [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on
+ * (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)).
  *
  * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
  * @private
  */
-type ElementAttributes<T extends SupportedElement>= Partial<{ [K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]> } & AttrsModified> & Record<string, any>;
-export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El
+type ElementAttributes<T extends SupportedElement>= Partial<{
+	[K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]>
+} & AttrsModified> & Record<string, any>;
+export function classListDeclarative<El extends SupportedElement>(
+	element: El,
+	classList: AttrsModified["classList"]
+): El
 export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
-export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT]
+export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(
+	element: El,
+	attr: ATT,
+	value: ElementAttributes<El>[ATT]
+): ElementAttributes<El>[ATT]
 
 type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
 type textContent= string | ddeSignal<string>;
 export function el<
 	TAG extends keyof ExtendedHTMLElementTagNameMap,
-	EL extends ExtendedHTMLElementTagNameMap[TAG]
 >(
 	tag_name: TAG,
-	attrs?: ElementAttributes<EL> | textContent,
-	...addons: ddeElementAddon<EL>[]
+	attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | textContent,
+	...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]>[], // TODO: for now addons must have the same element
 ): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement
 export function el(
 	tag_name?: "<>",
@@ -68,7 +89,9 @@ export function el<
 	component: C,
 	attrs?: Parameters<C>[0] | textContent,
 	...addons: ddeElementAddon<ReturnType<C>>[]
-): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? ReturnType<C> : ( ReturnType<C> extends ddeDocumentFragment ? ReturnType<C> : ddeHTMLElement )
+): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
+	? ReturnType<C>
+	: ( ReturnType<C> extends ddeDocumentFragment ? ReturnType<C> : ddeHTMLElement )
 export { el as createElement }
 
 export function elNS(
@@ -78,8 +101,8 @@ export function elNS(
 	EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ),
 >(
 	tag_name: TAG,
-	attrs?: ElementAttributes<EL> | textContent,
-	...addons: ddeElementAddon<EL>[]
+	attrs?: ElementAttributes<NoInfer<EL>> | textContent,
+	...addons: ddeElementAddon<NoInfer<EL>>[]
 )=>  TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement
 export function elNS(
 	namespace: "http://www.w3.org/1998/Math/MathML"
@@ -88,8 +111,10 @@ export function elNS(
 	EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
 >(
 	tag_name: TAG,
-	attrs?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean }>,
-	...addons: ddeElementAddon<EL>[]
+	attrs?: string | textContent | Partial<{
+		[key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean
+	}>,
+	...addons: ddeElementAddon<NoInfer<EL>>[]
 )=> ddeMathMLElement
 export function elNS(
 	namespace: string
@@ -106,36 +131,45 @@ export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
  * */
 type simulateSlotsMapper= (body: HTMLSlotElement, el: HTMLElement)=> void;
 /** Simulate slots for ddeComponents */
-export function simulateSlots<EL extends SupportedElement | DocumentFragment>(root: EL, mapper?: simulateSlotsMapper): EL
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
+	root: EL,
+	mapper?: simulateSlotsMapper
+): EL
 /**
  * Simulate slots in Custom Elements without using `shadowRoot`.
  * @param el Custom Element root element
  * @param body Body of the custom element
  * */
-export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL, mapper?: simulateSlotsMapper): EL
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
+	el: HTMLElement,
+	body: EL, mapper?: simulateSlotsMapper
+): EL
 
 export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):
 	(element: SupportedElement, data?: any)=> void;
-export function dispatchEvent(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (()=> SupportedElement)):
-	(data?: any)=> void;
+export function dispatchEvent(
+	name: keyof DocumentEventMap | string,
+	options: EventInit | null,
+	element: SupportedElement | (()=> SupportedElement)
+): (data?: any)=> void;
 interface On{
 	/** Listens to the DOM event. See {@link Document.addEventListener} */
 	<
-		EE extends ddeElementAddon<SupportedElement>,
-		El extends ( EE extends ddeElementAddon<infer El> ? El : never ),
-		Event extends keyof DocumentEventMap>(
+		Event extends keyof DocumentEventMap,
+		EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
+		>(
 			type: Event,
-			listener: (this: El, ev: DocumentEventMap[Event]) => any,
+			listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any,
 			options?: AddEventListenerOptions
 		) : EE;
 	<
-		EE extends ddeElementAddon<SupportedElement>,
-		El extends ( EE extends ddeElementAddon<infer El> ? El : never )>(
+		EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
+		>(
 			type: string,
-			listener: (this: El, ev: Event | CustomEvent ) => any,
+			listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: Event | CustomEvent ) => any,
 			options?: AddEventListenerOptions
 		) : EE;
-	/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
+	/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
 	connected<
 		EE extends ddeElementAddon<SupportedElement>,
 		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
@@ -143,7 +177,7 @@ interface On{
 			listener: (this: El, event: CustomEvent<El>) => any,
 			options?: AddEventListenerOptions
 		) : EE;
-	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
+	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
 	disconnected<
 		EE extends ddeElementAddon<SupportedElement>,
 		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
@@ -151,7 +185,7 @@ interface On{
 			listener: (this: El, event: CustomEvent<void>) => any,
 			options?: AddEventListenerOptions
 		) : EE;
-	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
+	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
 	attributeChanged<
 		EE extends ddeElementAddon<SupportedElement>,
 		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
@@ -162,7 +196,12 @@ interface On{
 }
 export const on: On;
 
-type Scope= { scope: Node | Function | Object, host: ddeElementAddon<any>, custom_element: false | HTMLElement, prevent: boolean }
+type Scope= {
+	scope: Node | Function | Object,
+	host: ddeElementAddon<any>,
+	custom_element: false | HTMLElement,
+	prevent: boolean
+};
 /** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
 export const scope: {
 	current: Scope,
@@ -176,7 +215,7 @@ export const scope: {
 	 * — `scope.host(on.connected(console.log))`.
 	 * */
 	host: (...addons: ddeElementAddon<SupportedElement>[])=> HTMLElement,
-	
+
 	state: Scope[],
 	/** Adds new child scope. All attributes are inherited by default. */
 	push(scope: Partial<Scope>): ReturnType<Array<Scope>["push"]>,
@@ -202,12 +241,12 @@ export function observedAttributes(custom_element: HTMLElement): Record<string,
 /* TypeScript MEH */
 declare global{
 	type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
-	
+
 	interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
 	interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
 	interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }
 	interface ddeMathMLElement extends MathMLElement{ append: ddeAppend<ddeMathMLElement>; }
-	
+
 	interface ddeHTMLElementTagNameMap {
 		"a": ddeHTMLAnchorElement;
 		"area": ddeHTMLAreaElement;
@@ -350,6 +389,7 @@ declare global{
 	}
 }
 
+// editorconfig-checker-disable
 interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend<ddeHTMLAnchorElement>; }
 interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend<ddeHTMLAreaElement>; }
 interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend<ddeHTMLAudioElement>; }
@@ -477,6 +517,7 @@ interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend<ddeSVGTi
 interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend<ddeSVGTSpanElement>; }
 interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend<ddeSVGUseElement>; }
 interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; }
+// editorconfig-checker-enable
 export type Signal<V, A>= (set?: V)=> V & A;
 type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typeof signal._ | void;
 //type SymbolSignal= Symbol;
@@ -534,7 +575,7 @@ interface signal{
 	 * */
 	el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
 
-    observedAttributes(custom_element: HTMLElement): Record<string, Signal<string, {}>>;
+	observedAttributes(custom_element: HTMLElement): Record<string, Signal<string, {}>>;
 }
 export const signal: signal;
 export const S: signal;
diff --git a/dist/esm-with-signals.js b/dist/esm-with-signals.js
index f718eb8..53a9282 100644
--- a/dist/esm-with-signals.js
+++ b/dist/esm-with-signals.js
@@ -68,7 +68,7 @@ var A = [{
 	},
 	host: (t) => t ? t(d.D.body) : d.D.body,
 	prevent: !0
-}], m = {
+}], x = {
 	get current() {
 		return A[A.length - 1];
 	},
@@ -104,15 +104,17 @@ function P(t, e, ...n) {
 	let r = W(this), o = 0, c, i;
 	switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {
 		case typeof t == "function": {
-			o = 1, m.push({ scope: t, host: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((h) => h(i)), void 0) : i }), c = t(e || void 0);
-			let a = c instanceof d.F;
+			o = 1;
+			let a = (...p) => p.length ? (o === 1 ? n.unshift(...p) : p.forEach((m) => m(i)), void 0) : i;
+			x.push({ scope: t, host: a }), c = t(e || void 0);
+			let h = c instanceof d.F;
 			if (c.nodeName === "#comment") break;
-			let l = P.mark({
+			let v = P.mark({
 				type: "component",
 				name: t.name,
-				host: a ? "this" : "parentElement"
+				host: h ? "this" : "parentElement"
 			});
-			c.prepend(l), a && (i = l);
+			c.prepend(v), h && (i = v);
 			break;
 		}
 		case t === "#text":
@@ -127,23 +129,28 @@ function P(t, e, ...n) {
 		case !c:
 			c = j.call(this, d.D.createElement(t), e);
 	}
-	return ht(c), i || (i = c), n.forEach((a) => a(i)), o && m.pop(), o = 2, c;
+	return ht(c), i || (i = c), n.forEach((a) => a(i)), o && x.pop(), o = 2, c;
 }
+P.mark = function(t, e = !1) {
+	t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
+	let n = e ? "" : "/", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);
+	return e && (r.end = d.D.createComment("</dde:mark>")), r;
+};
 function Wt(t, e, n) {
 	typeof e != "object" && (n = e, e = t);
 	let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((i, a) => Reflect.set(i, a.name || r, a) && i, {}), c = T(o, r);
 	if (t.append = new Proxy(t.append, {
-		apply(i, a, l) {
-			if (l[0] === e) return i.apply(t, l);
-			if (!l.length) return t;
+		apply(i, a, h) {
+			if (h[0] === e) return i.apply(t, h);
+			if (!h.length) return t;
 			let v = d.D.createDocumentFragment();
-			for (let h of l) {
-				if (!h || !h.slot) {
-					c && v.append(h);
+			for (let p of h) {
+				if (!p || !p.slot) {
+					c && v.append(p);
 					continue;
 				}
-				let x = h.slot, w = o[x];
-				vt(h, "remove", "slot"), w && (bt(w, h, n), Reflect.deleteProperty(o, x));
+				let m = p.slot, y = o[m];
+				vt(p, "remove", "slot"), y && (bt(y, p, n), Reflect.deleteProperty(o, m));
 			}
 			return c && (o[r].replaceWith(v), Reflect.deleteProperty(o, r)), t.append = i, t;
 		}
@@ -156,16 +163,14 @@ function Wt(t, e, n) {
 function bt(t, e, n) {
 	n && n(t, e);
 	try {
-		t.replaceWith(j(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));
+		t.replaceWith(j(e, {
+			className: [e.className, t.className],
+			dataset: { ...t.dataset }
+		}));
 	} catch {
 		t.replaceWith(e);
 	}
 }
-P.mark = function(t, e = !1) {
-	t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
-	let n = e ? "" : "/", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);
-	return e && (r.end = d.D.createComment("</dde:mark>")), r;
-};
 function qt(t) {
 	let e = this;
 	return function(...r) {
@@ -188,7 +193,7 @@ function nt(t, e, n) {
 		t,
 		e,
 		n,
-		(a, l) => nt.call(c, t, a, l)
+		(a, h) => nt.call(c, t, a, h)
 	);
 	let [i] = e;
 	if (i === "=") return r(e.slice(1), n);
@@ -206,7 +211,7 @@ function nt(t, e, n) {
 		case "dataset":
 			return I(o, n, et.bind(null, t[e]));
 		case "ariaset":
-			return I(o, n, (a, l) => r("aria-" + a, l));
+			return I(o, n, (a, h) => r("aria-" + a, h));
 		case "classList":
 			return gt.call(c, t, n);
 	}
@@ -225,9 +230,6 @@ function gt(t, e) {
 		(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)
 	), t;
 }
-function Ft(t) {
-	return Array.from(t.children).forEach((e) => e.remove()), t;
-}
 function vt(t, e, n, r) {
 	return t instanceof d.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r);
 }
@@ -262,21 +264,21 @@ function et(t, e, n) {
 }
 
 // src/events-observer.js
-var D = d.M ? yt() : new Proxy({}, {
+var D = d.M ? wt() : new Proxy({}, {
 	get() {
 		return () => {
 		};
 	}
 });
-function yt() {
+function wt() {
 	let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) {
 		for (let f of u)
 			if (f.type === "childList") {
-				if (h(f.addedNodes, !0)) {
+				if (p(f.addedNodes, !0)) {
 					s();
 					continue;
 				}
-				x(f.removedNodes, !0) && s();
+				m(f.removedNodes, !0) && s();
 			}
 	}, r = new d.M(n(a));
 	return {
@@ -325,35 +327,35 @@ function yt() {
 	function a() {
 		!e || t.size || (e = !1, r.disconnect());
 	}
-	function l() {
+	function h() {
 		return new Promise(function(s) {
 			(requestIdleCallback || requestAnimationFrame)(s);
 		});
 	}
 	async function v(s) {
-		t.size > 30 && await l();
+		t.size > 30 && await h();
 		let u = [];
 		if (!(s instanceof Node)) return u;
 		for (let f of t.keys())
 			f === s || !(f instanceof Node) || s.contains(f) && u.push(f);
 		return u;
 	}
-	function h(s, u) {
+	function p(s, u) {
 		let f = !1;
 		for (let b of s) {
-			if (u && v(b).then(h), !t.has(b)) continue;
+			if (u && v(b).then(p), !t.has(b)) continue;
 			let N = t.get(b);
 			N.length_c && (b.dispatchEvent(new Event(_)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), f = !0);
 		}
 		return f;
 	}
-	function x(s, u) {
+	function m(s, u) {
 		let f = !1;
 		for (let b of s)
-			u && v(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(w(b)), f = !0);
+			u && v(b).then(m), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(y(b)), f = !0);
 		return f;
 	}
-	function w(s) {
+	function y(s) {
 		return () => {
 			s.isConnected || (s.dispatchEvent(new Event(C)), t.delete(s));
 		};
@@ -361,17 +363,17 @@ function yt() {
 }
 
 // src/customElement.js
-function Zt(t, e, n, r = _t) {
-	m.push({
+function Jt(t, e, n, r = _t) {
+	x.push({
 		scope: t,
 		host: (...i) => i.length ? i.forEach((a) => a(t)) : t
 	}), typeof r == "function" && (r = r.call(t, t));
 	let o = t[O];
-	o || wt(t);
+	o || yt(t);
 	let c = n.call(t, r);
-	return o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(C, D.observe(e), { once: !0 }), m.pop(), e.append(c);
+	return o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(C, D.observe(e), { once: !0 }), x.pop(), e.append(c);
 }
-function wt(t) {
+function yt(t) {
 	return J(t.prototype, "connectedCallback", function(e, n, r) {
 		e.apply(n, r), n.dispatchEvent(new Event(_));
 	}), J(t.prototype, "disconnectedCallback", function(e, n, r) {
@@ -394,43 +396,43 @@ function _t(t) {
 }
 
 // src/events.js
-function Qt(t, e, n) {
+function Kt(t, e, n) {
 	return e || (e = {}), function(o, ...c) {
 		n && (c.unshift(o), o = typeof n == "function" ? n() : n);
 		let i = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
 		return o.dispatchEvent(i);
 	};
 }
-function y(t, e, n) {
+function w(t, e, n) {
 	return function(o) {
 		return o.addEventListener(t, e, n), o;
 	};
 }
 var it = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
-y.connected = function(t, e) {
+w.connected = function(t, e) {
 	return e = it(e), function(r) {
 		return r.addEventListener(_, t, e), r[O] ? r : r.isConnected ? (r.dispatchEvent(new Event(_)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r);
 	};
 };
-y.disconnected = function(t, e) {
+w.disconnected = function(t, e) {
 	return e = it(e), function(r) {
 		return r.addEventListener(C, t, e), r[O] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r;
 	};
 };
 var Z = /* @__PURE__ */ new WeakMap();
-y.disconnectedAsAbort = function(t) {
+w.disconnectedAsAbort = function(t) {
 	if (Z.has(t)) return Z.get(t);
 	let e = new AbortController();
-	return Z.set(t, e), t(y.disconnected(() => e.abort())), e;
+	return Z.set(t, e), t(w.disconnected(() => e.abort())), e;
 };
 var At = /* @__PURE__ */ new WeakSet();
-y.attributeChanged = function(t, e) {
+w.attributeChanged = function(t, e) {
 	return typeof e != "object" && (e = {}), function(r) {
 		if (r.addEventListener(M, t, e), r[O] || At.has(r) || !d.M) return r;
 		let o = new d.M(function(i) {
-			for (let { attributeName: a, target: l } of i)
-				l.dispatchEvent(
-					new CustomEvent(M, { detail: [a, l.getAttribute(a)] })
+			for (let { attributeName: a, target: h } of i)
+				h.dispatchEvent(
+					new CustomEvent(M, { detail: [a, h.getAttribute(a)] })
 				);
 		});
 		return q(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;
@@ -438,10 +440,10 @@ y.attributeChanged = function(t, e) {
 };
 
 // src/signals-lib.js
-var p = "__dde_signal";
+var l = "__dde_signal";
 function z(t) {
 	try {
-		return T(t, p);
+		return T(t, l);
 	} catch {
 		return !1;
 	}
@@ -458,10 +460,10 @@ function E(t, e) {
 		for (let a of c)
 			i.has(a) || L(a, r);
 	};
-	return g.set(n[p], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n;
+	return g.set(n[l], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n;
 }
 E.action = function(t, e, ...n) {
-	let r = t[p], { actions: o } = r;
+	let r = t[l], { actions: o } = r;
 	if (!o || !(e in o))
 		throw new Error(`'${t}' has no action with name '${e}'!`);
 	if (o[e].apply(r, n), r.skip) return delete r.skip;
@@ -480,8 +482,8 @@ E.symbols = {
 };
 E.clear = function(...t) {
 	for (let n of t) {
-		let r = n[p];
-		r && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[p]);
+		let r = n[l];
+		r && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[l]);
 	}
 	function e(n, r) {
 		r.listeners.forEach((o) => {
@@ -495,22 +497,22 @@ var R = "__dde_reactive";
 E.el = function(t, e) {
 	let n = P.mark({ type: "reactive" }, !0), r = n.end, o = d.D.createDocumentFragment();
 	o.append(n, r);
-	let { current: c } = m, i = {}, a = (l) => {
+	let { current: c } = x, i = {}, a = (h) => {
 		if (!n.parentNode || !r.parentNode)
 			return L(t, a);
 		let v = i;
-		i = {}, m.push(c);
-		let h = e(l, function(u, f) {
+		i = {}, x.push(c);
+		let p = e(h, function(u, f) {
 			let b;
 			return T(v, u) ? (b = v[u], delete v[u]) : b = f(), i[u] = b, b;
 		});
-		m.pop(), Array.isArray(h) || (h = [h]);
-		let x = document.createComment("");
-		h.push(x), n.after(...h);
-		let w;
-		for (; (w = x.nextSibling) && w !== r; )
-			w.remove();
-		x.remove(), n.isConnected && St(c.host());
+		x.pop(), Array.isArray(p) || (p = [p]);
+		let m = document.createComment("");
+		p.push(m), n.after(...p);
+		let y;
+		for (; (y = m.nextSibling) && y !== r; )
+			y.remove();
+		m.remove(), n.isConnected && St(c.host());
 	};
 	return Q(t, a), ft(t, a, n, e), a(t()), o;
 };
@@ -533,12 +535,12 @@ function Ct(t) {
 var G = "__dde_attributes";
 E.observedAttributes = function(t) {
 	let e = t[G] = {}, n = F(t, Ct(e));
-	return y.attributeChanged(function({ detail: o }) {
+	return w.attributeChanged(function({ detail: o }) {
 		/*! This maps attributes to signals (`S.observedAttributes`).
 			* Investigate `__dde_attributes` key of the element.*/
 		let [c, i] = o, a = this[G][c];
 		if (a) return E.action(a, "_set", i);
-	})(t), y.disconnected(function() {
+	})(t), w.disconnected(function() {
 		/*! This removes all signals mapped to attributes (`S.observedAttributes`).
 			* Investigate `__dde_attributes` key of the element.*/
 		E.clear(...Object.values(this[G]));
@@ -557,15 +559,15 @@ var ut = {
 	}
 };
 function ft(t, e, ...n) {
-	let { current: r } = m;
+	let { current: r } = x;
 	r.prevent || r.host(function(o) {
-		o[R] || (o[R] = [], y.disconnected(
+		o[R] || (o[R] = [], w.disconnected(
 			() => (
 				/*!
 				* Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).
 				* You can investigate the `__dde_reactive` key of the element.
 				* */
-				o[R].forEach(([[c, i]]) => L(c, i, c[p] && c[p].host && c[p].host() === o))
+				o[R].forEach(([[c, i]]) => L(c, i, c[l] && c[l].host && c[l].host() === o))
 			)
 		)(o)), o[R].push([[t, e], ...n]);
 	});
@@ -591,8 +593,8 @@ function at(t, e, n, r = !1) {
 	X(n) !== "[object Object]" && (n = {});
 	let { onclear: c } = E.symbols;
 	n[c] && (o.push(n[c]), delete n[c]);
-	let { host: i } = m;
-	return Reflect.defineProperty(t, p, {
+	let { host: i } = x;
+	return Reflect.defineProperty(t, l, {
 		value: {
 			value: e,
 			actions: n,
@@ -605,28 +607,28 @@ function at(t, e, n, r = !1) {
 		enumerable: !1,
 		writable: !1,
 		configurable: !0
-	}), t.toJSON = () => t(), t.valueOf = () => t[p] && t[p].value, Object.setPrototypeOf(t[p], Dt), t;
+	}), t.toJSON = () => t(), t.valueOf = () => t[l] && t[l].value, Object.setPrototypeOf(t[l], Dt), t;
 }
 function Rt() {
 	return H[H.length - 1];
 }
 function K(t) {
-	if (!t[p]) return;
-	let { value: e, listeners: n } = t[p], r = Rt();
+	if (!t[l]) return;
+	let { value: e, listeners: n } = t[l], r = Rt();
 	return r && n.add(r), g.has(r) && g.get(r).add(t), e;
 }
 function dt(t, e, n) {
-	if (!t[p]) return;
-	let r = t[p];
+	if (!t[l]) return;
+	let r = t[l];
 	if (!(!n && r.value === e))
 		return r.value = e, r.listeners.forEach((o) => o(e)), e;
 }
 function Q(t, e) {
-	if (t[p])
-		return t[p].listeners.add(e);
+	if (t[l])
+		return t[l].listeners.add(e);
 }
 function L(t, e, n) {
-	let r = t[p];
+	let r = t[l];
 	if (!r) return;
 	let o = r.listeners.delete(e);
 	if (n && !r.listeners.size) {
@@ -648,19 +650,18 @@ export {
 	gt as classListDeclarative,
 	P as createElement,
 	qt as createElementNS,
-	Zt as customElementRender,
-	wt as customElementWithDDE,
-	Qt as dispatchEvent,
+	Jt as customElementRender,
+	yt as customElementWithDDE,
+	Kt as dispatchEvent,
 	P as el,
 	qt as elNS,
 	vt as elementAttribute,
-	Ft as empty,
 	z as isSignal,
-	wt as lifecyclesToEvents,
+	yt as lifecyclesToEvents,
 	_t as observedAttributes,
-	y as on,
+	w as on,
 	B as registerReactivity,
-	m as scope,
+	x as scope,
 	E as signal,
 	Wt as simulateSlots
 };
diff --git a/dist/esm.d.ts b/dist/esm.d.ts
index 4656d84..c035e27 100644
--- a/dist/esm.d.ts
+++ b/dist/esm.d.ts
@@ -1,13 +1,13 @@
 declare global{ /* ddeSignal */ }
 type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
 type SupportedElement=
-	  HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
-	| SVGElementTagNameMap[keyof SVGElementTagNameMap]
-	| MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
-	| CustomElementTagNameMap[keyof CustomElementTagNameMap]
+		HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
+	|	SVGElementTagNameMap[keyof SVGElementTagNameMap]
+	|	MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
+	|	CustomElementTagNameMap[keyof CustomElementTagNameMap]
 declare global {
 	type ddeComponentAttributes= Record<any, any> | undefined;
-	type ddeElementAddon<El extends SupportedElement | DocumentFragment>= (element: El)=> El | void;
+	type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node>= (element: El)=> any;
 }
 type PascalCase=
 `${Capitalize<string>}${string}`;
@@ -15,43 +15,64 @@ type AttrsModified= {
 	/**
 	 * Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
 	 */
-	style: string | Partial<CSSStyleDeclaration> | ddeSignal<string> | Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
+	style: string | Partial<CSSStyleDeclaration> | ddeSignal<string>
+		| Partial<{ [K in keyof CSSStyleDeclaration]: ddeSignal<CSSStyleDeclaration[K]> }>
 	/**
-	 * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` for others.
+	 * Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1.
+	 * In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))`
+	 * for others.
 	 */
 	classList: Record<string,-1|0|1|boolean|ddeSignal<-1|0|1|boolean>>,
 	/**
 	 * By default simiral to `className`, but also supports `string[]`
 	 * */
 	className: string | (string|boolean|undefined|ddeSignal<string|boolean|undefined>)[];
+	/**
+	 * Used by the dataset HTML attribute to represent data for custom attributes added to elements.
+	 * Values are converted to string (see {@link DOMStringMap}).
+	 *
+	 * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap)
+	 * */
+	dataset: Record<string,string|number|ddeSignal<string|number>>,
 	/**
 	 * Sets `aria-*` simiraly to `dataset`
 	 * */
 	ariaset: Record<string,string|ddeSignal<string>>,
-} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal<string>> & Record<`.${string}`, any>
+}	& Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string|ddeSignal<string>>
+	& Record<`.${string}`, any>
 type _fromElsInterfaces<EL extends SupportedElement>= Omit<EL, keyof AttrsModified>;
 /**
  * Just element attributtes
  *
- * In most cases, you can use native propertie such as [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)).
+ * In most cases, you can use native propertie such as
+ * [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on
+ * (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)).
  *
  * There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
  * @private
  */
-type ElementAttributes<T extends SupportedElement>= Partial<{ [K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]> } & AttrsModified> & Record<string, any>;
-export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): El
+type ElementAttributes<T extends SupportedElement>= Partial<{
+	[K in keyof _fromElsInterfaces<T>]: _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]>
+} & AttrsModified> & Record<string, any>;
+export function classListDeclarative<El extends SupportedElement>(
+	element: El,
+	classList: AttrsModified["classList"]
+): El
 export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
-export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT]
+export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(
+	element: El,
+	attr: ATT,
+	value: ElementAttributes<El>[ATT]
+): ElementAttributes<El>[ATT]
 
 type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
 type textContent= string | ddeSignal<string>;
 export function el<
 	TAG extends keyof ExtendedHTMLElementTagNameMap,
-	EL extends ExtendedHTMLElementTagNameMap[TAG]
 >(
 	tag_name: TAG,
-	attrs?: ElementAttributes<EL> | textContent,
-	...addons: ddeElementAddon<EL>[]
+	attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | textContent,
+	...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]>[], // TODO: for now addons must have the same element
 ): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement
 export function el(
 	tag_name?: "<>",
@@ -68,7 +89,9 @@ export function el<
 	component: C,
 	attrs?: Parameters<C>[0] | textContent,
 	...addons: ddeElementAddon<ReturnType<C>>[]
-): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap] ? ReturnType<C> : ( ReturnType<C> extends ddeDocumentFragment ? ReturnType<C> : ddeHTMLElement )
+): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
+	? ReturnType<C>
+	: ( ReturnType<C> extends ddeDocumentFragment ? ReturnType<C> : ddeHTMLElement )
 export { el as createElement }
 
 export function elNS(
@@ -78,8 +101,8 @@ export function elNS(
 	EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ),
 >(
 	tag_name: TAG,
-	attrs?: ElementAttributes<EL> | textContent,
-	...addons: ddeElementAddon<EL>[]
+	attrs?: ElementAttributes<NoInfer<EL>> | textContent,
+	...addons: ddeElementAddon<NoInfer<EL>>[]
 )=>  TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement
 export function elNS(
 	namespace: "http://www.w3.org/1998/Math/MathML"
@@ -88,8 +111,10 @@ export function elNS(
 	EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
 >(
 	tag_name: TAG,
-	attrs?: string | textContent | Partial<{ [key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean }>,
-	...addons: ddeElementAddon<EL>[]
+	attrs?: string | textContent | Partial<{
+		[key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean
+	}>,
+	...addons: ddeElementAddon<NoInfer<EL>>[]
 )=> ddeMathMLElement
 export function elNS(
 	namespace: string
@@ -106,36 +131,45 @@ export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
  * */
 type simulateSlotsMapper= (body: HTMLSlotElement, el: HTMLElement)=> void;
 /** Simulate slots for ddeComponents */
-export function simulateSlots<EL extends SupportedElement | DocumentFragment>(root: EL, mapper?: simulateSlotsMapper): EL
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
+	root: EL,
+	mapper?: simulateSlotsMapper
+): EL
 /**
  * Simulate slots in Custom Elements without using `shadowRoot`.
  * @param el Custom Element root element
  * @param body Body of the custom element
  * */
-export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: HTMLElement, body: EL, mapper?: simulateSlotsMapper): EL
+export function simulateSlots<EL extends SupportedElement | DocumentFragment>(
+	el: HTMLElement,
+	body: EL, mapper?: simulateSlotsMapper
+): EL
 
 export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):
 	(element: SupportedElement, data?: any)=> void;
-export function dispatchEvent(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (()=> SupportedElement)):
-	(data?: any)=> void;
+export function dispatchEvent(
+	name: keyof DocumentEventMap | string,
+	options: EventInit | null,
+	element: SupportedElement | (()=> SupportedElement)
+): (data?: any)=> void;
 interface On{
 	/** Listens to the DOM event. See {@link Document.addEventListener} */
 	<
-		EE extends ddeElementAddon<SupportedElement>,
-		El extends ( EE extends ddeElementAddon<infer El> ? El : never ),
-		Event extends keyof DocumentEventMap>(
+		Event extends keyof DocumentEventMap,
+		EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
+		>(
 			type: Event,
-			listener: (this: El, ev: DocumentEventMap[Event]) => any,
+			listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any,
 			options?: AddEventListenerOptions
 		) : EE;
 	<
-		EE extends ddeElementAddon<SupportedElement>,
-		El extends ( EE extends ddeElementAddon<infer El> ? El : never )>(
+		EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
+		>(
 			type: string,
-			listener: (this: El, ev: Event | CustomEvent ) => any,
+			listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: Event | CustomEvent ) => any,
 			options?: AddEventListenerOptions
 		) : EE;
-	/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
+	/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
 	connected<
 		EE extends ddeElementAddon<SupportedElement>,
 		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
@@ -143,7 +177,7 @@ interface On{
 			listener: (this: El, event: CustomEvent<El>) => any,
 			options?: AddEventListenerOptions
 		) : EE;
-	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
+	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
 	disconnected<
 		EE extends ddeElementAddon<SupportedElement>,
 		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
@@ -151,7 +185,7 @@ interface On{
 			listener: (this: El, event: CustomEvent<void>) => any,
 			options?: AddEventListenerOptions
 		) : EE;
-	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
+	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
 	attributeChanged<
 		EE extends ddeElementAddon<SupportedElement>,
 		El extends ( EE extends ddeElementAddon<infer El> ? El : never )
@@ -162,7 +196,12 @@ interface On{
 }
 export const on: On;
 
-type Scope= { scope: Node | Function | Object, host: ddeElementAddon<any>, custom_element: false | HTMLElement, prevent: boolean }
+type Scope= {
+	scope: Node | Function | Object,
+	host: ddeElementAddon<any>,
+	custom_element: false | HTMLElement,
+	prevent: boolean
+};
 /** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
 export const scope: {
 	current: Scope,
@@ -176,7 +215,7 @@ export const scope: {
 	 * — `scope.host(on.connected(console.log))`.
 	 * */
 	host: (...addons: ddeElementAddon<SupportedElement>[])=> HTMLElement,
-	
+
 	state: Scope[],
 	/** Adds new child scope. All attributes are inherited by default. */
 	push(scope: Partial<Scope>): ReturnType<Array<Scope>["push"]>,
@@ -202,12 +241,12 @@ export function observedAttributes(custom_element: HTMLElement): Record<string,
 /* TypeScript MEH */
 declare global{
 	type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
-	
+
 	interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
 	interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
 	interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }
 	interface ddeMathMLElement extends MathMLElement{ append: ddeAppend<ddeMathMLElement>; }
-	
+
 	interface ddeHTMLElementTagNameMap {
 		"a": ddeHTMLAnchorElement;
 		"area": ddeHTMLAreaElement;
@@ -350,6 +389,7 @@ declare global{
 	}
 }
 
+// editorconfig-checker-disable
 interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend<ddeHTMLAnchorElement>; }
 interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend<ddeHTMLAreaElement>; }
 interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend<ddeHTMLAudioElement>; }
@@ -476,4 +516,5 @@ interface ddeSVGTextPathElement extends SVGTextPathElement{ append: ddeAppend<dd
 interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend<ddeSVGTitleElement>; }
 interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend<ddeSVGTSpanElement>; }
 interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend<ddeSVGUseElement>; }
-interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; }
\ No newline at end of file
+interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; }
+// editorconfig-checker-enable
\ No newline at end of file
diff --git a/dist/esm.js b/dist/esm.js
index a5e5b75..72391e8 100644
--- a/dist/esm.js
+++ b/dist/esm.js
@@ -1,5 +1,5 @@
 // src/signals-common.js
-var C = {
+var m = {
 	isSignal(t) {
 		return !1;
 	},
@@ -8,15 +8,15 @@ var C = {
 	}
 };
 function V(t, e = !0) {
-	return e ? Object.assign(C, t) : (Object.setPrototypeOf(t, C), t);
+	return e ? Object.assign(m, t) : (Object.setPrototypeOf(t, m), t);
 }
 function L(t) {
-	return C.isPrototypeOf(t) && t !== C ? t : C;
+	return m.isPrototypeOf(t) && t !== m ? t : m;
 }
 
 // src/helpers.js
 var q = (...t) => Object.prototype.hasOwnProperty.call(...t);
-function E(t) {
+function x(t) {
 	return typeof t > "u";
 }
 function N(t, e) {
@@ -48,14 +48,14 @@ var a = {
 	M: globalThis.MutationObserver
 };
 function K(t, e, n) {
-	if (Reflect.set(t, e, n), !!E(n)) {
+	if (Reflect.set(t, e, n), !!x(n)) {
 		if (Reflect.deleteProperty(t, e), t instanceof a.H && t.getAttribute(e) === "undefined")
 			return t.removeAttribute(e);
 		if (Reflect.get(t, e) === "undefined")
 			return Reflect.set(t, e, "");
 	}
 }
-var x = "__dde_lifecyclesToEvents", g = "dde:connected", y = "dde:disconnected", D = "dde:attributeChanged";
+var y = "__dde_lifecyclesToEvents", g = "dde:connected", w = "dde:disconnected", D = "dde:attributeChanged";
 
 // src/dom.js
 var v = [{
@@ -100,15 +100,17 @@ function j(t, e, ...n) {
 	let r = L(this), o = 0, c, f;
 	switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {
 		case typeof t == "function": {
-			o = 1, S.push({ scope: t, host: (...b) => b.length ? (o === 1 ? n.unshift(...b) : b.forEach((h) => h(f)), void 0) : f }), c = t(e || void 0);
-			let d = c instanceof a.F;
+			o = 1;
+			let d = (...l) => l.length ? (o === 1 ? n.unshift(...l) : l.forEach((E) => E(f)), void 0) : f;
+			S.push({ scope: t, host: d }), c = t(e || void 0);
+			let p = c instanceof a.F;
 			if (c.nodeName === "#comment") break;
-			let p = j.mark({
+			let b = j.mark({
 				type: "component",
 				name: t.name,
-				host: d ? "this" : "parentElement"
+				host: p ? "this" : "parentElement"
 			});
-			c.prepend(p), d && (f = p);
+			c.prepend(b), p && (f = b);
 			break;
 		}
 		case t === "#text":
@@ -125,6 +127,11 @@ function j(t, e, ...n) {
 	}
 	return Q(c), f || (f = c), n.forEach((d) => d(f)), o && S.pop(), o = 2, c;
 }
+j.mark = function(t, e = !1) {
+	t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
+	let n = e ? "" : "/", r = a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`);
+	return e && (r.end = a.D.createComment("</dde:mark>")), r;
+};
 function bt(t, e, n) {
 	typeof e != "object" && (n = e, e = t);
 	let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((f, d) => Reflect.set(f, d.name || r, d) && f, {}), c = q(o, r);
@@ -133,13 +140,13 @@ function bt(t, e, n) {
 			if (p[0] === e) return f.apply(t, p);
 			if (!p.length) return t;
 			let b = a.D.createDocumentFragment();
-			for (let h of p) {
-				if (!h || !h.slot) {
-					c && b.append(h);
+			for (let l of p) {
+				if (!l || !l.slot) {
+					c && b.append(l);
 					continue;
 				}
-				let A = h.slot, _ = o[A];
-				tt(h, "remove", "slot"), _ && (X(_, h, n), Reflect.deleteProperty(o, A));
+				let E = l.slot, _ = o[E];
+				tt(l, "remove", "slot"), _ && (X(_, l, n), Reflect.deleteProperty(o, E));
 			}
 			return c && (o[r].replaceWith(b), Reflect.deleteProperty(o, r)), t.append = f, t;
 		}
@@ -152,16 +159,14 @@ function bt(t, e, n) {
 function X(t, e, n) {
 	n && n(t, e);
 	try {
-		t.replaceWith(O(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));
+		t.replaceWith(O(e, {
+			className: [e.className, t.className],
+			dataset: { ...t.dataset }
+		}));
 	} catch {
 		t.replaceWith(e);
 	}
 }
-j.mark = function(t, e = !1) {
-	t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
-	let n = e ? "" : "/", r = a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`);
-	return e && (r.end = a.D.createComment("</dde:mark>")), r;
-};
 function gt(t) {
 	let e = this;
 	return function(...r) {
@@ -221,16 +226,13 @@ function Y(t, e) {
 		(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)
 	), t;
 }
-function vt(t) {
-	return Array.from(t.children).forEach((e) => e.remove()), t;
-}
 function tt(t, e, n, r) {
 	return t instanceof a.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r);
 }
 function et(t, e) {
 	if (!(e in t)) return !1;
 	let n = I(t, e);
-	return !E(n.set);
+	return !x(n.set);
 }
 function I(t, e) {
 	if (t = Object.getPrototypeOf(t), !t) return {};
@@ -247,18 +249,18 @@ function Z(t) {
 	return Array.isArray(t) ? t.filter(Boolean).join(" ") : t;
 }
 function nt(t, e, n, r) {
-	return t[(E(r) ? "remove" : "set") + e](n, Z(r));
+	return t[(x(r) ? "remove" : "set") + e](n, Z(r));
 }
 function rt(t, e, n, r, o = null) {
-	return t[(E(r) ? "remove" : "set") + e + "NS"](o, n, Z(r));
+	return t[(x(r) ? "remove" : "set") + e + "NS"](o, n, Z(r));
 }
 function H(t, e, n) {
-	if (Reflect.set(t, e, n), !!E(n))
+	if (Reflect.set(t, e, n), !!x(n))
 		return Reflect.deleteProperty(t, e);
 }
 
 // src/events-observer.js
-var w = a.M ? ot() : new Proxy({}, {
+var A = a.M ? ot() : new Proxy({}, {
 	get() {
 		return () => {
 		};
@@ -268,11 +270,11 @@ function ot() {
 	let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(u) {
 		for (let s of u)
 			if (s.type === "childList") {
-				if (h(s.addedNodes, !0)) {
+				if (l(s.addedNodes, !0)) {
 					i();
 					continue;
 				}
-				A(s.removedNodes, !0) && i();
+				E(s.removedNodes, !0) && i();
 			}
 	}, r = new a.M(n(d));
 	return {
@@ -334,52 +336,52 @@ function ot() {
 			s === i || !(s instanceof Node) || i.contains(s) && u.push(s);
 		return u;
 	}
-	function h(i, u) {
+	function l(i, u) {
 		let s = !1;
-		for (let l of i) {
-			if (u && b(l).then(h), !t.has(l)) continue;
-			let m = t.get(l);
-			m.length_c && (l.dispatchEvent(new Event(g)), m.connected = /* @__PURE__ */ new WeakSet(), m.length_c = 0, m.length_d || t.delete(l), s = !0);
+		for (let h of i) {
+			if (u && b(h).then(l), !t.has(h)) continue;
+			let C = t.get(h);
+			C.length_c && (h.dispatchEvent(new Event(g)), C.connected = /* @__PURE__ */ new WeakSet(), C.length_c = 0, C.length_d || t.delete(h), s = !0);
 		}
 		return s;
 	}
-	function A(i, u) {
+	function E(i, u) {
 		let s = !1;
-		for (let l of i)
-			u && b(l).then(A), !(!t.has(l) || !t.get(l).length_d) && ((globalThis.queueMicrotask || setTimeout)(_(l)), s = !0);
+		for (let h of i)
+			u && b(h).then(E), !(!t.has(h) || !t.get(h).length_d) && ((globalThis.queueMicrotask || setTimeout)(_(h)), s = !0);
 		return s;
 	}
 	function _(i) {
 		return () => {
-			i.isConnected || (i.dispatchEvent(new Event(y)), t.delete(i));
+			i.isConnected || (i.dispatchEvent(new Event(w)), t.delete(i));
 		};
 	}
 }
 
 // src/customElement.js
-function Dt(t, e, n, r = it) {
+function mt(t, e, n, r = it) {
 	S.push({
 		scope: t,
 		host: (...f) => f.length ? f.forEach((d) => d(t)) : t
 	}), typeof r == "function" && (r = r.call(t, t));
-	let o = t[x];
+	let o = t[y];
 	o || ct(t);
 	let c = n.call(t, r);
-	return o || t.dispatchEvent(new Event(g)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(y, w.observe(e), { once: !0 }), S.pop(), e.append(c);
+	return o || t.dispatchEvent(new Event(g)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(w, A.observe(e), { once: !0 }), S.pop(), e.append(c);
 }
 function ct(t) {
 	return k(t.prototype, "connectedCallback", function(e, n, r) {
 		e.apply(n, r), n.dispatchEvent(new Event(g));
 	}), k(t.prototype, "disconnectedCallback", function(e, n, r) {
 		e.apply(n, r), (globalThis.queueMicrotask || setTimeout)(
-			() => !n.isConnected && n.dispatchEvent(new Event(y))
+			() => !n.isConnected && n.dispatchEvent(new Event(w))
 		);
 	}), k(t.prototype, "attributeChangedCallback", function(e, n, r) {
 		let [o, , c] = r;
 		n.dispatchEvent(new CustomEvent(D, {
 			detail: [o, c]
 		})), e.apply(n, r);
-	}), t.prototype[x] = !0, t;
+	}), t.prototype[y] = !0, t;
 }
 function k(t, e, n) {
 	t[e] = new Proxy(t[e] || (() => {
@@ -390,7 +392,7 @@ function it(t) {
 }
 
 // src/events.js
-function _t(t, e, n) {
+function Rt(t, e, n) {
 	return e || (e = {}), function(o, ...c) {
 		n && (c.unshift(o), o = typeof n == "function" ? n() : n);
 		let f = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
@@ -405,12 +407,12 @@ function R(t, e, n) {
 var G = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
 R.connected = function(t, e) {
 	return e = G(e), function(r) {
-		return r.addEventListener(g, t, e), r[x] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => w.offConnected(r, t)) && w.onConnected(r, t), r);
+		return r.addEventListener(g, t, e), r[y] ? r : r.isConnected ? (r.dispatchEvent(new Event(g)), r) : (N(e.signal, () => A.offConnected(r, t)) && A.onConnected(r, t), r);
 	};
 };
 R.disconnected = function(t, e) {
 	return e = G(e), function(r) {
-		return r.addEventListener(y, t, e), r[x] || N(e.signal, () => w.offDisconnected(r, t)) && w.onDisconnected(r, t), r;
+		return r.addEventListener(w, t, e), r[y] || N(e.signal, () => A.offDisconnected(r, t)) && A.onDisconnected(r, t), r;
 	};
 };
 var W = /* @__PURE__ */ new WeakMap();
@@ -422,7 +424,7 @@ R.disconnectedAsAbort = function(t) {
 var st = /* @__PURE__ */ new WeakSet();
 R.attributeChanged = function(t, e) {
 	return typeof e != "object" && (e = {}), function(r) {
-		if (r.addEventListener(D, t, e), r[x] || st.has(r) || !a.M) return r;
+		if (r.addEventListener(D, t, e), r[y] || st.has(r) || !a.M) return r;
 		let o = new a.M(function(f) {
 			for (let { attributeName: d, target: p } of f)
 				p.dispatchEvent(
@@ -439,13 +441,12 @@ export {
 	Y as classListDeclarative,
 	j as createElement,
 	gt as createElementNS,
-	Dt as customElementRender,
+	mt as customElementRender,
 	ct as customElementWithDDE,
-	_t as dispatchEvent,
+	Rt as dispatchEvent,
 	j as el,
 	gt as elNS,
 	tt as elementAttribute,
-	vt as empty,
 	ct as lifecyclesToEvents,
 	it as observedAttributes,
 	R as on,
diff --git a/docs/components/examples/scopes/cleaning.js b/docs/components/examples/scopes/cleaning.js
index 923b331..f648322 100644
--- a/docs/components/examples/scopes/cleaning.js
+++ b/docs/components/examples/scopes/cleaning.js
@@ -1,4 +1,6 @@
-import { el, empty, on } from "deka-dom-el";
+import { el, on } from "deka-dom-el";
+/** @param {HTMLElement} el */
+const empty= el=> Array.from(el.children).forEach(c=> c.remove());
 document.body.append(
 	el(component),
 	el("button", {
diff --git a/index.d.ts b/index.d.ts
index c5fc42b..d3ec563 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -8,7 +8,7 @@ type SupportedElement=
 	|	CustomElementTagNameMap[keyof CustomElementTagNameMap]
 declare global {
 	type ddeComponentAttributes= Record<any, any> | undefined;
-	type ddeElementAddon<El extends SupportedElement | DocumentFragment>= (element: El)=> El | void;
+	type ddeElementAddon<El extends SupportedElement | DocumentFragment | Node>= (element: El)=> any;
 }
 type PascalCase= `${Capitalize<string>}${string}`;
 type AttrsModified= {
@@ -27,6 +27,13 @@ type AttrsModified= {
 	 * By default simiral to `className`, but also supports `string[]`
 	 * */
 	className: string | (string|boolean|undefined|ddeSignal<string|boolean|undefined>)[];
+	/**
+	 * Used by the dataset HTML attribute to represent data for custom attributes added to elements.
+	 * Values are converted to string (see {@link DOMStringMap}).
+	 *
+	 * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMStringMap)
+	 * */
+	dataset: Record<string,string|number|ddeSignal<string|number>>,
 	/**
 	 * Sets `aria-*` simiraly to `dataset`
 	 * */
@@ -62,11 +69,10 @@ type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagName
 type textContent= string | ddeSignal<string>;
 export function el<
 	TAG extends keyof ExtendedHTMLElementTagNameMap,
-	EL extends ExtendedHTMLElementTagNameMap[TAG]
 >(
 	tag_name: TAG,
-	attrs?: ElementAttributes<EL> | textContent,
-	...addons: ddeElementAddon<EL>[]
+	attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | textContent,
+	...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]>[], // TODO: for now addons must have the same element
 ): TAG extends keyof ddeHTMLElementTagNameMap ? ddeHTMLElementTagNameMap[TAG] : ddeHTMLElement
 export function el(
 	tag_name?: "<>",
@@ -95,8 +101,8 @@ export function elNS(
 	EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ),
 >(
 	tag_name: TAG,
-	attrs?: ElementAttributes<EL> | textContent,
-	...addons: ddeElementAddon<EL>[]
+	attrs?: ElementAttributes<NoInfer<EL>> | textContent,
+	...addons: ddeElementAddon<NoInfer<EL>>[]
 )=>  TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement
 export function elNS(
 	namespace: "http://www.w3.org/1998/Math/MathML"
@@ -108,7 +114,7 @@ export function elNS(
 	attrs?: string | textContent | Partial<{
 		[key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean
 	}>,
-	...addons: ddeElementAddon<EL>[]
+	...addons: ddeElementAddon<NoInfer<EL>>[]
 )=> ddeMathMLElement
 export function elNS(
 	namespace: string
@@ -149,18 +155,18 @@ export function dispatchEvent(
 interface On{
 	/** Listens to the DOM event. See {@link Document.addEventListener} */
 	<
-		EE extends ddeElementAddon<SupportedElement>,
-		El extends ( EE extends ddeElementAddon<infer El> ? El : never ),
-		Event extends keyof DocumentEventMap>(
+		Event extends keyof DocumentEventMap,
+		EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
+		>(
 			type: Event,
-			listener: (this: El, ev: DocumentEventMap[Event]) => any,
+			listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: DocumentEventMap[Event]) => any,
 			options?: AddEventListenerOptions
 		) : EE;
 	<
-		EE extends ddeElementAddon<SupportedElement>,
-		El extends ( EE extends ddeElementAddon<infer El> ? El : never )>(
+		EE extends ddeElementAddon<SupportedElement>= ddeElementAddon<HTMLElement>,
+		>(
 			type: string,
-			listener: (this: El, ev: Event | CustomEvent ) => any,
+			listener: (this: EE extends ddeElementAddon<infer El> ? El : never, ev: Event | CustomEvent ) => any,
 			options?: AddEventListenerOptions
 		) : EE;
 	/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */// editorconfig-checker-disable-line
diff --git a/src/dom.js b/src/dom.js
index 7ed8dc1..28c4c64 100644
--- a/src/dom.js
+++ b/src/dom.js
@@ -69,6 +69,19 @@ export function createElement(tag, attributes, ...addons){
 	scoped= 2;
 	return el;
 }
+/**
+ * @param { { type: "component", name: string, host: "this" | "parentElement" } | { type: "reactive" | "later" } } attrs
+ * @param {boolean} [is_open=false]
+ * */
+createElement.mark= function(attrs, is_open= false){
+	attrs= Object.entries(attrs).map(([ n, v ])=> n+`="${v}"`).join(" ");
+	const end= is_open ? "" : "/";
+	const out= env.D.createComment(`<dde:mark ${attrs}${env.ssr}${end}>`);
+	if(is_open) out.end= env.D.createComment("</dde:mark>");
+	return out;
+};
+export { createElement as el };
+
 import { hasOwn } from "./helpers.js";
 /** @param {HTMLElement} element @param {HTMLElement} [root] */
 export function simulateSlots(element, root, mapper){
@@ -117,18 +130,6 @@ function simulateSlotReplace(slot, element, mapper){
 		dataset: { ...slot.dataset } })); }
 	catch(_){ slot.replaceWith(element); }
 }
-/**
- * @param { { type: "component", name: string, host: "this" | "parentElement" } | { type: "reactive" | "later" } } attrs
- * @param {boolean} [is_open=false]
- * */
-createElement.mark= function(attrs, is_open= false){
-	attrs= Object.entries(attrs).map(([ n, v ])=> n+`="${v}"`).join(" ");
-	const end= is_open ? "" : "/";
-	const out= env.D.createComment(`<dde:mark ${attrs}${env.ssr}${end}>`);
-	if(is_open) out.end= env.D.createComment("</dde:mark>");
-	return out;
-};
-export { createElement as el };
 
 //const namespaceHelper= ns=> ns==="svg" ? "http://www.w3.org/2000/svg" : ns;
 export function createElementNS(ns){
@@ -198,10 +199,6 @@ export function classListDeclarative(element, toggle){
 			element.classList.toggle(class_name, val===-1 ? undefined : Boolean(val)));
 	return element;
 }
-export function empty(el){
-	Array.from(el.children).forEach(el=> el.remove());
-	return el;
-}
 export function elementAttribute(element, op, key, value){
 	if(element instanceof env.H)
 		return element[op+"Attribute"](key, value);