🚀 use native listeners & scope

bs/build.js

@@ -25,7 +25,7 @@ function toDDE(file, out){
 	const name= "dde";
 	echo(`\n  ${out} (${file} → globalThis.${name})\n`);
 	
-	let content= s.cat(file).toString().split("export {");
+	let content= s.cat(file).toString().split(/export ?{/);
 	content.splice(1, 0, `\nglobalThis.${name}= {`);
 	content[2]= content[2].replace(/^(\t*)(.*) as ([^,\n]*)(,?)$/mg, "$1$3: $2$4");
 	s.echo([

dist/dde-with-signals.js

@@ -1,7 +1,7 @@
 //deka-dom-el library is available via global namespace `dde`
 (()=> {
 	// src/signals-common.js
-	var E = {
+	var w = {
 		isSignal(e) {
 			return !1;
 		},
@@ -9,22 +9,22 @@
 			return n;
 		}
 	};
-	function C(e, t = !0) {
-		return t ? Object.assign(E, e) : (Object.setPrototypeOf(e, E), e);
+	function A(e, t = !0) {
+		return t ? Object.assign(w, e) : (Object.setPrototypeOf(e, w), e);
 	}
-	function x(e) {
-		return E.isPrototypeOf(e) && e !== E ? e : E;
+	function S(e) {
+		return w.isPrototypeOf(e) && e !== w ? e : w;
 	}
 	
 	// src/helpers.js
 	function m(e) {
 		return typeof e > "u";
 	}
-	function N(e) {
+	function D(e) {
 		let t = typeof e;
 		return t !== "object" ? t : e === null ? "null" : Object.prototype.toString.call(e);
 	}
-	function L(e, t) {
+	function C(e, t) {
 		if (!e || !(e instanceof AbortSignal))
 			return !0;
 		if (!e.aborted)
@@ -34,8 +34,8 @@
 	}
 	
 	// src/dom-common.js
-	var P = { setDeleteAttr: W };
-	function W(e, t, n) {
+	var P = { setDeleteAttr: q };
+	function q(e, t, n) {
 		if (Reflect.set(e, t, n), !!m(n)) {
 			if (Reflect.deleteProperty(e, t), e instanceof HTMLElement && e.getAttribute(t) === "undefined")
 				return e.removeAttribute(t);
@@ -45,77 +45,85 @@
 	}
 	
 	// src/dom.js
-	var w = "html";
-	function oe(e) {
-		return w = e === "svg" ? "http://www.w3.org/2000/svg" : e, {
+	var b = "html", F = {
+		elNamespace(e) {
+			return b = e === "svg" ? "http://www.w3.org/2000/svg" : e, {
 				append(...t) {
-				return w = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t);
+					return b = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t);
 				}
 			};
+		},
+		get namespace() {
+			return b;
+		},
+		set namespace(e) {
+			return b = e;
 		}
-	function ce(e, t, ...n) {
-		let r = this, o = x(this), c;
+	}, ce = Object.assign((e) => e ? e(document.body) : document.body, F);
+	function ie(e, t, ...n) {
+		let r = this, o = S(this), c;
 		switch ((Object(t) !== t || o.isSignal(t)) && (t = { textContent: t }), !0) {
 			case typeof e == "function": {
-				c = e(t || void 0, (s) => s ? (n.unshift(s), void 0) : c);
+				let l = Object.assign((u) => u ? (n.unshift(u), void 0) : c, F);
+				c = e(t || void 0, l), b = "html";
 				break;
 			}
 			case e === "#text":
-				c = S.call(r, document.createTextNode(""), t);
+				c = y.call(r, document.createTextNode(""), t);
 				break;
 			case e === "<>":
-				c = S.call(r, document.createDocumentFragment(), t);
+				c = y.call(r, document.createDocumentFragment(), t);
 				break;
-			case w !== "html":
-				c = S.call(r, document.createElementNS(w, e), t);
+			case b !== "html":
+				c = y.call(r, document.createElementNS(b, e), t);
 				break;
 			case !c:
-				c = S.call(r, document.createElement(e), t);
+				c = y.call(r, document.createElement(e), t);
 		}
-		return n.forEach((p) => p(c)), c;
+		return n.forEach((l) => l(c)), c;
 	}
 	var { setDeleteAttr: j } = P;
-	function S(e, ...t) {
-		let n = this, r = x(this);
+	function y(e, ...t) {
+		let n = this, r = S(this);
 		if (!t.length)
 			return e;
 		let c = (e instanceof SVGElement ? I : H).bind(null, e, "Attribute");
-		return Object.entries(Object.assign({}, ...t)).forEach(function p([s, a]) {
-			a = r.processReactiveAttribute(e, s, a, p);
-			let [b] = s;
-			if (b === "=")
-				return c(s.slice(1), a);
-			if (b === ".")
-				return F(e, s.slice(1), a);
-			if (/(aria|data)([A-Z])/.test(s))
-				return s = s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), c(s, a);
-			switch (s === "className" && (s = "class"), s) {
+		return Object.entries(Object.assign({}, ...t)).forEach(function l([u, a]) {
+			a = r.processReactiveAttribute(e, u, a, l);
+			let [v] = u;
+			if (v === "=")
+				return c(u.slice(1), a);
+			if (v === ".")
+				return W(e, u.slice(1), a);
+			if (/(aria|data)([A-Z])/.test(u))
+				return u = u.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), c(u, a);
+			switch (u === "className" && (u = "class"), u) {
 				case "xlink:href":
-					return c(s, a, "http://www.w3.org/1999/xlink");
+					return c(u, a, "http://www.w3.org/1999/xlink");
 				case "textContent":
-					return j(e, s, a);
+					return j(e, u, a);
 				case "style":
 					if (typeof a != "object")
 						break;
 				case "dataset":
-					return _(r, a, F.bind(null, e[s]));
+					return L(r, a, W.bind(null, e[u]));
 				case "ariaset":
-					return _(r, a, (v, i) => c("aria-" + v, i));
+					return L(r, a, (x, i) => c("aria-" + x, i));
 				case "classList":
 					return B.call(n, e, a);
 			}
-			return G(e, s) ? j(e, s, a) : c(s, a);
+			return G(e, u) ? j(e, u, a) : c(u, a);
 		}), e;
 	}
 	function B(e, t) {
-		let n = x(this);
-		return _(
+		let n = S(this);
+		return L(
 			n,
 			t,
 			(r, o) => e.classList.toggle(r, o === -1 ? void 0 : !!o)
 		), e;
 	}
-	function se(e) {
+	function fe(e) {
 		return Array.from(e.children).forEach((t) => t.remove()), e;
 	}
 	function G(e, t) {
@@ -130,10 +138,10 @@
 		let n = Object.getOwnPropertyDescriptor(e, t);
 		return n || M(e, t);
 	}
-	function _(e, t, n) {
+	function L(e, t, n) {
 		if (!(typeof t != "object" || t === null))
 			return Object.entries(t).forEach(function([o, c]) {
-				o && (c = e.processReactiveAttribute(t, o, c, (p) => n(...p)), n(o, c));
+				o && (c = e.processReactiveAttribute(t, o, c, (l) => n(...l)), n(o, c));
 			});
 	}
 	function z(e) {
@@ -145,13 +153,13 @@
 	function I(e, t, n, r, o = null) {
 		return e[(m(r) ? "remove" : "set") + t + "NS"](o, n, z(r));
 	}
-	function F(e, t, n) {
+	function W(e, t, n) {
 		if (Reflect.set(e, t, n), !!m(n))
 			return Reflect.deleteProperty(e, t);
 	}
 	
 	// src/events.js
-	function ae(e, t, ...n) {
+	function de(e, t, ...n) {
 		let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t);
 		return e.dispatchEvent(r);
 	}
@@ -162,92 +170,99 @@
 	}
 	var O = J();
 	T.connected = function(e, t) {
-		return function(r) {
-			return typeof r.connectedCallback == "function" ? (r.addEventListener("dde:connected", e, t), r) : (L(t && t.signal, () => O.offConnected(r, e)) && (r.isConnected ? e(new Event("dde:connected")) : O.onConnected(r, e)), r);
+		return typeof t != "object" && (t = {}), t.once = !0, function(r) {
+			return r.addEventListener("dde:connected", e, t), typeof r.connectedCallback == "function" ? r : r.isConnected ? (r.dispatchEvent(new Event("dde:connected")), r) : (C(t.signal, () => O.offConnected(r, e)) && O.onConnected(r, e), r);
 		};
 	};
 	T.disconnected = function(e, t) {
-		return function(r) {
-			return typeof r.disconnectedCallback == "function" ? (r.addEventListener("dde:disconnected", e, t), r) : (L(t && t.signal, () => O.offDisconnected(r, e)) && O.onDisconnected(r, e), r);
+		return typeof t != "object" && (t = {}), t.once = !0, function(r) {
+			return r.addEventListener("dde:disconnected", e, t), typeof r.disconnectedCallback == "function" || C(t.signal, () => O.offDisconnected(r, e)) && O.onDisconnected(r, e), r;
 		};
 	};
 	function J() {
 		let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(i) {
-			for (let f of i)
-				if (f.type === "childList") {
-					if (b(f.addedNodes, !0)) {
-						p();
+			for (let s of i)
+				if (s.type === "childList") {
+					if (v(s.addedNodes, !0)) {
+						l();
 						continue;
 					}
-					v(f.removedNodes, !0) && p();
+					x(s.removedNodes, !0) && l();
 				}
 		});
 		return {
-			onConnected(i, f) {
-				c(), o(i).connected.push(f);
+			onConnected(i, s) {
+				c();
+				let f = o(i);
+				f.connected.has(s) || (f.connected.add(s), f.length_c += 1);
 			},
-			offConnected(i, f) {
+			offConnected(i, s) {
 				if (!e.has(i))
 					return;
-				let u = e.get(i), l = u.connected;
-				l.splice(l.indexOf(f), 1), r(i, u);
+				let f = e.get(i);
+				f.connected.has(s) && (f.connected.delete(s), f.length_c -= 1, r(i, f));
 			},
-			onDisconnected(i, f) {
-				c(), o(i).disconnected.push(f);
+			onDisconnected(i, s) {
+				c();
+				let f = o(i);
+				f.disconnected.has(s) || (f.disconnected.add(s), f.length_d += 1);
 			},
-			offDisconnected(i, f) {
+			offDisconnected(i, s) {
 				if (!e.has(i))
 					return;
-				let u = e.get(i), l = u.disconnected;
-				l.splice(l.indexOf(f), 1), r(i, u);
+				let f = e.get(i);
+				f.disconnected.has(s) && (f.disconnected.delete(s), f.length_d -= 1, r(i, f));
 			}
 		};
-		function r(i, f) {
-			f.connected.length || f.disconnected.length || (e.delete(i), p());
+		function r(i, s) {
+			s.length_c || s.length_d || (e.delete(i), l());
 		}
 		function o(i) {
 			if (e.has(i))
 				return e.get(i);
-			let f = { connected: [], disconnected: [] };
-			return e.set(i, f), f;
+			let s = {
+				connected: /* @__PURE__ */ new WeakSet(),
+				length_c: 0,
+				disconnected: /* @__PURE__ */ new WeakSet(),
+				length_d: 0
+			};
+			return e.set(i, s), s;
 		}
 		function c() {
 			t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 }));
 		}
-		function p() {
+		function l() {
 			!t || e.size || (t = !1, n.disconnect());
 		}
-		function s() {
+		function u() {
 			return new Promise(function(i) {
 				(requestIdleCallback || requestAnimationFrame)(i);
 			});
 		}
 		async function a(i) {
-			e.size > 30 && await s();
-			let f = [];
+			e.size > 30 && await u();
+			let s = [];
 			if (!(i instanceof Node))
-				return f;
-			for (let u of e.keys())
-				u === i || !(u instanceof Node) || i.contains(u) && f.push(u);
+				return s;
+			for (let f of e.keys())
+				f === i || !(f instanceof Node) || i.contains(f) && s.push(f);
+			return s;
+		}
+		function v(i, s) {
+			let f = !1;
+			for (let p of i) {
+				if (s && a(p).then(v), !e.has(p))
+					continue;
+				let E = e.get(p);
+				E.length_c && (p.dispatchEvent(new Event("dde:connected")), E.connected = /* @__PURE__ */ new WeakSet(), E.length_c = 0, E.length_d || e.delete(p), f = !0);
+			}
 			return f;
 		}
-		function b(i, f) {
-			for (let u of i) {
-				if (f && a(u).then(b), !e.has(u))
-					continue;
-				let l = e.get(u);
-				return l.connected.forEach((A) => A(u)), l.connected.length = 0, l.disconnected.length || e.delete(u), !0;
-			}
-			return !1;
-		}
-		function v(i, f) {
-			for (let u of i) {
-				if (f && a(u).then(v), !e.has(u))
-					continue;
-				let l = e.get(u);
-				return l.disconnected.forEach((A) => A(u)), l.connected.length = 0, l.disconnected.length = 0, e.delete(u), !0;
-			}
-			return !1;
+		function x(i, s) {
+			let f = !1;
+			for (let p of i)
+				s && a(p).then(x), !(!e.has(p) || !e.get(p).length_d) && (p.dispatchEvent(new Event("dde:disconnected")), e.delete(p), f = !0);
+			return f;
 		}
 	}
 	
@@ -261,7 +276,7 @@
 	
 	// src/signals-lib.js
 	var d = Symbol.for("Signal");
-	function y(e) {
+	function _(e) {
 		try {
 			return Reflect.has(e, d);
 		} catch {
@@ -272,10 +287,10 @@
 	function g(e, t) {
 		if (typeof e != "function")
 			return U(e, t);
-		if (y(e))
+		if (_(e))
 			return e;
 		let n = U(""), r = () => n(e());
-		return h.set(r, /* @__PURE__ */ new Set([n])), k(r), n;
+		return h.set(r, /* @__PURE__ */ new Set([n])), K(r), n;
 	}
 	g.action = function(e, t, ...n) {
 		let r = e[d], { actions: o } = r;
@@ -290,7 +305,7 @@
 		if (!(o && o.aborted)) {
 			if (Array.isArray(t))
 				return t.forEach((c) => e(c, n, r));
-			D(t, n), o && o.addEventListener("abort", () => q(t, n));
+			N(t, n), o && o.addEventListener("abort", () => k(t, n));
 		}
 	};
 	g.symbols = {
@@ -315,26 +330,26 @@
 	g.el = function(e, t) {
 		let n = document.createComment("<#reactive>"), r = document.createComment("</#reactive>"), o = document.createDocumentFragment();
 		o.append(n, r);
-		let c = (p) => {
+		let c = (l) => {
 			if (!n.parentNode || !r.parentNode)
-				return q(e, c);
-			let s = t(p);
-			Array.isArray(s) || (s = [s]);
+				return k(e, c);
+			let u = t(l);
+			Array.isArray(u) || (u = [u]);
 			let a = n;
 			for (; (a = n.nextSibling) !== r; )
 				a.remove();
-			n.after(...s);
+			n.after(...u);
 		};
-		return D(e, c), c(e()), o;
+		return N(e, c), c(e()), o;
 	};
 	var $ = {
-		isSignal: y,
+		isSignal: _,
 		processReactiveAttribute(e, t, n, r) {
-			return y(n) ? (D(n, (o) => r([t, o])), n()) : n;
+			return _(n) ? (N(n, (o) => r([t, o])), n()) : n;
 		}
 	};
 	function U(e, t) {
-		let n = (...r) => r.length ? X(n, r[0]) : Q(n);
+		let n = (...r) => r.length ? Y(n, r[0]) : X(n);
 		return Z(n, e, t);
 	}
 	var V = Object.assign(/* @__PURE__ */ Object.create(null), {
@@ -343,59 +358,59 @@
 		}
 	});
 	function Z(e, t, n) {
-		return N(n) !== "[object Object]" && (n = {}), e[d] = {
+		return D(n) !== "[object Object]" && (n = {}), e[d] = {
 			value: t,
 			actions: n,
 			listeners: /* @__PURE__ */ new Set()
 		}, e.toJSON = () => e(), Object.setPrototypeOf(e[d], V), e;
 	}
 	var R = [];
-	function k(e) {
+	function K(e) {
 		let t = function() {
 			R.push(t), e(), R.pop();
 		};
 		h.has(e) && (h.set(t, h.get(e)), h.delete(e)), t();
 	}
-	function K() {
+	function Q() {
 		return R[R.length - 1];
 	}
-	function Q(e) {
+	function X(e) {
 		if (!e[d])
 			return;
-		let { value: t, listeners: n } = e[d], r = K();
+		let { value: t, listeners: n } = e[d], r = Q();
 		return r && n.add(r), h.has(r) && h.get(r).add(e), t;
 	}
-	function X(e, t) {
+	function Y(e, t) {
 		if (!e[d])
 			return;
 		let n = e[d];
 		if (n.value !== t)
 			return n.value = t, n.listeners.forEach((r) => r(t)), t;
 	}
-	function D(e, t) {
+	function N(e, t) {
 		if (e[d])
 			return e[d].listeners.add(t);
 	}
-	function q(e, t) {
+	function k(e, t) {
 		if (e[d])
 			return e[d].listeners.delete(t);
 	}
 	
 	// signals.js
-	C($);
+	A($);
 	
 	globalThis.dde= {
 		S: g,
-		assign: S,
+		assign: y,
 		classListDeclarative: B,
-		createElement: ce,
-		dispatchEvent: ae,
-		el: ce,
-		empty: se,
-		isSignal: y,
-		namespace: oe,
+		createElement: ie,
+		dispatchEvent: de,
+		el: ie,
+		empty: fe,
+		isSignal: _,
 		on: T,
-		registerReactivity: C
+		registerReactivity: A,
+		scope: ce
 	};
 	
 })();

dist/dde.js

@@ -1,26 +1,26 @@
 //deka-dom-el library is available via global namespace `dde`
 (()=> {
 	// src/signals-common.js
-	var g = {
+	var E = {
 		isSignal(e) {
 			return !1;
 		},
-		processReactiveAttribute(e, t, n, r) {
-			return n;
+		processReactiveAttribute(e, t, r, n) {
+			return r;
 		}
 	};
-	function y(e, t = !0) {
-		return t ? Object.assign(g, e) : (Object.setPrototypeOf(e, g), e);
+	function N(e, t = !0) {
+		return t ? Object.assign(E, e) : (Object.setPrototypeOf(e, E), e);
 	}
-	function v(e) {
-		return g.isPrototypeOf(e) && e !== g ? e : g;
+	function m(e) {
+		return E.isPrototypeOf(e) && e !== E ? e : E;
 	}
 	
 	// src/helpers.js
 	function p(e) {
 		return typeof e > "u";
 	}
-	function w(e, t) {
+	function _(e, t) {
 		if (!e || !(e instanceof AbortSignal))
 			return !0;
 		if (!e.aborted)
@@ -30,9 +30,9 @@
 	}
 	
 	// src/dom-common.js
-	var R = { setDeleteAttr: P };
-	function P(e, t, n) {
-		if (Reflect.set(e, t, n), !!p(n)) {
+	var O = { setDeleteAttr: P };
+	function P(e, t, r) {
+		if (Reflect.set(e, t, r), !!p(r)) {
 			if (Reflect.deleteProperty(e, t), e instanceof HTMLElement && e.getAttribute(t) === "undefined")
 				return e.removeAttribute(t);
 			if (Reflect.get(e, t) === "undefined")
@@ -41,230 +41,245 @@
 	}
 	
 	// src/dom.js
-	var x = "html";
-	function H(e) {
-		return x = e === "svg" ? "http://www.w3.org/2000/svg" : e, {
+	var h = "html", S = {
+		elNamespace(e) {
+			return h = e === "svg" ? "http://www.w3.org/2000/svg" : e, {
 				append(...t) {
-				return x = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t);
+					return h = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t);
 				}
 			};
+		},
+		get namespace() {
+			return h;
+		},
+		set namespace(e) {
+			return h = e;
 		}
-	function I(e, t, ...n) {
-		let r = this, u = v(this), i;
+	}, H = Object.assign((e) => e ? e(document.body) : document.body, S);
+	function I(e, t, ...r) {
+		let n = this, u = m(this), i;
 		switch ((Object(t) !== t || u.isSignal(t)) && (t = { textContent: t }), !0) {
 			case typeof e == "function": {
-				i = e(t || void 0, (f) => f ? (n.unshift(f), void 0) : i);
+				let a = Object.assign((f) => f ? (r.unshift(f), void 0) : i, S);
+				i = e(t || void 0, a), h = "html";
 				break;
 			}
 			case e === "#text":
-				i = m.call(r, document.createTextNode(""), t);
+				i = w.call(n, document.createTextNode(""), t);
 				break;
 			case e === "<>":
-				i = m.call(r, document.createDocumentFragment(), t);
+				i = w.call(n, document.createDocumentFragment(), t);
 				break;
-			case x !== "html":
-				i = m.call(r, document.createElementNS(x, e), t);
+			case h !== "html":
+				i = w.call(n, document.createElementNS(h, e), t);
 				break;
 			case !i:
-				i = m.call(r, document.createElement(e), t);
+				i = w.call(n, document.createElement(e), t);
 		}
-		return n.forEach((l) => l(i)), i;
+		return r.forEach((a) => a(i)), i;
 	}
-	var { setDeleteAttr: C } = R;
-	function m(e, ...t) {
-		let n = this, r = v(this);
+	var { setDeleteAttr: R } = O;
+	function w(e, ...t) {
+		let r = this, n = m(this);
 		if (!t.length)
 			return e;
-		let i = (e instanceof SVGElement ? M : F).bind(null, e, "Attribute");
-		return Object.entries(Object.assign({}, ...t)).forEach(function l([f, d]) {
-			d = r.processReactiveAttribute(e, f, d, l);
-			let [h] = f;
-			if (h === "=")
+		let i = (e instanceof SVGElement ? T : M).bind(null, e, "Attribute");
+		return Object.entries(Object.assign({}, ...t)).forEach(function a([f, d]) {
+			d = n.processReactiveAttribute(e, f, d, a);
+			let [g] = f;
+			if (g === "=")
 				return i(f.slice(1), d);
-			if (h === ".")
-				return D(e, f.slice(1), d);
+			if (g === ".")
+				return C(e, f.slice(1), d);
 			if (/(aria|data)([A-Z])/.test(f))
 				return f = f.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), i(f, d);
 			switch (f === "className" && (f = "class"), f) {
 				case "xlink:href":
 					return i(f, d, "http://www.w3.org/1999/xlink");
 				case "textContent":
-					return C(e, f, d);
+					return R(e, f, d);
 				case "style":
 					if (typeof d != "object")
 						break;
 				case "dataset":
-					return O(r, d, D.bind(null, e[f]));
+					return A(n, d, C.bind(null, e[f]));
 				case "ariaset":
-					return O(r, d, (E, o) => i("aria-" + E, o));
+					return A(n, d, (b, c) => i("aria-" + b, c));
 				case "classList":
-					return _.call(n, e, d);
+					return j.call(r, e, d);
 			}
-			return j(e, f) ? C(e, f, d) : i(f, d);
+			return F(e, f) ? R(e, f, d) : i(f, d);
 		}), e;
 	}
-	function _(e, t) {
-		let n = v(this);
-		return O(
-			n,
+	function j(e, t) {
+		let r = m(this);
+		return A(
+			r,
 			t,
-			(r, u) => e.classList.toggle(r, u === -1 ? void 0 : !!u)
+			(n, u) => e.classList.toggle(n, u === -1 ? void 0 : !!u)
 		), e;
 	}
 	function Z(e) {
 		return Array.from(e.children).forEach((t) => t.remove()), e;
 	}
-	function j(e, t) {
+	function F(e, t) {
 		if (!Reflect.has(e, t))
 			return !1;
-		let n = L(e, t);
-		return !p(n.set);
+		let r = y(e, t);
+		return !p(r.set);
 	}
-	function L(e, t) {
+	function y(e, t) {
 		if (e = Object.getPrototypeOf(e), !e)
 			return {};
-		let n = Object.getOwnPropertyDescriptor(e, t);
-		return n || L(e, t);
+		let r = Object.getOwnPropertyDescriptor(e, t);
+		return r || y(e, t);
 	}
-	function O(e, t, n) {
+	function A(e, t, r) {
 		if (!(typeof t != "object" || t === null))
 			return Object.entries(t).forEach(function([u, i]) {
-				u && (i = e.processReactiveAttribute(t, u, i, (l) => n(...l)), n(u, i));
+				u && (i = e.processReactiveAttribute(t, u, i, (a) => r(...a)), r(u, i));
 			});
 	}
-	function S(e) {
+	function D(e) {
 		return Array.isArray(e) ? e.filter(Boolean).join(" ") : e;
 	}
-	function F(e, t, n, r) {
-		return e[(p(r) ? "remove" : "set") + t](n, S(r));
+	function M(e, t, r, n) {
+		return e[(p(n) ? "remove" : "set") + t](r, D(n));
 	}
-	function M(e, t, n, r, u = null) {
-		return e[(p(r) ? "remove" : "set") + t + "NS"](u, n, S(r));
+	function T(e, t, r, n, u = null) {
+		return e[(p(n) ? "remove" : "set") + t + "NS"](u, r, D(n));
 	}
-	function D(e, t, n) {
-		if (Reflect.set(e, t, n), !!p(n))
+	function C(e, t, r) {
+		if (Reflect.set(e, t, r), !!p(r))
 			return Reflect.deleteProperty(e, t);
 	}
 	
 	// src/events.js
-	function J(e, t, ...n) {
-		let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t);
-		return e.dispatchEvent(r);
+	function K(e, t, ...r) {
+		let n = r.length ? new CustomEvent(t, { detail: r[0] }) : new Event(t);
+		return e.dispatchEvent(n);
 	}
-	function N(e, t, n) {
+	function L(e, t, r) {
 		return function(u) {
-			return u.addEventListener(e, t, n), u;
+			return u.addEventListener(e, t, r), u;
 		};
 	}
-	var b = T();
-	N.connected = function(e, t) {
-		return function(r) {
-			return typeof r.connectedCallback == "function" ? (r.addEventListener("dde:connected", e, t), r) : (w(t && t.signal, () => b.offConnected(r, e)) && (r.isConnected ? e(new Event("dde:connected")) : b.onConnected(r, e)), r);
+	var x = U();
+	L.connected = function(e, t) {
+		return typeof t != "object" && (t = {}), t.once = !0, function(n) {
+			return n.addEventListener("dde:connected", e, t), typeof n.connectedCallback == "function" ? n : n.isConnected ? (n.dispatchEvent(new Event("dde:connected")), n) : (_(t.signal, () => x.offConnected(n, e)) && x.onConnected(n, e), n);
 		};
 	};
-	N.disconnected = function(e, t) {
-		return function(r) {
-			return typeof r.disconnectedCallback == "function" ? (r.addEventListener("dde:disconnected", e, t), r) : (w(t && t.signal, () => b.offDisconnected(r, e)) && b.onDisconnected(r, e), r);
+	L.disconnected = function(e, t) {
+		return typeof t != "object" && (t = {}), t.once = !0, function(n) {
+			return n.addEventListener("dde:disconnected", e, t), typeof n.disconnectedCallback == "function" || _(t.signal, () => x.offDisconnected(n, e)) && x.onDisconnected(n, e), n;
 		};
 	};
-	function T() {
-		let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(o) {
-			for (let c of o)
-				if (c.type === "childList") {
-					if (h(c.addedNodes, !0)) {
-						l();
+	function U() {
+		let e = /* @__PURE__ */ new Map(), t = !1, r = new MutationObserver(function(c) {
+			for (let o of c)
+				if (o.type === "childList") {
+					if (g(o.addedNodes, !0)) {
+						a();
 						continue;
 					}
-					E(c.removedNodes, !0) && l();
+					b(o.removedNodes, !0) && a();
 				}
 		});
 		return {
-			onConnected(o, c) {
-				i(), u(o).connected.push(c);
+			onConnected(c, o) {
+				i();
+				let s = u(c);
+				s.connected.has(o) || (s.connected.add(o), s.length_c += 1);
 			},
-			offConnected(o, c) {
-				if (!e.has(o))
+			offConnected(c, o) {
+				if (!e.has(c))
 					return;
-				let s = e.get(o), a = s.connected;
-				a.splice(a.indexOf(c), 1), r(o, s);
+				let s = e.get(c);
+				s.connected.has(o) && (s.connected.delete(o), s.length_c -= 1, n(c, s));
 			},
-			onDisconnected(o, c) {
-				i(), u(o).disconnected.push(c);
+			onDisconnected(c, o) {
+				i();
+				let s = u(c);
+				s.disconnected.has(o) || (s.disconnected.add(o), s.length_d += 1);
 			},
-			offDisconnected(o, c) {
-				if (!e.has(o))
+			offDisconnected(c, o) {
+				if (!e.has(c))
 					return;
-				let s = e.get(o), a = s.disconnected;
-				a.splice(a.indexOf(c), 1), r(o, s);
+				let s = e.get(c);
+				s.disconnected.has(o) && (s.disconnected.delete(o), s.length_d -= 1, n(c, s));
 			}
 		};
-		function r(o, c) {
-			c.connected.length || c.disconnected.length || (e.delete(o), l());
+		function n(c, o) {
+			o.length_c || o.length_d || (e.delete(c), a());
 		}
-		function u(o) {
-			if (e.has(o))
-				return e.get(o);
-			let c = { connected: [], disconnected: [] };
-			return e.set(o, c), c;
+		function u(c) {
+			if (e.has(c))
+				return e.get(c);
+			let o = {
+				connected: /* @__PURE__ */ new WeakSet(),
+				length_c: 0,
+				disconnected: /* @__PURE__ */ new WeakSet(),
+				length_d: 0
+			};
+			return e.set(c, o), o;
 		}
 		function i() {
-			t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 }));
+			t || (t = !0, r.observe(document.body, { childList: !0, subtree: !0 }));
 		}
-		function l() {
-			!t || e.size || (t = !1, n.disconnect());
+		function a() {
+			!t || e.size || (t = !1, r.disconnect());
 		}
 		function f() {
-			return new Promise(function(o) {
-				(requestIdleCallback || requestAnimationFrame)(o);
+			return new Promise(function(c) {
+				(requestIdleCallback || requestAnimationFrame)(c);
 			});
 		}
-		async function d(o) {
+		async function d(c) {
 			e.size > 30 && await f();
-			let c = [];
-			if (!(o instanceof Node))
-				return c;
+			let o = [];
+			if (!(c instanceof Node))
+				return o;
 			for (let s of e.keys())
-				s === o || !(s instanceof Node) || o.contains(s) && c.push(s);
-			return c;
+				s === c || !(s instanceof Node) || c.contains(s) && o.push(s);
+			return o;
 		}
-		function h(o, c) {
-			for (let s of o) {
-				if (c && d(s).then(h), !e.has(s))
+		function g(c, o) {
+			let s = !1;
+			for (let l of c) {
+				if (o && d(l).then(g), !e.has(l))
 					continue;
-				let a = e.get(s);
-				return a.connected.forEach((A) => A(s)), a.connected.length = 0, a.disconnected.length || e.delete(s), !0;
+				let v = e.get(l);
+				v.length_c && (l.dispatchEvent(new Event("dde:connected")), v.connected = /* @__PURE__ */ new WeakSet(), v.length_c = 0, v.length_d || e.delete(l), s = !0);
 			}
-			return !1;
+			return s;
 		}
-		function E(o, c) {
-			for (let s of o) {
-				if (c && d(s).then(E), !e.has(s))
-					continue;
-				let a = e.get(s);
-				return a.disconnected.forEach((A) => A(s)), a.connected.length = 0, a.disconnected.length = 0, e.delete(s), !0;
-			}
-			return !1;
+		function b(c, o) {
+			let s = !1;
+			for (let l of c)
+				o && d(l).then(b), !(!e.has(l) || !e.get(l).length_d) && (l.dispatchEvent(new Event("dde:disconnected")), e.delete(l), s = !0);
+			return s;
 		}
 	}
 	
 	// index.js
 	[HTMLElement, SVGElement, DocumentFragment].forEach((e) => {
 		let { append: t } = e.prototype;
-		e.prototype.append = function(...n) {
-			return t.apply(this, n), this;
+		e.prototype.append = function(...r) {
+			return t.apply(this, r), this;
 		};
 	});
 	
 	globalThis.dde= {
-		assign: m,
-		classListDeclarative: _,
+		assign: w,
+		classListDeclarative: j,
 		createElement: I,
-		dispatchEvent: J,
+		dispatchEvent: K,
 		el: I,
 		empty: Z,
-		namespace: H,
-		on: N,
-		registerReactivity: y
+		on: L,
+		registerReactivity: N,
+		scope: H
 	};
 	
 })();

dist/esm-with-signals.js

@@ -1,5 +1,5 @@
 // src/signals-common.js
-var E = {
+var w = {
 	isSignal(e) {
 		return !1;
 	},
@@ -7,22 +7,22 @@ var E = {
 		return n;
 	}
 };
-function C(e, t = !0) {
-	return t ? Object.assign(E, e) : (Object.setPrototypeOf(e, E), e);
+function A(e, t = !0) {
+	return t ? Object.assign(w, e) : (Object.setPrototypeOf(e, w), e);
 }
-function x(e) {
-	return E.isPrototypeOf(e) && e !== E ? e : E;
+function S(e) {
+	return w.isPrototypeOf(e) && e !== w ? e : w;
 }
 
 // src/helpers.js
 function m(e) {
 	return typeof e > "u";
 }
-function N(e) {
+function D(e) {
 	let t = typeof e;
 	return t !== "object" ? t : e === null ? "null" : Object.prototype.toString.call(e);
 }
-function L(e, t) {
+function C(e, t) {
 	if (!e || !(e instanceof AbortSignal))
 		return !0;
 	if (!e.aborted)
@@ -32,8 +32,8 @@ function L(e, t) {
 }
 
 // src/dom-common.js
-var P = { setDeleteAttr: W };
-function W(e, t, n) {
+var P = { setDeleteAttr: q };
+function q(e, t, n) {
 	if (Reflect.set(e, t, n), !!m(n)) {
 		if (Reflect.deleteProperty(e, t), e instanceof HTMLElement && e.getAttribute(t) === "undefined")
 			return e.removeAttribute(t);
@@ -43,77 +43,85 @@ function W(e, t, n) {
 }
 
 // src/dom.js
-var w = "html";
-function oe(e) {
-	return w = e === "svg" ? "http://www.w3.org/2000/svg" : e, {
+var b = "html", F = {
+	elNamespace(e) {
+		return b = e === "svg" ? "http://www.w3.org/2000/svg" : e, {
 			append(...t) {
-			return w = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t);
+				return b = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t);
 			}
 		};
+	},
+	get namespace() {
+		return b;
+	},
+	set namespace(e) {
+		return b = e;
 	}
-function ce(e, t, ...n) {
-	let r = this, o = x(this), c;
+}, ce = Object.assign((e) => e ? e(document.body) : document.body, F);
+function ie(e, t, ...n) {
+	let r = this, o = S(this), c;
 	switch ((Object(t) !== t || o.isSignal(t)) && (t = { textContent: t }), !0) {
 		case typeof e == "function": {
-			c = e(t || void 0, (s) => s ? (n.unshift(s), void 0) : c);
+			let l = Object.assign((u) => u ? (n.unshift(u), void 0) : c, F);
+			c = e(t || void 0, l), b = "html";
 			break;
 		}
 		case e === "#text":
-			c = S.call(r, document.createTextNode(""), t);
+			c = y.call(r, document.createTextNode(""), t);
 			break;
 		case e === "<>":
-			c = S.call(r, document.createDocumentFragment(), t);
+			c = y.call(r, document.createDocumentFragment(), t);
 			break;
-		case w !== "html":
-			c = S.call(r, document.createElementNS(w, e), t);
+		case b !== "html":
+			c = y.call(r, document.createElementNS(b, e), t);
 			break;
 		case !c:
-			c = S.call(r, document.createElement(e), t);
+			c = y.call(r, document.createElement(e), t);
 	}
-	return n.forEach((p) => p(c)), c;
+	return n.forEach((l) => l(c)), c;
 }
 var { setDeleteAttr: j } = P;
-function S(e, ...t) {
-	let n = this, r = x(this);
+function y(e, ...t) {
+	let n = this, r = S(this);
 	if (!t.length)
 		return e;
 	let c = (e instanceof SVGElement ? I : H).bind(null, e, "Attribute");
-	return Object.entries(Object.assign({}, ...t)).forEach(function p([s, a]) {
-		a = r.processReactiveAttribute(e, s, a, p);
-		let [b] = s;
-		if (b === "=")
-			return c(s.slice(1), a);
-		if (b === ".")
-			return F(e, s.slice(1), a);
-		if (/(aria|data)([A-Z])/.test(s))
-			return s = s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), c(s, a);
-		switch (s === "className" && (s = "class"), s) {
+	return Object.entries(Object.assign({}, ...t)).forEach(function l([u, a]) {
+		a = r.processReactiveAttribute(e, u, a, l);
+		let [v] = u;
+		if (v === "=")
+			return c(u.slice(1), a);
+		if (v === ".")
+			return W(e, u.slice(1), a);
+		if (/(aria|data)([A-Z])/.test(u))
+			return u = u.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), c(u, a);
+		switch (u === "className" && (u = "class"), u) {
 			case "xlink:href":
-				return c(s, a, "http://www.w3.org/1999/xlink");
+				return c(u, a, "http://www.w3.org/1999/xlink");
 			case "textContent":
-				return j(e, s, a);
+				return j(e, u, a);
 			case "style":
 				if (typeof a != "object")
 					break;
 			case "dataset":
-				return _(r, a, F.bind(null, e[s]));
+				return L(r, a, W.bind(null, e[u]));
 			case "ariaset":
-				return _(r, a, (v, i) => c("aria-" + v, i));
+				return L(r, a, (x, i) => c("aria-" + x, i));
 			case "classList":
 				return B.call(n, e, a);
 		}
-		return G(e, s) ? j(e, s, a) : c(s, a);
+		return G(e, u) ? j(e, u, a) : c(u, a);
 	}), e;
 }
 function B(e, t) {
-	let n = x(this);
-	return _(
+	let n = S(this);
+	return L(
 		n,
 		t,
 		(r, o) => e.classList.toggle(r, o === -1 ? void 0 : !!o)
 	), e;
 }
-function se(e) {
+function fe(e) {
 	return Array.from(e.children).forEach((t) => t.remove()), e;
 }
 function G(e, t) {
@@ -128,10 +136,10 @@ function M(e, t) {
 	let n = Object.getOwnPropertyDescriptor(e, t);
 	return n || M(e, t);
 }
-function _(e, t, n) {
+function L(e, t, n) {
 	if (!(typeof t != "object" || t === null))
 		return Object.entries(t).forEach(function([o, c]) {
-			o && (c = e.processReactiveAttribute(t, o, c, (p) => n(...p)), n(o, c));
+			o && (c = e.processReactiveAttribute(t, o, c, (l) => n(...l)), n(o, c));
 		});
 }
 function z(e) {
@@ -143,13 +151,13 @@ function H(e, t, n, r) {
 function I(e, t, n, r, o = null) {
 	return e[(m(r) ? "remove" : "set") + t + "NS"](o, n, z(r));
 }
-function F(e, t, n) {
+function W(e, t, n) {
 	if (Reflect.set(e, t, n), !!m(n))
 		return Reflect.deleteProperty(e, t);
 }
 
 // src/events.js
-function ae(e, t, ...n) {
+function de(e, t, ...n) {
 	let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t);
 	return e.dispatchEvent(r);
 }
@@ -160,92 +168,99 @@ function T(e, t, n) {
 }
 var O = J();
 T.connected = function(e, t) {
-	return function(r) {
-		return typeof r.connectedCallback == "function" ? (r.addEventListener("dde:connected", e, t), r) : (L(t && t.signal, () => O.offConnected(r, e)) && (r.isConnected ? e(new Event("dde:connected")) : O.onConnected(r, e)), r);
+	return typeof t != "object" && (t = {}), t.once = !0, function(r) {
+		return r.addEventListener("dde:connected", e, t), typeof r.connectedCallback == "function" ? r : r.isConnected ? (r.dispatchEvent(new Event("dde:connected")), r) : (C(t.signal, () => O.offConnected(r, e)) && O.onConnected(r, e), r);
 	};
 };
 T.disconnected = function(e, t) {
-	return function(r) {
-		return typeof r.disconnectedCallback == "function" ? (r.addEventListener("dde:disconnected", e, t), r) : (L(t && t.signal, () => O.offDisconnected(r, e)) && O.onDisconnected(r, e), r);
+	return typeof t != "object" && (t = {}), t.once = !0, function(r) {
+		return r.addEventListener("dde:disconnected", e, t), typeof r.disconnectedCallback == "function" || C(t.signal, () => O.offDisconnected(r, e)) && O.onDisconnected(r, e), r;
 	};
 };
 function J() {
 	let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(i) {
-		for (let f of i)
-			if (f.type === "childList") {
-				if (b(f.addedNodes, !0)) {
-					p();
+		for (let s of i)
+			if (s.type === "childList") {
+				if (v(s.addedNodes, !0)) {
+					l();
 					continue;
 				}
-				v(f.removedNodes, !0) && p();
+				x(s.removedNodes, !0) && l();
 			}
 	});
 	return {
-		onConnected(i, f) {
-			c(), o(i).connected.push(f);
+		onConnected(i, s) {
+			c();
+			let f = o(i);
+			f.connected.has(s) || (f.connected.add(s), f.length_c += 1);
 		},
-		offConnected(i, f) {
+		offConnected(i, s) {
 			if (!e.has(i))
 				return;
-			let u = e.get(i), l = u.connected;
-			l.splice(l.indexOf(f), 1), r(i, u);
+			let f = e.get(i);
+			f.connected.has(s) && (f.connected.delete(s), f.length_c -= 1, r(i, f));
 		},
-		onDisconnected(i, f) {
-			c(), o(i).disconnected.push(f);
+		onDisconnected(i, s) {
+			c();
+			let f = o(i);
+			f.disconnected.has(s) || (f.disconnected.add(s), f.length_d += 1);
 		},
-		offDisconnected(i, f) {
+		offDisconnected(i, s) {
 			if (!e.has(i))
 				return;
-			let u = e.get(i), l = u.disconnected;
-			l.splice(l.indexOf(f), 1), r(i, u);
+			let f = e.get(i);
+			f.disconnected.has(s) && (f.disconnected.delete(s), f.length_d -= 1, r(i, f));
 		}
 	};
-	function r(i, f) {
-		f.connected.length || f.disconnected.length || (e.delete(i), p());
+	function r(i, s) {
+		s.length_c || s.length_d || (e.delete(i), l());
 	}
 	function o(i) {
 		if (e.has(i))
 			return e.get(i);
-		let f = { connected: [], disconnected: [] };
-		return e.set(i, f), f;
+		let s = {
+			connected: /* @__PURE__ */ new WeakSet(),
+			length_c: 0,
+			disconnected: /* @__PURE__ */ new WeakSet(),
+			length_d: 0
+		};
+		return e.set(i, s), s;
 	}
 	function c() {
 		t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 }));
 	}
-	function p() {
+	function l() {
 		!t || e.size || (t = !1, n.disconnect());
 	}
-	function s() {
+	function u() {
 		return new Promise(function(i) {
 			(requestIdleCallback || requestAnimationFrame)(i);
 		});
 	}
 	async function a(i) {
-		e.size > 30 && await s();
-		let f = [];
+		e.size > 30 && await u();
+		let s = [];
 		if (!(i instanceof Node))
-			return f;
-		for (let u of e.keys())
-			u === i || !(u instanceof Node) || i.contains(u) && f.push(u);
+			return s;
+		for (let f of e.keys())
+			f === i || !(f instanceof Node) || i.contains(f) && s.push(f);
+		return s;
+	}
+	function v(i, s) {
+		let f = !1;
+		for (let p of i) {
+			if (s && a(p).then(v), !e.has(p))
+				continue;
+			let E = e.get(p);
+			E.length_c && (p.dispatchEvent(new Event("dde:connected")), E.connected = /* @__PURE__ */ new WeakSet(), E.length_c = 0, E.length_d || e.delete(p), f = !0);
+		}
 		return f;
 	}
-	function b(i, f) {
-		for (let u of i) {
-			if (f && a(u).then(b), !e.has(u))
-				continue;
-			let l = e.get(u);
-			return l.connected.forEach((A) => A(u)), l.connected.length = 0, l.disconnected.length || e.delete(u), !0;
-		}
-		return !1;
-	}
-	function v(i, f) {
-		for (let u of i) {
-			if (f && a(u).then(v), !e.has(u))
-				continue;
-			let l = e.get(u);
-			return l.disconnected.forEach((A) => A(u)), l.connected.length = 0, l.disconnected.length = 0, e.delete(u), !0;
-		}
-		return !1;
+	function x(i, s) {
+		let f = !1;
+		for (let p of i)
+			s && a(p).then(x), !(!e.has(p) || !e.get(p).length_d) && (p.dispatchEvent(new Event("dde:disconnected")), e.delete(p), f = !0);
+		return f;
 	}
 }
 
@@ -259,7 +274,7 @@ function J() {
 
 // src/signals-lib.js
 var d = Symbol.for("Signal");
-function y(e) {
+function _(e) {
 	try {
 		return Reflect.has(e, d);
 	} catch {
@@ -270,10 +285,10 @@ var h = /* @__PURE__ */ new WeakMap();
 function g(e, t) {
 	if (typeof e != "function")
 		return U(e, t);
-	if (y(e))
+	if (_(e))
 		return e;
 	let n = U(""), r = () => n(e());
-	return h.set(r, /* @__PURE__ */ new Set([n])), k(r), n;
+	return h.set(r, /* @__PURE__ */ new Set([n])), K(r), n;
 }
 g.action = function(e, t, ...n) {
 	let r = e[d], { actions: o } = r;
@@ -288,7 +303,7 @@ g.on = function e(t, n, r = {}) {
 	if (!(o && o.aborted)) {
 		if (Array.isArray(t))
 			return t.forEach((c) => e(c, n, r));
-		D(t, n), o && o.addEventListener("abort", () => q(t, n));
+		N(t, n), o && o.addEventListener("abort", () => k(t, n));
 	}
 };
 g.symbols = {
@@ -313,26 +328,26 @@ g.clear = function(...e) {
 g.el = function(e, t) {
 	let n = document.createComment("<#reactive>"), r = document.createComment("</#reactive>"), o = document.createDocumentFragment();
 	o.append(n, r);
-	let c = (p) => {
+	let c = (l) => {
 		if (!n.parentNode || !r.parentNode)
-			return q(e, c);
-		let s = t(p);
-		Array.isArray(s) || (s = [s]);
+			return k(e, c);
+		let u = t(l);
+		Array.isArray(u) || (u = [u]);
 		let a = n;
 		for (; (a = n.nextSibling) !== r; )
 			a.remove();
-		n.after(...s);
+		n.after(...u);
 	};
-	return D(e, c), c(e()), o;
+	return N(e, c), c(e()), o;
 };
 var $ = {
-	isSignal: y,
+	isSignal: _,
 	processReactiveAttribute(e, t, n, r) {
-		return y(n) ? (D(n, (o) => r([t, o])), n()) : n;
+		return _(n) ? (N(n, (o) => r([t, o])), n()) : n;
 	}
 };
 function U(e, t) {
-	let n = (...r) => r.length ? X(n, r[0]) : Q(n);
+	let n = (...r) => r.length ? Y(n, r[0]) : X(n);
 	return Z(n, e, t);
 }
 var V = Object.assign(/* @__PURE__ */ Object.create(null), {
@@ -341,56 +356,56 @@ var V = Object.assign(/* @__PURE__ */ Object.create(null), {
 	}
 });
 function Z(e, t, n) {
-	return N(n) !== "[object Object]" && (n = {}), e[d] = {
+	return D(n) !== "[object Object]" && (n = {}), e[d] = {
 		value: t,
 		actions: n,
 		listeners: /* @__PURE__ */ new Set()
 	}, e.toJSON = () => e(), Object.setPrototypeOf(e[d], V), e;
 }
 var R = [];
-function k(e) {
+function K(e) {
 	let t = function() {
 		R.push(t), e(), R.pop();
 	};
 	h.has(e) && (h.set(t, h.get(e)), h.delete(e)), t();
 }
-function K() {
+function Q() {
 	return R[R.length - 1];
 }
-function Q(e) {
+function X(e) {
 	if (!e[d])
 		return;
-	let { value: t, listeners: n } = e[d], r = K();
+	let { value: t, listeners: n } = e[d], r = Q();
 	return r && n.add(r), h.has(r) && h.get(r).add(e), t;
 }
-function X(e, t) {
+function Y(e, t) {
 	if (!e[d])
 		return;
 	let n = e[d];
 	if (n.value !== t)
 		return n.value = t, n.listeners.forEach((r) => r(t)), t;
 }
-function D(e, t) {
+function N(e, t) {
 	if (e[d])
 		return e[d].listeners.add(t);
 }
-function q(e, t) {
+function k(e, t) {
 	if (e[d])
 		return e[d].listeners.delete(t);
 }
 
 // signals.js
-C($);
+A($);
 export {
 	g as S,
-	S as assign,
+	y as assign,
 	B as classListDeclarative,
-	ce as createElement,
-	ae as dispatchEvent,
-	ce as el,
-	se as empty,
-	y as isSignal,
-	oe as namespace,
+	ie as createElement,
+	de as dispatchEvent,
+	ie as el,
+	fe as empty,
+	_ as isSignal,
 	T as on,
-	C as registerReactivity
+	A as registerReactivity,
+	ce as scope
 };

dist/esm.js

@@ -1,24 +1,24 @@
 // src/signals-common.js
-var g = {
+var E = {
 	isSignal(e) {
 		return !1;
 	},
-	processReactiveAttribute(e, t, n, r) {
-		return n;
+	processReactiveAttribute(e, t, r, n) {
+		return r;
 	}
 };
-function y(e, t = !0) {
-	return t ? Object.assign(g, e) : (Object.setPrototypeOf(e, g), e);
+function N(e, t = !0) {
+	return t ? Object.assign(E, e) : (Object.setPrototypeOf(e, E), e);
 }
-function v(e) {
-	return g.isPrototypeOf(e) && e !== g ? e : g;
+function m(e) {
+	return E.isPrototypeOf(e) && e !== E ? e : E;
 }
 
 // src/helpers.js
 function p(e) {
 	return typeof e > "u";
 }
-function w(e, t) {
+function _(e, t) {
 	if (!e || !(e instanceof AbortSignal))
 		return !0;
 	if (!e.aborted)
@@ -28,9 +28,9 @@ function w(e, t) {
 }
 
 // src/dom-common.js
-var R = { setDeleteAttr: P };
-function P(e, t, n) {
-	if (Reflect.set(e, t, n), !!p(n)) {
+var O = { setDeleteAttr: P };
+function P(e, t, r) {
+	if (Reflect.set(e, t, r), !!p(r)) {
 		if (Reflect.deleteProperty(e, t), e instanceof HTMLElement && e.getAttribute(t) === "undefined")
 			return e.removeAttribute(t);
 		if (Reflect.get(e, t) === "undefined")
@@ -39,227 +39,242 @@ function P(e, t, n) {
 }
 
 // src/dom.js
-var x = "html";
-function H(e) {
-	return x = e === "svg" ? "http://www.w3.org/2000/svg" : e, {
+var h = "html", S = {
+	elNamespace(e) {
+		return h = e === "svg" ? "http://www.w3.org/2000/svg" : e, {
 			append(...t) {
-			return x = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t);
+				return h = "html", t.length === 1 ? t[0] : document.createDocumentFragment().append(...t);
 			}
 		};
+	},
+	get namespace() {
+		return h;
+	},
+	set namespace(e) {
+		return h = e;
 	}
-function I(e, t, ...n) {
-	let r = this, u = v(this), i;
+}, H = Object.assign((e) => e ? e(document.body) : document.body, S);
+function I(e, t, ...r) {
+	let n = this, u = m(this), i;
 	switch ((Object(t) !== t || u.isSignal(t)) && (t = { textContent: t }), !0) {
 		case typeof e == "function": {
-			i = e(t || void 0, (f) => f ? (n.unshift(f), void 0) : i);
+			let a = Object.assign((f) => f ? (r.unshift(f), void 0) : i, S);
+			i = e(t || void 0, a), h = "html";
 			break;
 		}
 		case e === "#text":
-			i = m.call(r, document.createTextNode(""), t);
+			i = w.call(n, document.createTextNode(""), t);
 			break;
 		case e === "<>":
-			i = m.call(r, document.createDocumentFragment(), t);
+			i = w.call(n, document.createDocumentFragment(), t);
 			break;
-		case x !== "html":
-			i = m.call(r, document.createElementNS(x, e), t);
+		case h !== "html":
+			i = w.call(n, document.createElementNS(h, e), t);
 			break;
 		case !i:
-			i = m.call(r, document.createElement(e), t);
+			i = w.call(n, document.createElement(e), t);
 	}
-	return n.forEach((l) => l(i)), i;
+	return r.forEach((a) => a(i)), i;
 }
-var { setDeleteAttr: C } = R;
-function m(e, ...t) {
-	let n = this, r = v(this);
+var { setDeleteAttr: R } = O;
+function w(e, ...t) {
+	let r = this, n = m(this);
 	if (!t.length)
 		return e;
-	let i = (e instanceof SVGElement ? M : F).bind(null, e, "Attribute");
-	return Object.entries(Object.assign({}, ...t)).forEach(function l([f, d]) {
-		d = r.processReactiveAttribute(e, f, d, l);
-		let [h] = f;
-		if (h === "=")
+	let i = (e instanceof SVGElement ? T : M).bind(null, e, "Attribute");
+	return Object.entries(Object.assign({}, ...t)).forEach(function a([f, d]) {
+		d = n.processReactiveAttribute(e, f, d, a);
+		let [g] = f;
+		if (g === "=")
 			return i(f.slice(1), d);
-		if (h === ".")
-			return D(e, f.slice(1), d);
+		if (g === ".")
+			return C(e, f.slice(1), d);
 		if (/(aria|data)([A-Z])/.test(f))
 			return f = f.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), i(f, d);
 		switch (f === "className" && (f = "class"), f) {
 			case "xlink:href":
 				return i(f, d, "http://www.w3.org/1999/xlink");
 			case "textContent":
-				return C(e, f, d);
+				return R(e, f, d);
 			case "style":
 				if (typeof d != "object")
 					break;
 			case "dataset":
-				return O(r, d, D.bind(null, e[f]));
+				return A(n, d, C.bind(null, e[f]));
 			case "ariaset":
-				return O(r, d, (E, o) => i("aria-" + E, o));
+				return A(n, d, (b, c) => i("aria-" + b, c));
 			case "classList":
-				return _.call(n, e, d);
+				return j.call(r, e, d);
 		}
-		return j(e, f) ? C(e, f, d) : i(f, d);
+		return F(e, f) ? R(e, f, d) : i(f, d);
 	}), e;
 }
-function _(e, t) {
-	let n = v(this);
-	return O(
-		n,
+function j(e, t) {
+	let r = m(this);
+	return A(
+		r,
 		t,
-		(r, u) => e.classList.toggle(r, u === -1 ? void 0 : !!u)
+		(n, u) => e.classList.toggle(n, u === -1 ? void 0 : !!u)
 	), e;
 }
 function Z(e) {
 	return Array.from(e.children).forEach((t) => t.remove()), e;
 }
-function j(e, t) {
+function F(e, t) {
 	if (!Reflect.has(e, t))
 		return !1;
-	let n = L(e, t);
-	return !p(n.set);
+	let r = y(e, t);
+	return !p(r.set);
 }
-function L(e, t) {
+function y(e, t) {
 	if (e = Object.getPrototypeOf(e), !e)
 		return {};
-	let n = Object.getOwnPropertyDescriptor(e, t);
-	return n || L(e, t);
+	let r = Object.getOwnPropertyDescriptor(e, t);
+	return r || y(e, t);
 }
-function O(e, t, n) {
+function A(e, t, r) {
 	if (!(typeof t != "object" || t === null))
 		return Object.entries(t).forEach(function([u, i]) {
-			u && (i = e.processReactiveAttribute(t, u, i, (l) => n(...l)), n(u, i));
+			u && (i = e.processReactiveAttribute(t, u, i, (a) => r(...a)), r(u, i));
 		});
 }
-function S(e) {
+function D(e) {
 	return Array.isArray(e) ? e.filter(Boolean).join(" ") : e;
 }
-function F(e, t, n, r) {
-	return e[(p(r) ? "remove" : "set") + t](n, S(r));
+function M(e, t, r, n) {
+	return e[(p(n) ? "remove" : "set") + t](r, D(n));
 }
-function M(e, t, n, r, u = null) {
-	return e[(p(r) ? "remove" : "set") + t + "NS"](u, n, S(r));
+function T(e, t, r, n, u = null) {
+	return e[(p(n) ? "remove" : "set") + t + "NS"](u, r, D(n));
 }
-function D(e, t, n) {
-	if (Reflect.set(e, t, n), !!p(n))
+function C(e, t, r) {
+	if (Reflect.set(e, t, r), !!p(r))
 		return Reflect.deleteProperty(e, t);
 }
 
 // src/events.js
-function J(e, t, ...n) {
-	let r = n.length ? new CustomEvent(t, { detail: n[0] }) : new Event(t);
-	return e.dispatchEvent(r);
+function K(e, t, ...r) {
+	let n = r.length ? new CustomEvent(t, { detail: r[0] }) : new Event(t);
+	return e.dispatchEvent(n);
 }
-function N(e, t, n) {
+function L(e, t, r) {
 	return function(u) {
-		return u.addEventListener(e, t, n), u;
+		return u.addEventListener(e, t, r), u;
 	};
 }
-var b = T();
-N.connected = function(e, t) {
-	return function(r) {
-		return typeof r.connectedCallback == "function" ? (r.addEventListener("dde:connected", e, t), r) : (w(t && t.signal, () => b.offConnected(r, e)) && (r.isConnected ? e(new Event("dde:connected")) : b.onConnected(r, e)), r);
+var x = U();
+L.connected = function(e, t) {
+	return typeof t != "object" && (t = {}), t.once = !0, function(n) {
+		return n.addEventListener("dde:connected", e, t), typeof n.connectedCallback == "function" ? n : n.isConnected ? (n.dispatchEvent(new Event("dde:connected")), n) : (_(t.signal, () => x.offConnected(n, e)) && x.onConnected(n, e), n);
 	};
 };
-N.disconnected = function(e, t) {
-	return function(r) {
-		return typeof r.disconnectedCallback == "function" ? (r.addEventListener("dde:disconnected", e, t), r) : (w(t && t.signal, () => b.offDisconnected(r, e)) && b.onDisconnected(r, e), r);
+L.disconnected = function(e, t) {
+	return typeof t != "object" && (t = {}), t.once = !0, function(n) {
+		return n.addEventListener("dde:disconnected", e, t), typeof n.disconnectedCallback == "function" || _(t.signal, () => x.offDisconnected(n, e)) && x.onDisconnected(n, e), n;
 	};
 };
-function T() {
-	let e = /* @__PURE__ */ new Map(), t = !1, n = new MutationObserver(function(o) {
-		for (let c of o)
-			if (c.type === "childList") {
-				if (h(c.addedNodes, !0)) {
-					l();
+function U() {
+	let e = /* @__PURE__ */ new Map(), t = !1, r = new MutationObserver(function(c) {
+		for (let o of c)
+			if (o.type === "childList") {
+				if (g(o.addedNodes, !0)) {
+					a();
 					continue;
 				}
-				E(c.removedNodes, !0) && l();
+				b(o.removedNodes, !0) && a();
 			}
 	});
 	return {
-		onConnected(o, c) {
-			i(), u(o).connected.push(c);
+		onConnected(c, o) {
+			i();
+			let s = u(c);
+			s.connected.has(o) || (s.connected.add(o), s.length_c += 1);
 		},
-		offConnected(o, c) {
-			if (!e.has(o))
+		offConnected(c, o) {
+			if (!e.has(c))
 				return;
-			let s = e.get(o), a = s.connected;
-			a.splice(a.indexOf(c), 1), r(o, s);
+			let s = e.get(c);
+			s.connected.has(o) && (s.connected.delete(o), s.length_c -= 1, n(c, s));
 		},
-		onDisconnected(o, c) {
-			i(), u(o).disconnected.push(c);
+		onDisconnected(c, o) {
+			i();
+			let s = u(c);
+			s.disconnected.has(o) || (s.disconnected.add(o), s.length_d += 1);
 		},
-		offDisconnected(o, c) {
-			if (!e.has(o))
+		offDisconnected(c, o) {
+			if (!e.has(c))
 				return;
-			let s = e.get(o), a = s.disconnected;
-			a.splice(a.indexOf(c), 1), r(o, s);
+			let s = e.get(c);
+			s.disconnected.has(o) && (s.disconnected.delete(o), s.length_d -= 1, n(c, s));
 		}
 	};
-	function r(o, c) {
-		c.connected.length || c.disconnected.length || (e.delete(o), l());
+	function n(c, o) {
+		o.length_c || o.length_d || (e.delete(c), a());
 	}
-	function u(o) {
-		if (e.has(o))
-			return e.get(o);
-		let c = { connected: [], disconnected: [] };
-		return e.set(o, c), c;
+	function u(c) {
+		if (e.has(c))
+			return e.get(c);
+		let o = {
+			connected: /* @__PURE__ */ new WeakSet(),
+			length_c: 0,
+			disconnected: /* @__PURE__ */ new WeakSet(),
+			length_d: 0
+		};
+		return e.set(c, o), o;
 	}
 	function i() {
-		t || (t = !0, n.observe(document.body, { childList: !0, subtree: !0 }));
+		t || (t = !0, r.observe(document.body, { childList: !0, subtree: !0 }));
 	}
-	function l() {
-		!t || e.size || (t = !1, n.disconnect());
+	function a() {
+		!t || e.size || (t = !1, r.disconnect());
 	}
 	function f() {
-		return new Promise(function(o) {
-			(requestIdleCallback || requestAnimationFrame)(o);
+		return new Promise(function(c) {
+			(requestIdleCallback || requestAnimationFrame)(c);
 		});
 	}
-	async function d(o) {
+	async function d(c) {
 		e.size > 30 && await f();
-		let c = [];
-		if (!(o instanceof Node))
-			return c;
+		let o = [];
+		if (!(c instanceof Node))
+			return o;
 		for (let s of e.keys())
-			s === o || !(s instanceof Node) || o.contains(s) && c.push(s);
-		return c;
+			s === c || !(s instanceof Node) || c.contains(s) && o.push(s);
+		return o;
 	}
-	function h(o, c) {
-		for (let s of o) {
-			if (c && d(s).then(h), !e.has(s))
+	function g(c, o) {
+		let s = !1;
+		for (let l of c) {
+			if (o && d(l).then(g), !e.has(l))
 				continue;
-			let a = e.get(s);
-			return a.connected.forEach((A) => A(s)), a.connected.length = 0, a.disconnected.length || e.delete(s), !0;
+			let v = e.get(l);
+			v.length_c && (l.dispatchEvent(new Event("dde:connected")), v.connected = /* @__PURE__ */ new WeakSet(), v.length_c = 0, v.length_d || e.delete(l), s = !0);
 		}
-		return !1;
+		return s;
 	}
-	function E(o, c) {
-		for (let s of o) {
-			if (c && d(s).then(E), !e.has(s))
-				continue;
-			let a = e.get(s);
-			return a.disconnected.forEach((A) => A(s)), a.connected.length = 0, a.disconnected.length = 0, e.delete(s), !0;
-		}
-		return !1;
+	function b(c, o) {
+		let s = !1;
+		for (let l of c)
+			o && d(l).then(b), !(!e.has(l) || !e.get(l).length_d) && (l.dispatchEvent(new Event("dde:disconnected")), e.delete(l), s = !0);
+		return s;
 	}
 }
 
 // index.js
 [HTMLElement, SVGElement, DocumentFragment].forEach((e) => {
 	let { append: t } = e.prototype;
-	e.prototype.append = function(...n) {
-		return t.apply(this, n), this;
+	e.prototype.append = function(...r) {
+		return t.apply(this, r), this;
 	};
 });
 export {
-	m as assign,
-	_ as classListDeclarative,
+	w as assign,
+	j as classListDeclarative,
 	I as createElement,
-	J as dispatchEvent,
+	K as dispatchEvent,
 	I as el,
 	Z as empty,
-	H as namespace,
-	N as on,
-	y as registerReactivity
+	L as on,
+	N as registerReactivity,
+	H as scope
 };

examples/components/fullNameComponent.js

@@ -1,15 +1,17 @@
-import { style, el, on, S, namespace } from '../exports.js';
+import { style, el, on, S } from '../exports.js';
 const className= style.host(fullNameComponent).css`
 	:host form{
 		display: flex;
 		flex-flow: column nowrap;
 	}
 `;
-export function fullNameComponent(){
+export function fullNameComponent(_, scope){
 	const labels= [ "Name", "Surname" ];
 	const name= labels.map(_=> S(""));
 	const full_name= S(()=>
 		name.map(l=> l()).filter(Boolean).join(" ") || "-");
+	scope(on.connected(()=> console.log(fullNameComponent)));
+	scope(on.disconnected(()=> console.log(fullNameComponent)))
 
 	return el("div", { className }).append(
 		el("h2", "Simple form:"),
@@ -24,7 +26,7 @@ export function fullNameComponent(){
 			": ",
 			el("#text", full_name)
 		),
-		namespace("svg").append(
+		scope.elNamespace("svg").append(
 			el("svg", { viewBox: "0 0 240 80", style: { height: "80px", display: "block" } }).append(
 				//el("style", {  })
 				el("text", { x: 20, y: 35, textContent: "Text" })

examples/components/webComponent.js

@@ -17,7 +17,8 @@ export class CustomHTMLTestElement extends HTMLElement{
 	}
 
 	render({ name, test, preName }, host){
-		host(on.connected(console.log));
+		host(on.connected(()=> console.log(CustomHTMLTestElement)));
+		host(on.disconnected(()=> console.log(CustomHTMLTestElement)));
 		return el("p").append(
 			el("#text", { textContent: name }),
 			el("#text", { textContent: test }),

index.d.ts

@@ -1,4 +1,4 @@
-import { Signal } from "./src/signals";
+import { Signal } from "./signals";
 //TODO?
 /** Is filled when function is succesfully called ⇒ and returns component's root element. */
 type Host<el extends Element>= (extender?: ElementExtender<el>)=> el | undefined;
@@ -46,19 +46,17 @@ type ElementAttributes<T extends keyof ElementTagNameMap | ElementTagNameMap[key
 	T extends keyof ElementTagNameMap ?
 	Omit<ElementTagNameMap[T],"classList"|"className"> & AttrsModified :
 	Omit<T,"classList"|"className"> & AttrsModified;
-export function assign<El extends Element>(element: El, ...attrs_array: ElementAttributes<El>[]): El
+export function assign<El extends Element>(element: El, ...attrs_array: Partial<ElementAttributes<El>>[]): El
 
 type ElementExtender<El extends Element>= (element: El)=> El;
 type TagNameFragment= "<>";
 export function el<TAG extends keyof ElementTagNameMap>(
 	tag_name: TAG,
-	attrs?: ElementAttributes<ElementTagNameMap[TAG]>,
+	attrs?: Partial<ElementAttributes<ElementTagNameMap[TAG]>>,
 	...extenders: ElementExtender<ElementTagNameMap[TAG]>[]
 ): ElementTagNameMap[TAG]
 export function el<T>(
 	tag_name: TagNameFragment,
-	signal?: Signal<T, any>,
-	cb?: (a: T)=> HTMLElement | HTMLElement[]
 ): DocumentFragment
 export function el<R extends Element, T extends (attrs: any, host: Host<R>)=> R>(
 	fComponent: T,

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "deka-dom-el",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "deka-dom-el",
-			"version": "0.3.0",
+			"version": "0.4.0",
 			"license": "MIT",
 			"devDependencies": {
 				"@size-limit/preset-small-lib": "^8.2.6",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "deka-dom-el",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"description": "A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks.",
 	"author": "Jan Andrle <andrle.jan@centrum.cz>",
 	"license": "MIT",
@@ -71,8 +71,8 @@
 			"gzip": false
 		},
 		{
-			"path": "./test/components/webComponent.js",
-			"limit": "10kb",
+			"path": "./examples/components/webComponent.js",
+			"limit": "11kb",
 			"gzip": false
 		}
 	],

src/dom.js

@@ -2,7 +2,8 @@ import { signals } from "./signals-common.js";
 
 /** @type {"html"|"svg"|string} */
 let namespace_curr= "html";
-export function namespace(namespace){
+const scopes= {
+	elNamespace(namespace){
 		namespace_curr= namespace==="svg" ? "http://www.w3.org/2000/svg" : namespace;
 		return {
 			append(...el){
@@ -12,7 +13,11 @@ export function namespace(namespace){
 				return f.append(...el);
 			}
 		};
-}
+	},
+	get namespace(){ return namespace_curr; },
+	set namespace(v){ return ( namespace_curr= v ); },
+};
+export const scope= Object.assign(c=> c ? c(document.body) : document.body, scopes);
 export function createElement(tag, attributes, ...connect){
 	const _this= this;
 	const s= signals(this);
@@ -22,8 +27,9 @@ export function createElement(tag, attributes, ...connect){
 		attributes= { textContent: attributes };
 	switch(true){
 		case typeof tag==="function": {
-			const ref= c=> c ? (connect.unshift(c), undefined) : el;
-			el= tag(attributes || undefined, ref);
+			const scope= Object.assign(c=> c ? (connect.unshift(c), undefined) : el, scopes);
+			el= tag(attributes || undefined, scope);
+			namespace_curr= "html";
 			break;
 		}
 		case tag==="#text":           el= assign.call(_this, document.createTextNode(""), attributes); break;

src/events.js

@@ -15,25 +15,31 @@ const c_ch_o= connectionsChangesObserverConstructor();
 import { onAbort } from './helpers.js';
 //TODO: cleanUp when event before abort?
 on.connected= function(listener, options){
+	if(typeof options !== "object")
+		options= {};
+	options.once= true;
 	return function registerElement(element){
-		if(typeof element.connectedCallback === "function"){
 		element.addEventListener("dde:connected", listener, options);
+		if(typeof element.connectedCallback === "function") return element;
+		if(element.isConnected){
+			element.dispatchEvent(new Event("dde:connected"));
 			return element;
 		}
-		const c= onAbort(options && options.signal, ()=> c_ch_o.offConnected(element, listener));
-		if(!c) return element;
-		if(element.isConnected) listener(new Event("dde:connected"));
-		else c_ch_o.onConnected(element, listener);
+
+		const c= onAbort(options.signal, ()=> c_ch_o.offConnected(element, listener));
+		if(c) c_ch_o.onConnected(element, listener);
 		return element;
 	};
 };
 on.disconnected= function(listener, options){
+	if(typeof options !== "object")
+		options= {};
+	options.once= true;
 	return function registerElement(element){
-		if(typeof element.disconnectedCallback === "function"){
 		element.addEventListener("dde:disconnected", listener, options);
-			return element;
-		}
-		const c= onAbort(options && options.signal, ()=> c_ch_o.offDisconnected(element, listener));
+		if(typeof element.disconnectedCallback === "function") return element;
+
+		const c= onAbort(options.signal, ()=> c_ch_o.offDisconnected(element, listener));
 		if(c) c_ch_o.onDisconnected(element, listener);
 		return element;
 	};
@@ -57,37 +63,48 @@ function connectionsChangesObserverConstructor(){
 		onConnected(element, listener){
 			start();
 			const listeners= getElementStore(element);
-			listeners.connected.push(listener);
+			if(listeners.connected.has(listener)) return;
+			listeners.connected.add(listener);
+			listeners.length_c+= 1;
 		},
 		offConnected(element, listener){
 			if(!store.has(element)) return;
 			const ls= store.get(element);
-			const l= ls.connected;
-			l.splice(l.indexOf(listener), 1);
+			if(!ls.connected.has(listener)) return;
+			ls.connected.delete(listener);
+			ls.length_c-= 1;
 			cleanWhenOff(element, ls);
 		},
 		onDisconnected(element, listener){
 			start();
 			const listeners= getElementStore(element);
-			listeners.disconnected.push(listener);
+			if(listeners.disconnected.has(listener)) return;
+			listeners.disconnected.add(listener);
+			listeners.length_d+= 1;
 		},
 		offDisconnected(element, listener){
 			if(!store.has(element)) return;
 			const ls= store.get(element);
-			const l= ls.disconnected;
-			l.splice(l.indexOf(listener), 1);
+			if(!ls.disconnected.has(listener)) return;
+			ls.disconnected.delete(listener);
+			ls.length_d-= 1;
 			cleanWhenOff(element, ls);
 		}
 	};
 	function cleanWhenOff(element, ls){
-		if(ls.connected.length || ls.disconnected.length)
+		if(ls.length_c || ls.length_d)
 			return;
 		store.delete(element);
 		stop();
 	}
 	function getElementStore(element){
 		if(store.has(element)) return store.get(element);
-		const out= { connected: [], disconnected: [] };
+		const out= {
+			connected: new WeakSet(),
+			length_c: 0,
+			disconnected: new WeakSet(),
+			length_d: 0
+		};
 		store.set(element, out);
 		return out;
 	}
@@ -118,31 +135,36 @@ function connectionsChangesObserverConstructor(){
 		return out;
 	}
 	function observerAdded(addedNodes, is_root){
+		let out= false;
 		for(const element of addedNodes){
 			if(is_root) collectChildren(element).then(observerAdded);
 			if(!store.has(element)) continue;
 			
 			const ls= store.get(element);
-			ls.connected.forEach(listener=> listener(element));
-			ls.connected.length= 0;
-			if(!ls.disconnected.length) store.delete(element);
-			return true;
+			if(!ls.length_c) continue;
+			
+			element.dispatchEvent(new Event("dde:connected"));
+			ls.connected= new WeakSet();
+			ls.length_c= 0;
+			if(!ls.length_d) store.delete(element);
+			out= true;
 		}
-		return false;
+		return out;
 	}
 	function observerRemoved(removedNodes, is_root){
+		let out= false;
 		for(const element of removedNodes){
 			if(is_root) collectChildren(element).then(observerRemoved);
 			if(!store.has(element)) continue;
 			
 			const ls= store.get(element);
-			ls.disconnected.forEach(listener=> listener(element));
+			if(!ls.length_d) continue;
+			
+			element.dispatchEvent(new Event("dde:disconnected"));
 			
-			ls.connected.length= 0;
-			ls.disconnected.length= 0;
 			store.delete(element);
-			return true;
+			out= true;
 		}
-		return false;
+		return out;
 	}
 }