⚡ 🐛 finalizing WC + simulateSlots

bs/build.js

@@ -17,7 +17,7 @@ $.api("", true)
 			"npx esbuild '::file::'",
 			"--platform=neutral",
 			"--bundle",
-			minify==="full" ? "--minify" : "--minify-syntax --minify-identifiers",
+			//minify==="full" ? "--minify" : "--minify-syntax --minify-identifiers",
 			"--legal-comments=inline",
 			"--packages=external",
 			"--outfile='::out::'"

dist/dde.js

@@ -1,47 +1,52 @@
 //deka-dom-el library is available via global namespace `dde`
 (()=> {
 // src/signals-common.js
-var C = {
+var signals_global = {
-	isSignal(t) {
+	isSignal(attributes) {
-		return !1;
+		return false;
 	},
-	processReactiveAttribute(t, e, n, r) {
+	processReactiveAttribute(obj, key, attr, set) {
-		return n;
+		return attr;
 	}
 };
-function V(t, e = !0) {
+function registerReactivity(def, global = true) {
-	return e ? Object.assign(C, t) : (Object.setPrototypeOf(t, C), t);
+	if (global) return Object.assign(signals_global, def);
+	Object.setPrototypeOf(def, signals_global);
+	return def;
 }
-function L(t) {
+function signals(_this) {
-	return C.isPrototypeOf(t) && t !== C ? t : C;
+	return signals_global.isPrototypeOf(_this) && _this !== signals_global ? _this : signals_global;
 }
 
 // src/helpers.js
-var q = (...t) => Object.prototype.hasOwnProperty.call(...t);
+var hasOwn = (...a) => Object.prototype.hasOwnProperty.call(...a);
-function E(t) {
+function isUndef(value) {
-	return typeof t > "u";
+	return typeof value === "undefined";
 }
-function N(t, e) {
+function onAbort(signal, listener) {
-	if (!t || !(t instanceof AbortSignal))
+	if (!signal || !(signal instanceof AbortSignal))
-		return !0;
+		return true;
-	if (!t.aborted)
+	if (signal.aborted)
-		return t.addEventListener("abort", e), function() {
+		return;
-			t.removeEventListener("abort", e);
+	signal.addEventListener("abort", listener);
+	return function cleanUp() {
+		signal.removeEventListener("abort", listener);
 	};
 }
-function F(t, e) {
+function observedAttributes(instance, observedAttribute) {
-	let { observedAttributes: n = [] } = t.constructor;
+	const { observedAttributes: observedAttributes3 = [] } = instance.constructor;
-	return n.reduce(function(r, o) {
+	return observedAttributes3.reduce(function(out, name) {
-		return r[J(o)] = e(t, o), r;
+		out[kebabToCamel(name)] = observedAttribute(instance, name);
+		return out;
 	}, {});
 }
-function J(t) {
+function kebabToCamel(name) {
-	return t.replace(/-./g, (e) => e[1].toUpperCase());
+	return name.replace(/-./g, (x) => x[1].toUpperCase());
 }
 
 // src/dom-common.js
-var a = {
+var enviroment = {
-	setDeleteAttr: K,
+	setDeleteAttr,
 	ssr: "",
 	D: globalThis.document,
 	F: globalThis.DocumentFragment,
@@ -49,425 +54,548 @@ var a = {
 	S: globalThis.SVGElement,
 	M: globalThis.MutationObserver
 };
-function K(t, e, n) {
+function setDeleteAttr(obj, prop, val) {
-	if (Reflect.set(t, e, n), !!E(n)) {
+	Reflect.set(obj, prop, val);
-		if (Reflect.deleteProperty(t, e), t instanceof a.H && t.getAttribute(e) === "undefined")
+	if (!isUndef(val)) return;
-			return t.removeAttribute(e);
+	Reflect.deleteProperty(obj, prop);
-		if (Reflect.get(t, e) === "undefined")
+	if (obj instanceof enviroment.H && obj.getAttribute(prop) === "undefined")
-			return Reflect.set(t, e, "");
+		return obj.removeAttribute(prop);
+	if (Reflect.get(obj, prop) === "undefined")
+		return Reflect.set(obj, prop, "");
 }
-}
+var keyLTE = "__dde_lifecyclesToEvents";
-var x = "__dde_lifecyclesToEvents", g = "dde:connected", y = "dde:disconnected", D = "dde:attributeChanged";
+var evc = "dde:connected";
+var evd = "dde:disconnected";
+var eva = "dde:attributeChanged";
 
 // src/dom.js
-var v = [{
+var scopes = [{
 	get scope() {
-		return a.D.body;
+		return enviroment.D.body;
 	},
-	host: (t) => t ? t(a.D.body) : a.D.body,
+	host: (c) => c ? c(enviroment.D.body) : enviroment.D.body,
-	prevent: !0
+	prevent: true
-}], S = {
+}];
+var scope = {
 	get current() {
-		return v[v.length - 1];
+		return scopes[scopes.length - 1];
 	},
 	get host() {
 		return this.current.host;
 	},
 	preventDefault() {
-		let { current: t } = this;
+		const { current } = this;
-		return t.prevent = !0, t;
+		current.prevent = true;
+		return current;
 	},
 	get state() {
-		return [...v];
+		return [...scopes];
 	},
-	push(t = {}) {
+	push(s = {}) {
-		return v.push(Object.assign({}, this.current, { prevent: !1 }, t));
+		return scopes.push(Object.assign({}, this.current, { prevent: false }, s));
 	},
 	pushRoot() {
-		return v.push(v[0]);
+		return scopes.push(scopes[0]);
 	},
 	pop() {
-		if (v.length !== 1)
+		if (scopes.length === 1) return;
-			return v.pop();
+		return scopes.pop();
 	}
 };
-function $(...t) {
+function append(...els) {
-	return this.appendOriginal(...t), this;
+	this.appendOriginal(...els);
+	return this;
 }
-function Q(t) {
+function chainableAppend(el) {
-	return t.append === $ || (t.appendOriginal = t.append, t.append = $), t;
+	if (el.append === append) return el;
+	el.appendOriginal = el.append;
+	el.append = append;
+	return el;
 }
-var T;
+var namespace;
-function k(t, e, ...n) {
+function createElement(tag, attributes, ...addons) {
-	let r = L(this), o = 0, c, f;
+	const s = signals(this);
-	switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {
+	let scoped = 0;
-		case typeof t == "function": {
+	let el, el_host;
-			o = 1, S.push({ scope: t, host: (...b) => b.length ? (o === 1 ? n.unshift(...b) : b.forEach((l) => l(f)), void 0) : f }), c = t(e || void 0);
+	if (Object(attributes) !== attributes || s.isSignal(attributes))
-			let d = c instanceof a.F;
+		attributes = { textContent: attributes };
-			if (c.nodeName === "#comment")
+	switch (true) {
-				break;
+		case typeof tag === "function": {
-			let p = k.mark({
+			scoped = 1;
+			scope.push({ scope: tag, host: (...c) => c.length ? (scoped === 1 ? addons.unshift(...c) : c.forEach((c2) => c2(el_host)), void 0) : el_host });
+			el = tag(attributes || void 0);
+			const is_fragment = el instanceof enviroment.F;
+			if (el.nodeName === "#comment") break;
+			const el_mark = createElement.mark({
 				type: "component",
-				name: t.name,
+				name: tag.name,
-				host: d ? "this" : "parentElement"
+				host: is_fragment ? "this" : "parentElement"
 			});
-			c.prepend(p), d && (f = p);
+			el.prepend(el_mark);
+			if (is_fragment) el_host = el_mark;
 			break;
 		}
-		case t === "#text":
+		case tag === "#text":
-			c = O.call(this, a.D.createTextNode(""), e);
+			el = assign.call(this, enviroment.D.createTextNode(""), attributes);
 			break;
-		case (t === "<>" || !t):
+		case (tag === "<>" || !tag):
-			c = O.call(this, a.D.createDocumentFragment(), e);
+			el = assign.call(this, enviroment.D.createDocumentFragment(), attributes);
 			break;
-		case !!T:
+		case Boolean(namespace):
-			c = O.call(this, a.D.createElementNS(T, t), e);
+			el = assign.call(this, enviroment.D.createElementNS(namespace, tag), attributes);
 			break;
-		case !c:
+		case !el:
-			c = O.call(this, a.D.createElement(t), e);
+			el = assign.call(this, enviroment.D.createElement(tag), attributes);
 	}
-	return Q(c), f || (f = c), n.forEach((d) => d(f)), o && S.pop(), o = 2, c;
+	chainableAppend(el);
+	if (!el_host) el_host = el;
+	addons.forEach((c) => c(el_host));
+	if (scoped) scope.pop();
+	scoped = 2;
+	return el;
 }
-function bt(t, e = t, n = void 0) {
+function simulateSlots(element, root, mapper) {
-	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);
+	if (typeof root !== "object") {
-	if (t.append = new Proxy(t.append, {
+		mapper = root;
-		apply(f, d, p) {
+		root = element;
-			if (!p.length)
+	}
-				return t;
+	const _default = Symbol.for("default");
-			let b = a.D.createDocumentFragment();
+	const slots = Array.from(root.querySelectorAll("slot")).reduce((out, curr) => Reflect.set(out, curr.name || _default, curr) && out, {});
-			for (let l of p) {
+	const has_d = hasOwn(slots, _default);
-				if (!l || !l.slot) {
+	element.append = new Proxy(element.append, {
-					c && b.appendChild(l);
+		apply(orig, _, els) {
+			if (els[0] === root) return orig.apply(element, els);
+			if (!els.length) return element;
+			const d = enviroment.D.createDocumentFragment();
+			for (const el of els) {
+				if (!el || !el.slot) {
+					if (has_d) d.append(el);
 					continue;
 				}
-				let A = l.slot, _ = o[A];
+				const name = el.slot;
-				tt(l, "remove", "slot"), _ && (X(_, l, n), Reflect.deleteProperty(o, A));
+				const slot = slots[name];
+				elementAttribute(el, "remove", "slot");
+				if (!slot) continue;
+				simulateSlotReplace(slot, el, mapper);
+				Reflect.deleteProperty(slots, name);
 			}
-			return c && (o[r].replaceWith(b), Reflect.deleteProperty(o, r)), t.append = f, t;
+			if (has_d) {
+				slots[_default].replaceWith(d);
+				Reflect.deleteProperty(slots, _default);
 			}
-	}), t !== e) {
+			element.append = orig;
-		let f = Array.from(t.childNodes);
+			return element;
-		f.forEach((d) => d.remove()), t.append(...f);
 		}
-	return e;
+	});
+	if (element !== root) {
+		const els = Array.from(element.childNodes);
+		els.forEach((el) => el.remove());
+		element.append(...els);
 	}
-function X(t, e, n) {
+	return root;
-	n && n(t, e);
+}
+function simulateSlotReplace(slot, element, mapper) {
+	if (mapper) mapper(slot, element);
 	try {
-		t.replaceWith(O(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));
+		slot.replaceWith(assign(element, { className: [element.className, slot.className], dataset: { ...slot.dataset } }));
-	} catch {
+	} catch (_) {
-		t.replaceWith(e);
+		slot.replaceWith(element);
 	}
 }
-k.mark = function(t, e = !1) {
+createElement.mark = function(attrs, is_open = false) {
-	t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
+	attrs = Object.entries(attrs).map(([n, v]) => n + `="${v}"`).join(" ");
-	let n = e ? "" : "/", r = a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`);
+	const end = is_open ? "" : "/";
-	return e && (r.end = a.D.createComment("</dde:mark>")), r;
+	const out = enviroment.D.createComment(`<dde:mark ${attrs}${enviroment.ssr}${end}>`);
+	if (is_open) out.end = enviroment.D.createComment("</dde:mark>");
+	return out;
 };
-function gt(t) {
+function createElementNS(ns) {
-	let e = this;
+	const _this = this;
-	return function(...r) {
+	return function createElementNSCurried(...rest) {
-		T = t;
+		namespace = ns;
-		let o = k.call(e, ...r);
+		const el = createElement.call(_this, ...rest);
-		return T = void 0, o;
+		namespace = void 0;
+		return el;
 	};
 }
-var P = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: U } = a;
+var assign_context = /* @__PURE__ */ new WeakMap();
-function O(t, ...e) {
+var { setDeleteAttr: setDeleteAttr2 } = enviroment;
-	if (!e.length)
+function assign(element, ...attributes) {
-		return t;
+	if (!attributes.length) return element;
-	P.set(t, B(t, this));
+	assign_context.set(element, assignContext(element, this));
-	for (let [n, r] of Object.entries(Object.assign({}, ...e)))
+	for (const [key, value] of Object.entries(Object.assign({}, ...attributes)))
-		z.call(this, t, n, r);
+		assignAttribute.call(this, element, key, value);
-	return P.delete(t), t;
+	assign_context.delete(element);
+	return element;
 }
-function z(t, e, n) {
+function assignAttribute(element, key, value) {
-	let { setRemoveAttr: r, s: o } = B(t, this), c = this;
+	const { setRemoveAttr, s } = assignContext(element, this);
-	n = o.processReactiveAttribute(
+	const _this = this;
-		t,
+	value = s.processReactiveAttribute(
-		e,
+		element,
-		n,
+		key,
-		(d, p) => z.call(c, t, d, p)
+		value,
+		(key2, value2) => assignAttribute.call(_this, element, key2, value2)
 	);
-	let [f] = e;
+	const [k] = key;
-	if (f === "=")
+	if ("=" === k) return setRemoveAttr(key.slice(1), value);
-		return r(e.slice(1), n);
+	if ("." === k) return setDelete(element, key.slice(1), value);
-	if (f === ".")
+	if (/(aria|data)([A-Z])/.test(key)) {
-		return H(t, e.slice(1), n);
+		key = key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-	if (/(aria|data)([A-Z])/.test(e))
+		return setRemoveAttr(key, value);
-		return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), r(e, n);
+	}
-	switch (e === "className" && (e = "class"), e) {
+	if ("className" === key) key = "class";
+	switch (key) {
 		case "xlink:href":
-			return r(e, n, "http://www.w3.org/1999/xlink");
+			return setRemoveAttr(key, value, "http://www.w3.org/1999/xlink");
 		case "textContent":
-			return U(t, e, n);
+			return setDeleteAttr2(element, key, value);
 		case "style":
-			if (typeof n != "object")
+			if (typeof value !== "object") break;
-				break;
+		/* falls through */
 		case "dataset":
-			return M(o, n, H.bind(null, t[e]));
+			return forEachEntries(s, value, setDelete.bind(null, element[key]));
 		case "ariaset":
-			return M(o, n, (d, p) => r("aria-" + d, p));
+			return forEachEntries(s, value, (key2, val) => setRemoveAttr("aria-" + key2, val));
 		case "classList":
-			return Y.call(c, t, n);
+			return classListDeclarative.call(_this, element, value);
 	}
-	return et(t, e) ? U(t, e, n) : r(e, n);
+	return isPropSetter(element, key) ? setDeleteAttr2(element, key, value) : setRemoveAttr(key, value);
 }
-function B(t, e) {
+function assignContext(element, _this) {
-	if (P.has(t))
+	if (assign_context.has(element)) return assign_context.get(element);
-		return P.get(t);
+	const is_svg = element instanceof enviroment.S;
-	let r = (t instanceof a.S ? rt : nt).bind(null, t, "Attribute"), o = L(e);
+	const setRemoveAttr = (is_svg ? setRemoveNS : setRemove).bind(null, element, "Attribute");
-	return { setRemoveAttr: r, s: o };
+	const s = signals(_this);
+	return { setRemoveAttr, s };
 }
-function Y(t, e) {
+function classListDeclarative(element, toggle) {
-	let n = L(this);
+	const s = signals(this);
-	return M(
+	forEachEntries(
-		n,
+		s,
-		e,
+		toggle,
-		(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)
+		(class_name, val) => element.classList.toggle(class_name, val === -1 ? void 0 : Boolean(val))
-	), t;
+	);
+	return element;
 }
-function vt(t) {
+function empty(el) {
-	return Array.from(t.children).forEach((e) => e.remove()), t;
+	Array.from(el.children).forEach((el2) => el2.remove());
+	return el;
 }
-function tt(t, e, n, r) {
+function elementAttribute(element, op, key, value) {
-	return t instanceof a.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r);
+	if (element instanceof enviroment.H)
+		return element[op + "Attribute"](key, value);
+	return element[op + "AttributeNS"](null, key, value);
 }
-function et(t, e) {
+function isPropSetter(el, key) {
-	if (!(e in t))
+	if (!(key in el)) return false;
-		return !1;
+	const des = getPropDescriptor(el, key);
-	let n = I(t, e);
+	return !isUndef(des.set);
-	return !E(n.set);
 }
-function I(t, e) {
+function getPropDescriptor(p, key) {
-	if (t = Object.getPrototypeOf(t), !t)
+	p = Object.getPrototypeOf(p);
-		return {};
+	if (!p) return {};
-	let n = Object.getOwnPropertyDescriptor(t, e);
+	const des = Object.getOwnPropertyDescriptor(p, key);
-	return n || I(t, e);
+	if (!des) return getPropDescriptor(p, key);
+	return des;
 }
-function M(t, e, n) {
+function forEachEntries(s, obj, cb) {
-	if (!(typeof e != "object" || e === null))
+	if (typeof obj !== "object" || obj === null) return;
-		return Object.entries(e).forEach(function([o, c]) {
+	return Object.entries(obj).forEach(function process([key, val]) {
-			o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c));
+		if (!key) return;
+		val = s.processReactiveAttribute(obj, key, val, cb);
+		cb(key, val);
 	});
 }
-function Z(t) {
+function attrArrToStr(attr) {
-	return Array.isArray(t) ? t.filter(Boolean).join(" ") : t;
+	return Array.isArray(attr) ? attr.filter(Boolean).join(" ") : attr;
 }
-function nt(t, e, n, r) {
+function setRemove(obj, prop, key, val) {
-	return t[(E(r) ? "remove" : "set") + e](n, Z(r));
+	return obj[(isUndef(val) ? "remove" : "set") + prop](key, attrArrToStr(val));
 }
-function rt(t, e, n, r, o = null) {
+function setRemoveNS(obj, prop, key, val, ns = null) {
-	return t[(E(r) ? "remove" : "set") + e + "NS"](o, n, Z(r));
+	return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, attrArrToStr(val));
 }
-function H(t, e, n) {
+function setDelete(obj, key, val) {
-	if (Reflect.set(t, e, n), !!E(n))
+	Reflect.set(obj, key, val);
-		return Reflect.deleteProperty(t, e);
+	if (!isUndef(val)) return;
+	return Reflect.deleteProperty(obj, key);
 }
 
 // src/events-observer.js
-var w = a.M ? ot() : new Proxy({}, {
+var c_ch_o = enviroment.M ? connectionsChangesObserverConstructor() : new Proxy({}, {
 	get() {
 		return () => {
 		};
 	}
 });
-function ot() {
+function connectionsChangesObserverConstructor() {
-	let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(u) {
+	const store = /* @__PURE__ */ new Map();
-		for (let s of u)
+	let is_observing = false;
-			if (s.type === "childList") {
+	const observerListener = (stop2) => function(mutations) {
-				if (l(s.addedNodes, !0)) {
+		for (const mutation of mutations) {
-					i();
+			if (mutation.type !== "childList") continue;
+			if (observerAdded(mutation.addedNodes, true)) {
+				stop2();
 				continue;
 			}
-				A(s.removedNodes, !0) && i();
+			if (observerRemoved(mutation.removedNodes, true))
-			}
+				stop2();
-	}, r = new a.M(n(d));
-	return {
-		observe(i) {
-			let u = new a.M(n(() => {
-			}));
-			return u.observe(i, { childList: !0, subtree: !0 }), () => u.disconnect();
-		},
-		onConnected(i, u) {
-			f();
-			let s = c(i);
-			s.connected.has(u) || (s.connected.add(u), s.length_c += 1);
-		},
-		offConnected(i, u) {
-			if (!t.has(i))
-				return;
-			let s = t.get(i);
-			s.connected.has(u) && (s.connected.delete(u), s.length_c -= 1, o(i, s));
-		},
-		onDisconnected(i, u) {
-			f();
-			let s = c(i);
-			s.disconnected.has(u) || (s.disconnected.add(u), s.length_d += 1);
-		},
-		offDisconnected(i, u) {
-			if (!t.has(i))
-				return;
-			let s = t.get(i);
-			s.disconnected.has(u) && (s.disconnected.delete(u), s.length_d -= 1, o(i, s));
 		}
 	};
-	function o(i, u) {
+	const observer = new enviroment.M(observerListener(stop));
-		u.length_c || u.length_d || (t.delete(i), d());
+	return {
+		observe(element) {
+			const o = new enviroment.M(observerListener(() => {
+			}));
+			o.observe(element, { childList: true, subtree: true });
+			return () => o.disconnect();
+		},
+		onConnected(element, listener) {
+			start();
+			const listeners = getElementStore(element);
+			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);
+			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);
+			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);
+			if (!ls.disconnected.has(listener)) return;
+			ls.disconnected.delete(listener);
+			ls.length_d -= 1;
+			cleanWhenOff(element, ls);
 		}
-	function c(i) {
+	};
-		if (t.has(i))
+	function cleanWhenOff(element, ls) {
-			return t.get(i);
+		if (ls.length_c || ls.length_d)
-		let u = {
+			return;
+		store.delete(element);
+		stop();
+	}
+	function getElementStore(element) {
+		if (store.has(element)) return store.get(element);
+		const out = {
 			connected: /* @__PURE__ */ new WeakSet(),
 			length_c: 0,
 			disconnected: /* @__PURE__ */ new WeakSet(),
 			length_d: 0
 		};
-		return t.set(i, u), u;
+		store.set(element, out);
+		return out;
 	}
-	function f() {
+	function start() {
-		e || (e = !0, r.observe(a.D.body, { childList: !0, subtree: !0 }));
+		if (is_observing) return;
+		is_observing = true;
+		observer.observe(enviroment.D.body, { childList: true, subtree: true });
 	}
-	function d() {
+	function stop() {
-		!e || t.size || (e = !1, r.disconnect());
+		if (!is_observing || store.size) return;
+		is_observing = false;
+		observer.disconnect();
 	}
-	function p() {
+	function requestIdle() {
-		return new Promise(function(i) {
+		return new Promise(function(resolve) {
-			(requestIdleCallback || requestAnimationFrame)(i);
+			(requestIdleCallback || requestAnimationFrame)(resolve);
 		});
 	}
-	async function b(i) {
+	async function collectChildren(element) {
-		t.size > 30 && await p();
+		if (store.size > 30)
-		let u = [];
+			await requestIdle();
-		if (!(i instanceof Node))
+		const out = [];
-			return u;
+		if (!(element instanceof Node)) return out;
-		for (let s of t.keys())
+		for (const el of store.keys()) {
-			s === i || !(s instanceof Node) || i.contains(s) && u.push(s);
+			if (el === element || !(el instanceof Node)) continue;
-		return u;
+			if (element.contains(el))
+				out.push(el);
 		}
-	function l(i, u) {
+		return out;
-		let s = !1;
-		for (let h of i) {
-			if (u && b(h).then(l), !t.has(h))
-				continue;
-			let m = t.get(h);
-			m.length_c && (h.dispatchEvent(new Event(g)), m.connected = /* @__PURE__ */ new WeakSet(), m.length_c = 0, m.length_d || t.delete(h), s = !0);
 	}
-		return s;
+	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);
+			if (!ls.length_c) continue;
+			element.dispatchEvent(new Event(evc));
+			ls.connected = /* @__PURE__ */ new WeakSet();
+			ls.length_c = 0;
+			if (!ls.length_d) store.delete(element);
+			out = true;
 		}
-	function A(i, u) {
+		return out;
-		let s = !1;
-		for (let h of i)
-			u && b(h).then(A), !(!t.has(h) || !t.get(h).length_d) && ((globalThis.queueMicrotask || setTimeout)(_(h)), s = !0);
-		return s;
 	}
-	function _(i) {
+	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);
+			if (!ls.length_d) continue;
+			(globalThis.queueMicrotask || setTimeout)(dispatchRemove(element));
+			out = true;
+		}
+		return out;
+	}
+	function dispatchRemove(element) {
 		return () => {
-			i.isConnected || (i.dispatchEvent(new Event(y)), t.delete(i));
+			if (element.isConnected) return;
+			element.dispatchEvent(new Event(evd));
+			store.delete(element);
 		};
 	}
 }
 
 // src/customElement.js
-function Dt(t, e, n, r = it) {
+function customElementRender(custom_element, target, render, props = observedAttributes2) {
-	S.push({
+	scope.push({
-		scope: t,
+		scope: custom_element,
-		host: (...f) => f.length ? f.forEach((d) => d(t)) : t
+		host: (...c) => c.length ? c.forEach((c2) => c2(custom_element)) : custom_element
-	}), typeof r == "function" && (r = r.call(t, t));
+	});
-	let o = t[x];
+	if (typeof props === "function") props = props.call(custom_element, custom_element);
-	o || ct(t);
+	const is_lte = custom_element[keyLTE];
-	let c = n.call(t, r);
+	if (!is_lte) lifecyclesToEvents(custom_element);
-	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);
+	const out = render.call(custom_element, props);
+	if (!is_lte) custom_element.dispatchEvent(new Event(evc));
+	if (target.nodeType === 11 && typeof target.mode === "string")
+		custom_element.addEventListener(evd, c_ch_o.observe(target), { once: true });
+	scope.pop();
+	return target.append(out);
 }
-function ct(t) {
+function lifecyclesToEvents(class_declaration) {
-	return W(t.prototype, "connectedCallback", function(e, n, r) {
+	wrapMethod(class_declaration.prototype, "connectedCallback", function(target, thisArg, detail) {
-		e.apply(n, r), n.dispatchEvent(new Event(g));
+		target.apply(thisArg, detail);
-	}), W(t.prototype, "disconnectedCallback", function(e, n, r) {
+		thisArg.dispatchEvent(new Event(evc));
-		e.apply(n, r), (globalThis.queueMicrotask || setTimeout)(
+	});
-			() => !n.isConnected && n.dispatchEvent(new Event(y))
+	wrapMethod(class_declaration.prototype, "disconnectedCallback", function(target, thisArg, detail) {
+		target.apply(thisArg, detail);
+		(globalThis.queueMicrotask || setTimeout)(
+			() => !thisArg.isConnected && thisArg.dispatchEvent(new Event(evd))
 		);
-	}), W(t.prototype, "attributeChangedCallback", function(e, n, r) {
+	});
-		let [o, , c] = r;
+	wrapMethod(class_declaration.prototype, "attributeChangedCallback", function(target, thisArg, detail) {
-		n.dispatchEvent(new CustomEvent(D, {
+		const [attribute, , value] = detail;
-			detail: [o, c]
+		thisArg.dispatchEvent(new CustomEvent(eva, {
-		})), e.apply(n, r);
+			detail: [attribute, value]
-	}), t.prototype[x] = !0, t;
+		}));
+		target.apply(thisArg, detail);
+	});
+	class_declaration.prototype[keyLTE] = true;
+	return class_declaration;
 }
-function W(t, e, n) {
+function wrapMethod(obj, method, apply) {
-	t[e] = new Proxy(t[e] || (() => {
+	obj[method] = new Proxy(obj[method] || (() => {
-	}), { apply: n });
+	}), { apply });
 }
-function it(t) {
+function observedAttributes2(instance) {
-	return F(t, (e, n) => e.getAttribute(n));
+	return observedAttributes(instance, (i, n) => i.getAttribute(n));
 }
 
 // src/events.js
-function _t(t, e, n) {
+function dispatchEvent(name, options, host) {
-	return e || (e = {}), function(o, ...c) {
+	if (!options) options = {};
-		n && (c.unshift(o), o = typeof n == "function" ? n() : n);
+	return function dispatch(element, ...d) {
-		let f = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
+		if (host) {
-		return o.dispatchEvent(f);
+			d.unshift(element);
+			element = typeof host === "function" ? host() : host;
+		}
+		const event = d.length ? new CustomEvent(name, Object.assign({ detail: d[0] }, options)) : new Event(name, options);
+		return element.dispatchEvent(event);
 	};
 }
-function R(t, e, n) {
+function on(event, listener, options) {
-	return function(o) {
+	return function registerElement(element) {
-		return o.addEventListener(t, e, n), o;
+		element.addEventListener(event, listener, options);
+		return element;
 	};
 }
-var G = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
+var lifeOptions = (obj) => Object.assign({}, typeof obj === "object" ? obj : null, { once: true });
-R.connected = function(t, e) {
+on.connected = function(listener, options) {
-	return e = G(e), function(r) {
+	options = lifeOptions(options);
-		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 function registerElement(element) {
+		element.addEventListener(evc, listener, options);
+		if (element[keyLTE]) return element;
+		if (element.isConnected) return element.dispatchEvent(new Event(evc)), element;
+		const c = onAbort(options.signal, () => c_ch_o.offConnected(element, listener));
+		if (c) c_ch_o.onConnected(element, listener);
+		return element;
 	};
 };
-R.disconnected = function(t, e) {
+on.disconnected = function(listener, options) {
-	return e = G(e), function(r) {
+	options = lifeOptions(options);
-		return r.addEventListener(y, t, e), r[x] || N(e.signal, () => w.offDisconnected(r, t)) && w.onDisconnected(r, t), r;
+	return function registerElement(element) {
+		element.addEventListener(evd, listener, options);
+		if (element[keyLTE]) return element;
+		const c = onAbort(options.signal, () => c_ch_o.offDisconnected(element, listener));
+		if (c) c_ch_o.onDisconnected(element, listener);
+		return element;
 	};
 };
-var j = /* @__PURE__ */ new WeakMap();
+var store_abort = /* @__PURE__ */ new WeakMap();
-R.disconnectedAsAbort = function(t) {
+on.disconnectedAsAbort = function(host) {
-	if (j.has(t))
+	if (store_abort.has(host)) return store_abort.get(host);
-		return j.get(t);
+	const a = new AbortController();
-	let e = new AbortController();
+	store_abort.set(host, a);
-	return j.set(t, e), t(R.disconnected(() => e.abort())), e;
+	host(on.disconnected(() => a.abort()));
+	return a;
 };
-var st = /* @__PURE__ */ new WeakSet();
+var els_attribute_store = /* @__PURE__ */ new WeakSet();
-R.attributeChanged = function(t, e) {
+on.attributeChanged = function(listener, options) {
-	return typeof e != "object" && (e = {}), function(r) {
+	if (typeof options !== "object")
-		if (r.addEventListener(D, t, e), r[x] || st.has(r) || !a.M)
+		options = {};
-			return r;
+	return function registerElement(element) {
-		let o = new a.M(function(f) {
+		element.addEventListener(eva, listener, options);
-			for (let { attributeName: d, target: p } of f)
+		if (element[keyLTE] || els_attribute_store.has(element))
-				p.dispatchEvent(
+			return element;
-					new CustomEvent(D, { detail: [d, p.getAttribute(d)] })
+		if (!enviroment.M) return element;
+		const observer = new enviroment.M(function(mutations) {
+			for (const { attributeName, target } of mutations)
+				target.dispatchEvent(
+					new CustomEvent(eva, { detail: [attributeName, target.getAttribute(attributeName)] })
 				);
 		});
-		return N(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;
+		const c = onAbort(options.signal, () => observer.disconnect());
+		if (c) observer.observe(element, { attributes: true });
+		return element;
 	};
 };
 
 globalThis.dde= {
-	assign: O,
+	assign,
-	assignAttribute: z,
+	assignAttribute,
-	chainableAppend: Q,
+	chainableAppend,
-	classListDeclarative: Y,
+	classListDeclarative,
-	createElement: k,
+	createElement,
-	createElementNS: gt,
+	createElementNS,
-	customElementRender: Dt,
+	customElementRender,
-	customElementWithDDE: ct,
+	customElementWithDDE: lifecyclesToEvents,
-	dispatchEvent: _t,
+	dispatchEvent,
-	el: k,
+	el: createElement,
-	elNS: gt,
+	elNS: createElementNS,
-	elementAttribute: tt,
+	elementAttribute,
-	empty: vt,
+	empty,
-	lifecyclesToEvents: ct,
+	lifecyclesToEvents,
-	observedAttributes: it,
+	observedAttributes: observedAttributes2,
-	on: R,
+	on,
-	registerReactivity: V,
+	registerReactivity,
-	scope: S,
+	scope,
-	simulateSlots: bt
+	simulateSlots
 };
 
 })();

dist/esm-with-signals.d.ts

@@ -47,7 +47,7 @@ type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagName
 type textContent= string | ddeSignal<string>;
 export function el<
 	TAG extends keyof ExtendedHTMLElementTagNameMap,
-	EL extends (TAG extends keyof ExtendedHTMLElementTagNameMap ? ExtendedHTMLElementTagNameMap[TAG] : HTMLElement)
+	EL extends ExtendedHTMLElementTagNameMap[TAG]
 >(
 	tag_name: TAG,
 	attrs?: ElementAttributes<EL> | textContent,
@@ -58,7 +58,7 @@ export function el(
 ): ddeDocumentFragment
 export function el(
 	tag_name: string,
-	attrs?: ElementAttributes<HTMLElement>,
+	attrs?: ElementAttributes<HTMLElement> | textContent,
 	...addons: ddeElementAddon<HTMLElement>[]
 ): ddeHTMLElement
 
@@ -101,7 +101,18 @@ export function elNS(
 export { elNS as createElementNS }
 
 export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
-export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: EL): EL
+/**
+ * Mapper function (optional). Pass for coppying attributes, this is NOT implemented by {@link simulateSlots} itself!
+ * */
+type simulateSlotsMapper= (body: HTMLSlotElement, el: HTMLElement)=> void;
+/** Simulate slots for ddeComponents */
+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 dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):
 	(element: SupportedElement, data?: any)=> void;

dist/esm.d.ts

@@ -47,7 +47,7 @@ type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagName
 type textContent= string | ddeSignal<string>;
 export function el<
 	TAG extends keyof ExtendedHTMLElementTagNameMap,
-	EL extends (TAG extends keyof ExtendedHTMLElementTagNameMap ? ExtendedHTMLElementTagNameMap[TAG] : HTMLElement)
+	EL extends ExtendedHTMLElementTagNameMap[TAG]
 >(
 	tag_name: TAG,
 	attrs?: ElementAttributes<EL> | textContent,
@@ -58,7 +58,7 @@ export function el(
 ): ddeDocumentFragment
 export function el(
 	tag_name: string,
-	attrs?: ElementAttributes<HTMLElement>,
+	attrs?: ElementAttributes<HTMLElement> | textContent,
 	...addons: ddeElementAddon<HTMLElement>[]
 ): ddeHTMLElement
 
@@ -101,7 +101,18 @@ export function elNS(
 export { elNS as createElementNS }
 
 export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
-export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: EL): EL
+/**
+ * Mapper function (optional). Pass for coppying attributes, this is NOT implemented by {@link simulateSlots} itself!
+ * */
+type simulateSlotsMapper= (body: HTMLSlotElement, el: HTMLElement)=> void;
+/** Simulate slots for ddeComponents */
+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 dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):
 	(element: SupportedElement, data?: any)=> void;

dist/esm.js

@@ -1,45 +1,50 @@
 // src/signals-common.js
-var C = {
+var signals_global = {
-	isSignal(t) {
+	isSignal(attributes) {
-		return !1;
+		return false;
 	},
-	processReactiveAttribute(t, e, n, r) {
+	processReactiveAttribute(obj, key, attr, set) {
-		return n;
+		return attr;
 	}
 };
-function V(t, e = !0) {
+function registerReactivity(def, global = true) {
-	return e ? Object.assign(C, t) : (Object.setPrototypeOf(t, C), t);
+	if (global) return Object.assign(signals_global, def);
+	Object.setPrototypeOf(def, signals_global);
+	return def;
 }
-function L(t) {
+function signals(_this) {
-	return C.isPrototypeOf(t) && t !== C ? t : C;
+	return signals_global.isPrototypeOf(_this) && _this !== signals_global ? _this : signals_global;
 }
 
 // src/helpers.js
-var q = (...t) => Object.prototype.hasOwnProperty.call(...t);
+var hasOwn = (...a) => Object.prototype.hasOwnProperty.call(...a);
-function E(t) {
+function isUndef(value) {
-	return typeof t > "u";
+	return typeof value === "undefined";
 }
-function N(t, e) {
+function onAbort(signal, listener) {
-	if (!t || !(t instanceof AbortSignal))
+	if (!signal || !(signal instanceof AbortSignal))
-		return !0;
+		return true;
-	if (!t.aborted)
+	if (signal.aborted)
-		return t.addEventListener("abort", e), function() {
+		return;
-			t.removeEventListener("abort", e);
+	signal.addEventListener("abort", listener);
+	return function cleanUp() {
+		signal.removeEventListener("abort", listener);
 	};
 }
-function F(t, e) {
+function observedAttributes(instance, observedAttribute) {
-	let { observedAttributes: n = [] } = t.constructor;
+	const { observedAttributes: observedAttributes3 = [] } = instance.constructor;
-	return n.reduce(function(r, o) {
+	return observedAttributes3.reduce(function(out, name) {
-		return r[J(o)] = e(t, o), r;
+		out[kebabToCamel(name)] = observedAttribute(instance, name);
+		return out;
 	}, {});
 }
-function J(t) {
+function kebabToCamel(name) {
-	return t.replace(/-./g, (e) => e[1].toUpperCase());
+	return name.replace(/-./g, (x) => x[1].toUpperCase());
 }
 
 // src/dom-common.js
-var a = {
+var enviroment = {
-	setDeleteAttr: K,
+	setDeleteAttr,
 	ssr: "",
 	D: globalThis.document,
 	F: globalThis.DocumentFragment,
@@ -47,422 +52,545 @@ var a = {
 	S: globalThis.SVGElement,
 	M: globalThis.MutationObserver
 };
-function K(t, e, n) {
+function setDeleteAttr(obj, prop, val) {
-	if (Reflect.set(t, e, n), !!E(n)) {
+	Reflect.set(obj, prop, val);
-		if (Reflect.deleteProperty(t, e), t instanceof a.H && t.getAttribute(e) === "undefined")
+	if (!isUndef(val)) return;
-			return t.removeAttribute(e);
+	Reflect.deleteProperty(obj, prop);
-		if (Reflect.get(t, e) === "undefined")
+	if (obj instanceof enviroment.H && obj.getAttribute(prop) === "undefined")
-			return Reflect.set(t, e, "");
+		return obj.removeAttribute(prop);
+	if (Reflect.get(obj, prop) === "undefined")
+		return Reflect.set(obj, prop, "");
 }
-}
+var keyLTE = "__dde_lifecyclesToEvents";
-var x = "__dde_lifecyclesToEvents", g = "dde:connected", y = "dde:disconnected", D = "dde:attributeChanged";
+var evc = "dde:connected";
+var evd = "dde:disconnected";
+var eva = "dde:attributeChanged";
 
 // src/dom.js
-var v = [{
+var scopes = [{
 	get scope() {
-		return a.D.body;
+		return enviroment.D.body;
 	},
-	host: (t) => t ? t(a.D.body) : a.D.body,
+	host: (c) => c ? c(enviroment.D.body) : enviroment.D.body,
-	prevent: !0
+	prevent: true
-}], S = {
+}];
+var scope = {
 	get current() {
-		return v[v.length - 1];
+		return scopes[scopes.length - 1];
 	},
 	get host() {
 		return this.current.host;
 	},
 	preventDefault() {
-		let { current: t } = this;
+		const { current } = this;
-		return t.prevent = !0, t;
+		current.prevent = true;
+		return current;
 	},
 	get state() {
-		return [...v];
+		return [...scopes];
 	},
-	push(t = {}) {
+	push(s = {}) {
-		return v.push(Object.assign({}, this.current, { prevent: !1 }, t));
+		return scopes.push(Object.assign({}, this.current, { prevent: false }, s));
 	},
 	pushRoot() {
-		return v.push(v[0]);
+		return scopes.push(scopes[0]);
 	},
 	pop() {
-		if (v.length !== 1)
+		if (scopes.length === 1) return;
-			return v.pop();
+		return scopes.pop();
 	}
 };
-function $(...t) {
+function append(...els) {
-	return this.appendOriginal(...t), this;
+	this.appendOriginal(...els);
+	return this;
 }
-function Q(t) {
+function chainableAppend(el) {
-	return t.append === $ || (t.appendOriginal = t.append, t.append = $), t;
+	if (el.append === append) return el;
+	el.appendOriginal = el.append;
+	el.append = append;
+	return el;
 }
-var T;
+var namespace;
-function k(t, e, ...n) {
+function createElement(tag, attributes, ...addons) {
-	let r = L(this), o = 0, c, f;
+	const s = signals(this);
-	switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {
+	let scoped = 0;
-		case typeof t == "function": {
+	let el, el_host;
-			o = 1, S.push({ scope: t, host: (...b) => b.length ? (o === 1 ? n.unshift(...b) : b.forEach((l) => l(f)), void 0) : f }), c = t(e || void 0);
+	if (Object(attributes) !== attributes || s.isSignal(attributes))
-			let d = c instanceof a.F;
+		attributes = { textContent: attributes };
-			if (c.nodeName === "#comment")
+	switch (true) {
-				break;
+		case typeof tag === "function": {
-			let p = k.mark({
+			scoped = 1;
+			scope.push({ scope: tag, host: (...c) => c.length ? (scoped === 1 ? addons.unshift(...c) : c.forEach((c2) => c2(el_host)), void 0) : el_host });
+			el = tag(attributes || void 0);
+			const is_fragment = el instanceof enviroment.F;
+			if (el.nodeName === "#comment") break;
+			const el_mark = createElement.mark({
 				type: "component",
-				name: t.name,
+				name: tag.name,
-				host: d ? "this" : "parentElement"
+				host: is_fragment ? "this" : "parentElement"
 			});
-			c.prepend(p), d && (f = p);
+			el.prepend(el_mark);
+			if (is_fragment) el_host = el_mark;
 			break;
 		}
-		case t === "#text":
+		case tag === "#text":
-			c = O.call(this, a.D.createTextNode(""), e);
+			el = assign.call(this, enviroment.D.createTextNode(""), attributes);
 			break;
-		case (t === "<>" || !t):
+		case (tag === "<>" || !tag):
-			c = O.call(this, a.D.createDocumentFragment(), e);
+			el = assign.call(this, enviroment.D.createDocumentFragment(), attributes);
 			break;
-		case !!T:
+		case Boolean(namespace):
-			c = O.call(this, a.D.createElementNS(T, t), e);
+			el = assign.call(this, enviroment.D.createElementNS(namespace, tag), attributes);
 			break;
-		case !c:
+		case !el:
-			c = O.call(this, a.D.createElement(t), e);
+			el = assign.call(this, enviroment.D.createElement(tag), attributes);
 	}
-	return Q(c), f || (f = c), n.forEach((d) => d(f)), o && S.pop(), o = 2, c;
+	chainableAppend(el);
+	if (!el_host) el_host = el;
+	addons.forEach((c) => c(el_host));
+	if (scoped) scope.pop();
+	scoped = 2;
+	return el;
 }
-function bt(t, e = t, n = void 0) {
+function simulateSlots(element, root, mapper) {
-	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);
+	if (typeof root !== "object") {
-	if (t.append = new Proxy(t.append, {
+		mapper = root;
-		apply(f, d, p) {
+		root = element;
-			if (!p.length)
+	}
-				return t;
+	const _default = Symbol.for("default");
-			let b = a.D.createDocumentFragment();
+	const slots = Array.from(root.querySelectorAll("slot")).reduce((out, curr) => Reflect.set(out, curr.name || _default, curr) && out, {});
-			for (let l of p) {
+	const has_d = hasOwn(slots, _default);
-				if (!l || !l.slot) {
+	element.append = new Proxy(element.append, {
-					c && b.appendChild(l);
+		apply(orig, _, els) {
+			if (els[0] === root) return orig.apply(element, els);
+			if (!els.length) return element;
+			const d = enviroment.D.createDocumentFragment();
+			for (const el of els) {
+				if (!el || !el.slot) {
+					if (has_d) d.append(el);
 					continue;
 				}
-				let A = l.slot, _ = o[A];
+				const name = el.slot;
-				tt(l, "remove", "slot"), _ && (X(_, l, n), Reflect.deleteProperty(o, A));
+				const slot = slots[name];
+				elementAttribute(el, "remove", "slot");
+				if (!slot) continue;
+				simulateSlotReplace(slot, el, mapper);
+				Reflect.deleteProperty(slots, name);
 			}
-			return c && (o[r].replaceWith(b), Reflect.deleteProperty(o, r)), t.append = f, t;
+			if (has_d) {
+				slots[_default].replaceWith(d);
+				Reflect.deleteProperty(slots, _default);
 			}
-	}), t !== e) {
+			element.append = orig;
-		let f = Array.from(t.childNodes);
+			return element;
-		f.forEach((d) => d.remove()), t.append(...f);
 		}
-	return e;
+	});
+	if (element !== root) {
+		const els = Array.from(element.childNodes);
+		els.forEach((el) => el.remove());
+		element.append(...els);
 	}
-function X(t, e, n) {
+	return root;
-	n && n(t, e);
+}
+function simulateSlotReplace(slot, element, mapper) {
+	if (mapper) mapper(slot, element);
 	try {
-		t.replaceWith(O(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));
+		slot.replaceWith(assign(element, { className: [element.className, slot.className], dataset: { ...slot.dataset } }));
-	} catch {
+	} catch (_) {
-		t.replaceWith(e);
+		slot.replaceWith(element);
 	}
 }
-k.mark = function(t, e = !1) {
+createElement.mark = function(attrs, is_open = false) {
-	t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" ");
+	attrs = Object.entries(attrs).map(([n, v]) => n + `="${v}"`).join(" ");
-	let n = e ? "" : "/", r = a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`);
+	const end = is_open ? "" : "/";
-	return e && (r.end = a.D.createComment("</dde:mark>")), r;
+	const out = enviroment.D.createComment(`<dde:mark ${attrs}${enviroment.ssr}${end}>`);
+	if (is_open) out.end = enviroment.D.createComment("</dde:mark>");
+	return out;
 };
-function gt(t) {
+function createElementNS(ns) {
-	let e = this;
+	const _this = this;
-	return function(...r) {
+	return function createElementNSCurried(...rest) {
-		T = t;
+		namespace = ns;
-		let o = k.call(e, ...r);
+		const el = createElement.call(_this, ...rest);
-		return T = void 0, o;
+		namespace = void 0;
+		return el;
 	};
 }
-var P = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: U } = a;
+var assign_context = /* @__PURE__ */ new WeakMap();
-function O(t, ...e) {
+var { setDeleteAttr: setDeleteAttr2 } = enviroment;
-	if (!e.length)
+function assign(element, ...attributes) {
-		return t;
+	if (!attributes.length) return element;
-	P.set(t, B(t, this));
+	assign_context.set(element, assignContext(element, this));
-	for (let [n, r] of Object.entries(Object.assign({}, ...e)))
+	for (const [key, value] of Object.entries(Object.assign({}, ...attributes)))
-		z.call(this, t, n, r);
+		assignAttribute.call(this, element, key, value);
-	return P.delete(t), t;
+	assign_context.delete(element);
+	return element;
 }
-function z(t, e, n) {
+function assignAttribute(element, key, value) {
-	let { setRemoveAttr: r, s: o } = B(t, this), c = this;
+	const { setRemoveAttr, s } = assignContext(element, this);
-	n = o.processReactiveAttribute(
+	const _this = this;
-		t,
+	value = s.processReactiveAttribute(
-		e,
+		element,
-		n,
+		key,
-		(d, p) => z.call(c, t, d, p)
+		value,
+		(key2, value2) => assignAttribute.call(_this, element, key2, value2)
 	);
-	let [f] = e;
+	const [k] = key;
-	if (f === "=")
+	if ("=" === k) return setRemoveAttr(key.slice(1), value);
-		return r(e.slice(1), n);
+	if ("." === k) return setDelete(element, key.slice(1), value);
-	if (f === ".")
+	if (/(aria|data)([A-Z])/.test(key)) {
-		return H(t, e.slice(1), n);
+		key = key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-	if (/(aria|data)([A-Z])/.test(e))
+		return setRemoveAttr(key, value);
-		return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), r(e, n);
+	}
-	switch (e === "className" && (e = "class"), e) {
+	if ("className" === key) key = "class";
+	switch (key) {
 		case "xlink:href":
-			return r(e, n, "http://www.w3.org/1999/xlink");
+			return setRemoveAttr(key, value, "http://www.w3.org/1999/xlink");
 		case "textContent":
-			return U(t, e, n);
+			return setDeleteAttr2(element, key, value);
 		case "style":
-			if (typeof n != "object")
+			if (typeof value !== "object") break;
-				break;
+		/* falls through */
 		case "dataset":
-			return M(o, n, H.bind(null, t[e]));
+			return forEachEntries(s, value, setDelete.bind(null, element[key]));
 		case "ariaset":
-			return M(o, n, (d, p) => r("aria-" + d, p));
+			return forEachEntries(s, value, (key2, val) => setRemoveAttr("aria-" + key2, val));
 		case "classList":
-			return Y.call(c, t, n);
+			return classListDeclarative.call(_this, element, value);
 	}
-	return et(t, e) ? U(t, e, n) : r(e, n);
+	return isPropSetter(element, key) ? setDeleteAttr2(element, key, value) : setRemoveAttr(key, value);
 }
-function B(t, e) {
+function assignContext(element, _this) {
-	if (P.has(t))
+	if (assign_context.has(element)) return assign_context.get(element);
-		return P.get(t);
+	const is_svg = element instanceof enviroment.S;
-	let r = (t instanceof a.S ? rt : nt).bind(null, t, "Attribute"), o = L(e);
+	const setRemoveAttr = (is_svg ? setRemoveNS : setRemove).bind(null, element, "Attribute");
-	return { setRemoveAttr: r, s: o };
+	const s = signals(_this);
+	return { setRemoveAttr, s };
 }
-function Y(t, e) {
+function classListDeclarative(element, toggle) {
-	let n = L(this);
+	const s = signals(this);
-	return M(
+	forEachEntries(
-		n,
+		s,
-		e,
+		toggle,
-		(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)
+		(class_name, val) => element.classList.toggle(class_name, val === -1 ? void 0 : Boolean(val))
-	), t;
+	);
+	return element;
 }
-function vt(t) {
+function empty(el) {
-	return Array.from(t.children).forEach((e) => e.remove()), t;
+	Array.from(el.children).forEach((el2) => el2.remove());
+	return el;
 }
-function tt(t, e, n, r) {
+function elementAttribute(element, op, key, value) {
-	return t instanceof a.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r);
+	if (element instanceof enviroment.H)
+		return element[op + "Attribute"](key, value);
+	return element[op + "AttributeNS"](null, key, value);
 }
-function et(t, e) {
+function isPropSetter(el, key) {
-	if (!(e in t))
+	if (!(key in el)) return false;
-		return !1;
+	const des = getPropDescriptor(el, key);
-	let n = I(t, e);
+	return !isUndef(des.set);
-	return !E(n.set);
 }
-function I(t, e) {
+function getPropDescriptor(p, key) {
-	if (t = Object.getPrototypeOf(t), !t)
+	p = Object.getPrototypeOf(p);
-		return {};
+	if (!p) return {};
-	let n = Object.getOwnPropertyDescriptor(t, e);
+	const des = Object.getOwnPropertyDescriptor(p, key);
-	return n || I(t, e);
+	if (!des) return getPropDescriptor(p, key);
+	return des;
 }
-function M(t, e, n) {
+function forEachEntries(s, obj, cb) {
-	if (!(typeof e != "object" || e === null))
+	if (typeof obj !== "object" || obj === null) return;
-		return Object.entries(e).forEach(function([o, c]) {
+	return Object.entries(obj).forEach(function process([key, val]) {
-			o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c));
+		if (!key) return;
+		val = s.processReactiveAttribute(obj, key, val, cb);
+		cb(key, val);
 	});
 }
-function Z(t) {
+function attrArrToStr(attr) {
-	return Array.isArray(t) ? t.filter(Boolean).join(" ") : t;
+	return Array.isArray(attr) ? attr.filter(Boolean).join(" ") : attr;
 }
-function nt(t, e, n, r) {
+function setRemove(obj, prop, key, val) {
-	return t[(E(r) ? "remove" : "set") + e](n, Z(r));
+	return obj[(isUndef(val) ? "remove" : "set") + prop](key, attrArrToStr(val));
 }
-function rt(t, e, n, r, o = null) {
+function setRemoveNS(obj, prop, key, val, ns = null) {
-	return t[(E(r) ? "remove" : "set") + e + "NS"](o, n, Z(r));
+	return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, attrArrToStr(val));
 }
-function H(t, e, n) {
+function setDelete(obj, key, val) {
-	if (Reflect.set(t, e, n), !!E(n))
+	Reflect.set(obj, key, val);
-		return Reflect.deleteProperty(t, e);
+	if (!isUndef(val)) return;
+	return Reflect.deleteProperty(obj, key);
 }
 
 // src/events-observer.js
-var w = a.M ? ot() : new Proxy({}, {
+var c_ch_o = enviroment.M ? connectionsChangesObserverConstructor() : new Proxy({}, {
 	get() {
 		return () => {
 		};
 	}
 });
-function ot() {
+function connectionsChangesObserverConstructor() {
-	let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(u) {
+	const store = /* @__PURE__ */ new Map();
-		for (let s of u)
+	let is_observing = false;
-			if (s.type === "childList") {
+	const observerListener = (stop2) => function(mutations) {
-				if (l(s.addedNodes, !0)) {
+		for (const mutation of mutations) {
-					i();
+			if (mutation.type !== "childList") continue;
+			if (observerAdded(mutation.addedNodes, true)) {
+				stop2();
 				continue;
 			}
-				A(s.removedNodes, !0) && i();
+			if (observerRemoved(mutation.removedNodes, true))
-			}
+				stop2();
-	}, r = new a.M(n(d));
-	return {
-		observe(i) {
-			let u = new a.M(n(() => {
-			}));
-			return u.observe(i, { childList: !0, subtree: !0 }), () => u.disconnect();
-		},
-		onConnected(i, u) {
-			f();
-			let s = c(i);
-			s.connected.has(u) || (s.connected.add(u), s.length_c += 1);
-		},
-		offConnected(i, u) {
-			if (!t.has(i))
-				return;
-			let s = t.get(i);
-			s.connected.has(u) && (s.connected.delete(u), s.length_c -= 1, o(i, s));
-		},
-		onDisconnected(i, u) {
-			f();
-			let s = c(i);
-			s.disconnected.has(u) || (s.disconnected.add(u), s.length_d += 1);
-		},
-		offDisconnected(i, u) {
-			if (!t.has(i))
-				return;
-			let s = t.get(i);
-			s.disconnected.has(u) && (s.disconnected.delete(u), s.length_d -= 1, o(i, s));
 		}
 	};
-	function o(i, u) {
+	const observer = new enviroment.M(observerListener(stop));
-		u.length_c || u.length_d || (t.delete(i), d());
+	return {
+		observe(element) {
+			const o = new enviroment.M(observerListener(() => {
+			}));
+			o.observe(element, { childList: true, subtree: true });
+			return () => o.disconnect();
+		},
+		onConnected(element, listener) {
+			start();
+			const listeners = getElementStore(element);
+			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);
+			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);
+			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);
+			if (!ls.disconnected.has(listener)) return;
+			ls.disconnected.delete(listener);
+			ls.length_d -= 1;
+			cleanWhenOff(element, ls);
 		}
-	function c(i) {
+	};
-		if (t.has(i))
+	function cleanWhenOff(element, ls) {
-			return t.get(i);
+		if (ls.length_c || ls.length_d)
-		let u = {
+			return;
+		store.delete(element);
+		stop();
+	}
+	function getElementStore(element) {
+		if (store.has(element)) return store.get(element);
+		const out = {
 			connected: /* @__PURE__ */ new WeakSet(),
 			length_c: 0,
 			disconnected: /* @__PURE__ */ new WeakSet(),
 			length_d: 0
 		};
-		return t.set(i, u), u;
+		store.set(element, out);
+		return out;
 	}
-	function f() {
+	function start() {
-		e || (e = !0, r.observe(a.D.body, { childList: !0, subtree: !0 }));
+		if (is_observing) return;
+		is_observing = true;
+		observer.observe(enviroment.D.body, { childList: true, subtree: true });
 	}
-	function d() {
+	function stop() {
-		!e || t.size || (e = !1, r.disconnect());
+		if (!is_observing || store.size) return;
+		is_observing = false;
+		observer.disconnect();
 	}
-	function p() {
+	function requestIdle() {
-		return new Promise(function(i) {
+		return new Promise(function(resolve) {
-			(requestIdleCallback || requestAnimationFrame)(i);
+			(requestIdleCallback || requestAnimationFrame)(resolve);
 		});
 	}
-	async function b(i) {
+	async function collectChildren(element) {
-		t.size > 30 && await p();
+		if (store.size > 30)
-		let u = [];
+			await requestIdle();
-		if (!(i instanceof Node))
+		const out = [];
-			return u;
+		if (!(element instanceof Node)) return out;
-		for (let s of t.keys())
+		for (const el of store.keys()) {
-			s === i || !(s instanceof Node) || i.contains(s) && u.push(s);
+			if (el === element || !(el instanceof Node)) continue;
-		return u;
+			if (element.contains(el))
+				out.push(el);
 		}
-	function l(i, u) {
+		return out;
-		let s = !1;
-		for (let h of i) {
-			if (u && b(h).then(l), !t.has(h))
-				continue;
-			let m = t.get(h);
-			m.length_c && (h.dispatchEvent(new Event(g)), m.connected = /* @__PURE__ */ new WeakSet(), m.length_c = 0, m.length_d || t.delete(h), s = !0);
 	}
-		return s;
+	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);
+			if (!ls.length_c) continue;
+			element.dispatchEvent(new Event(evc));
+			ls.connected = /* @__PURE__ */ new WeakSet();
+			ls.length_c = 0;
+			if (!ls.length_d) store.delete(element);
+			out = true;
 		}
-	function A(i, u) {
+		return out;
-		let s = !1;
-		for (let h of i)
-			u && b(h).then(A), !(!t.has(h) || !t.get(h).length_d) && ((globalThis.queueMicrotask || setTimeout)(_(h)), s = !0);
-		return s;
 	}
-	function _(i) {
+	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);
+			if (!ls.length_d) continue;
+			(globalThis.queueMicrotask || setTimeout)(dispatchRemove(element));
+			out = true;
+		}
+		return out;
+	}
+	function dispatchRemove(element) {
 		return () => {
-			i.isConnected || (i.dispatchEvent(new Event(y)), t.delete(i));
+			if (element.isConnected) return;
+			element.dispatchEvent(new Event(evd));
+			store.delete(element);
 		};
 	}
 }
 
 // src/customElement.js
-function Dt(t, e, n, r = it) {
+function customElementRender(custom_element, target, render, props = observedAttributes2) {
-	S.push({
+	scope.push({
-		scope: t,
+		scope: custom_element,
-		host: (...f) => f.length ? f.forEach((d) => d(t)) : t
+		host: (...c) => c.length ? c.forEach((c2) => c2(custom_element)) : custom_element
-	}), typeof r == "function" && (r = r.call(t, t));
+	});
-	let o = t[x];
+	if (typeof props === "function") props = props.call(custom_element, custom_element);
-	o || ct(t);
+	const is_lte = custom_element[keyLTE];
-	let c = n.call(t, r);
+	if (!is_lte) lifecyclesToEvents(custom_element);
-	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);
+	const out = render.call(custom_element, props);
+	if (!is_lte) custom_element.dispatchEvent(new Event(evc));
+	if (target.nodeType === 11 && typeof target.mode === "string")
+		custom_element.addEventListener(evd, c_ch_o.observe(target), { once: true });
+	scope.pop();
+	return target.append(out);
 }
-function ct(t) {
+function lifecyclesToEvents(class_declaration) {
-	return W(t.prototype, "connectedCallback", function(e, n, r) {
+	wrapMethod(class_declaration.prototype, "connectedCallback", function(target, thisArg, detail) {
-		e.apply(n, r), n.dispatchEvent(new Event(g));
+		target.apply(thisArg, detail);
-	}), W(t.prototype, "disconnectedCallback", function(e, n, r) {
+		thisArg.dispatchEvent(new Event(evc));
-		e.apply(n, r), (globalThis.queueMicrotask || setTimeout)(
+	});
-			() => !n.isConnected && n.dispatchEvent(new Event(y))
+	wrapMethod(class_declaration.prototype, "disconnectedCallback", function(target, thisArg, detail) {
+		target.apply(thisArg, detail);
+		(globalThis.queueMicrotask || setTimeout)(
+			() => !thisArg.isConnected && thisArg.dispatchEvent(new Event(evd))
 		);
-	}), W(t.prototype, "attributeChangedCallback", function(e, n, r) {
+	});
-		let [o, , c] = r;
+	wrapMethod(class_declaration.prototype, "attributeChangedCallback", function(target, thisArg, detail) {
-		n.dispatchEvent(new CustomEvent(D, {
+		const [attribute, , value] = detail;
-			detail: [o, c]
+		thisArg.dispatchEvent(new CustomEvent(eva, {
-		})), e.apply(n, r);
+			detail: [attribute, value]
-	}), t.prototype[x] = !0, t;
+		}));
+		target.apply(thisArg, detail);
+	});
+	class_declaration.prototype[keyLTE] = true;
+	return class_declaration;
 }
-function W(t, e, n) {
+function wrapMethod(obj, method, apply) {
-	t[e] = new Proxy(t[e] || (() => {
+	obj[method] = new Proxy(obj[method] || (() => {
-	}), { apply: n });
+	}), { apply });
 }
-function it(t) {
+function observedAttributes2(instance) {
-	return F(t, (e, n) => e.getAttribute(n));
+	return observedAttributes(instance, (i, n) => i.getAttribute(n));
 }
 
 // src/events.js
-function _t(t, e, n) {
+function dispatchEvent(name, options, host) {
-	return e || (e = {}), function(o, ...c) {
+	if (!options) options = {};
-		n && (c.unshift(o), o = typeof n == "function" ? n() : n);
+	return function dispatch(element, ...d) {
-		let f = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);
+		if (host) {
-		return o.dispatchEvent(f);
+			d.unshift(element);
+			element = typeof host === "function" ? host() : host;
+		}
+		const event = d.length ? new CustomEvent(name, Object.assign({ detail: d[0] }, options)) : new Event(name, options);
+		return element.dispatchEvent(event);
 	};
 }
-function R(t, e, n) {
+function on(event, listener, options) {
-	return function(o) {
+	return function registerElement(element) {
-		return o.addEventListener(t, e, n), o;
+		element.addEventListener(event, listener, options);
+		return element;
 	};
 }
-var G = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 });
+var lifeOptions = (obj) => Object.assign({}, typeof obj === "object" ? obj : null, { once: true });
-R.connected = function(t, e) {
+on.connected = function(listener, options) {
-	return e = G(e), function(r) {
+	options = lifeOptions(options);
-		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 function registerElement(element) {
+		element.addEventListener(evc, listener, options);
+		if (element[keyLTE]) return element;
+		if (element.isConnected) return element.dispatchEvent(new Event(evc)), element;
+		const c = onAbort(options.signal, () => c_ch_o.offConnected(element, listener));
+		if (c) c_ch_o.onConnected(element, listener);
+		return element;
 	};
 };
-R.disconnected = function(t, e) {
+on.disconnected = function(listener, options) {
-	return e = G(e), function(r) {
+	options = lifeOptions(options);
-		return r.addEventListener(y, t, e), r[x] || N(e.signal, () => w.offDisconnected(r, t)) && w.onDisconnected(r, t), r;
+	return function registerElement(element) {
+		element.addEventListener(evd, listener, options);
+		if (element[keyLTE]) return element;
+		const c = onAbort(options.signal, () => c_ch_o.offDisconnected(element, listener));
+		if (c) c_ch_o.onDisconnected(element, listener);
+		return element;
 	};
 };
-var j = /* @__PURE__ */ new WeakMap();
+var store_abort = /* @__PURE__ */ new WeakMap();
-R.disconnectedAsAbort = function(t) {
+on.disconnectedAsAbort = function(host) {
-	if (j.has(t))
+	if (store_abort.has(host)) return store_abort.get(host);
-		return j.get(t);
+	const a = new AbortController();
-	let e = new AbortController();
+	store_abort.set(host, a);
-	return j.set(t, e), t(R.disconnected(() => e.abort())), e;
+	host(on.disconnected(() => a.abort()));
+	return a;
 };
-var st = /* @__PURE__ */ new WeakSet();
+var els_attribute_store = /* @__PURE__ */ new WeakSet();
-R.attributeChanged = function(t, e) {
+on.attributeChanged = function(listener, options) {
-	return typeof e != "object" && (e = {}), function(r) {
+	if (typeof options !== "object")
-		if (r.addEventListener(D, t, e), r[x] || st.has(r) || !a.M)
+		options = {};
-			return r;
+	return function registerElement(element) {
-		let o = new a.M(function(f) {
+		element.addEventListener(eva, listener, options);
-			for (let { attributeName: d, target: p } of f)
+		if (element[keyLTE] || els_attribute_store.has(element))
-				p.dispatchEvent(
+			return element;
-					new CustomEvent(D, { detail: [d, p.getAttribute(d)] })
+		if (!enviroment.M) return element;
+		const observer = new enviroment.M(function(mutations) {
+			for (const { attributeName, target } of mutations)
+				target.dispatchEvent(
+					new CustomEvent(eva, { detail: [attributeName, target.getAttribute(attributeName)] })
 				);
 		});
-		return N(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;
+		const c = onAbort(options.signal, () => observer.disconnect());
+		if (c) observer.observe(element, { attributes: true });
+		return element;
 	};
 };
 export {
-	O as assign,
+	assign,
-	z as assignAttribute,
+	assignAttribute,
-	Q as chainableAppend,
+	chainableAppend,
-	Y as classListDeclarative,
+	classListDeclarative,
-	k as createElement,
+	createElement,
-	gt as createElementNS,
+	createElementNS,
-	Dt as customElementRender,
+	customElementRender,
-	ct as customElementWithDDE,
+	lifecyclesToEvents as customElementWithDDE,
-	_t as dispatchEvent,
+	dispatchEvent,
-	k as el,
+	createElement as el,
-	gt as elNS,
+	createElementNS as elNS,
-	tt as elementAttribute,
+	elementAttribute,
-	vt as empty,
+	empty,
-	ct as lifecyclesToEvents,
+	lifecyclesToEvents,
-	it as observedAttributes,
+	observedAttributes2 as observedAttributes,
-	R as on,
+	on,
-	V as registerReactivity,
+	registerReactivity,
-	S as scope,
+	scope,
-	bt as simulateSlots
+	simulateSlots
 };

docs/global.css

@@ -145,6 +145,7 @@ main > *{
 	--shiki-token-punctuation: var(--code);
 	--shiki-token-link: #EE0000;
 	white-space: pre;
+	
 	tab-size: 2;
 	overflow: scroll;
 }

docs_src/components/code.html.js

@@ -14,7 +14,8 @@ ${host}{
 	--shiki-token-punctuation: var(--code);
 	--shiki-token-link: #EE0000;
 	white-space: pre;
-	tab-size: 2;${""/* TODO: allow custom tab size?! */}
+	${""/* TODO: allow custom tab size?! */}
+	tab-size: 2;
 	overflow: scroll;
 }
 ${host}[data-js=todo]{

docs_src/components/examples/customElement/shadowRoot.js

@@ -5,6 +5,9 @@ import {
 } from "deka-dom-el";
 function ddeComponent(){
 	return el().append(
+		el("style", `
+			.red{ color: firebrick; }
+		`),
 		el("p", { className: "red" }).append(
 			"Hello from ", el("slot", "Custom Element"), "!"
 		)
@@ -49,12 +52,18 @@ customElementWithDDE(C);
 customElements.define(C.tagName, C);
 
 document.body.append(
-	el("style", `
-		.red{ color: red; }
-	`),
 	el(A.tagName).append("Without shadowRoot"),
 	el("hr"),
 	el(B.tagName).append("Open shadowRoot"),
 	el("hr"),
 	el(C.tagName).append("Closed shadowRoot"),
+	el("style", `
+		.red{ color: crimson; }
+	`),
 );
+console.log(A.tagName, "expect modifications");
+document.body.querySelector(A.tagName).querySelector("p").textContent+= " (editable with JS)";
+console.log(B.tagName, "expect modifications");
+document.body.querySelector(B.tagName).shadowRoot.querySelector("p").textContent+= " (editable with JS)";
+console.log(C.tagName, "expect error ↓");
+document.body.querySelector(C.tagName).querySelector("p").textContent+= " (editable with JS)";

docs_src/components/examples/customElement/simulateSlots.js

@@ -0,0 +1,41 @@
+import {
+	customElementRender,
+	customElementWithDDE,
+	el,
+	simulateSlots
+} from "deka-dom-el";
+export class HTMLCustomElement extends HTMLElement{
+	static tagName= "custom-slotting";
+	connectedCallback(){
+		const c= ()=> simulateSlots(this, ddeComponent());
+		customElementRender(this, this, c);
+	}
+}
+customElementWithDDE(HTMLCustomElement);
+customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);
+
+document.body.append(
+	el(HTMLCustomElement.tagName),
+	el(HTMLCustomElement.tagName).append(
+		"Slot"
+	),
+	el(ddeComponentSlot),
+	el(ddeComponentSlot).append(
+		"Slot"
+	),
+);
+
+function ddeComponent(){
+	return el().append(
+		el("p").append(
+			"Hello ", el("slot", "World")
+		)
+	);
+}
+function ddeComponentSlot(){
+	return simulateSlots(el().append(
+		el("p").append(
+			"Hello ", el("slot", "World")
+		)
+	));
+}

docs_src/components/mnemonic/customElement-init.js

@@ -17,6 +17,12 @@ export function mnemonic(){
 		),
 		el("li").append(
 			el("code", "lifecyclesToEvents(<class-declaration>)"), " — convert lifecycle methods to events, can be also used as decorator",
-		)
+		),
+		el("li").append(
+			el("code", "simulateSlots(<class-instance>, <body>[, <mapper>])"), " — simulate slots for Custom Elements without shadow DOM",
+		),
+		el("li").append(
+			el("code", "simulateSlots(<dde-component>[, <mapper>])"), " — simulate slots for “dde”/functional components",
+		),
 	);
 }

docs_src/p06-customElement.html.js

@@ -38,6 +38,11 @@ const references= {
 		title: t`MDN documentation page for Shadow DOM`,
 		href: "https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM",
 	},
+	/** Shallow DOM on mdn */
+	mdn_shadow_dom_slot: {
+		title: t`MDN documentation page for <slot>`,
+		href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot",
+	},
 	/** Shallow DOM */
 	shadow_dom_depth: {
 		title: t`Everything you need to know about Shadow DOM (github repo praveenpuglia/shadow-dom-in-depth)`,
@@ -50,7 +55,7 @@ export function page({ pkg, info }){
 	return el(simplePage, { info, pkg }).append(
 		el("h2", t`Using web components in combinantion with DDE`),
 		el("p").append(...T`
-			The DDE library allows for use within ${el("a", references.mdn_web_components).append( el("strong", "Web Components") )}
+			The DDE library allows for use within ${el("a", references.mdn_web_components).append( el("strong", t`Web Components`) )}
 			for dom-tree generation. However, in order to be able to use signals (possibly mapping to registered
 			${el("a", references.mdn_observedAttributes).append( el("code", "observedAttributes") )}) and additional
 			functionality is (unfortunately) required to use helpers provided by the library.
@@ -58,17 +63,22 @@ export function page({ pkg, info }){
 		el(code, { src: fileURL("./components/examples/customElement/intro.js"), page_id }),
 
 		el(h3, t`Custom Elements Introduction`),
+		el("p").append(...T`
+			Web Components, specifically Custom Elements, are a set of web platform APIs that allow you to create
+			new HTML tags with custom functionality encapsulated within them. This allows for the creation of reusable
+			components that can be used across web applications.
+		`),
 		el("p").append(...T`
 			To start with, let’s see how to use native Custom Elements. As starting point please read
-			${el("a", references.mdn_custom_elements).append( el("strong", "Using Custom Elements"), " on MDN" )}.
+			${el("a", references.mdn_custom_elements).append( el("strong", t`Using Custom Elements`), t` on MDN` )}.
 			To sum up and for mnemonic see following code overview:
 		`),
 		el(code, { src: fileURL("./components/examples/customElement/native-basic.js"), page_id }),
 		el("p").append(...T`
 			For more advanced use of Custom Elements, the summary ${el("a", references.custom_elements_tips)
-			.append( el("strong", t`Handy Custom Elements' Patterns`) )} may be useful. Especially pay attention to
+			.append( el("strong", t`Handy Custom Elements Patterns`) )} may be useful. Especially pay attention to
 			linking HTML attributes and defining setters/getters, this is very helpful to use in combination with
-			the library (${el("code", "el(HTMLCustomElement.tagName, { customAttribute: \"new-value\" });")}).
+			the library (${el("code", `el(HTMLCustomElement.tagName, { customAttribute: "${t`new-value`}" });`)}).
 		`),
 		el("p").append(...T`
 			Also see the Life Cycle Events sections, very similarly we would like to use
@@ -96,12 +106,38 @@ export function page({ pkg, info }){
 
 		el(h3, t`Shadow DOM`),
 		el("p").append(...T`
-			Regarding to ${el("code", "this.attachShadow({ mode: 'open' })")} see quick overview
+			Shadow DOM is a web platform feature that allows for the encapsulation of a component’s internal DOM tree
-			${el("a", { textContent: t`Using Shadow DOM`, ...references.mdn_shadow_dom_depth })}. An another source of
+			from the rest of the document. This means that styles and scripts applied to the document will not affect
-			information can be ${el("a", { textContent: t`Shadow DOM in Depth`, ...references.shadow_dom_depth })}. To
+			the component’s internal DOM, and vice versa.
-			sum up, there in basic three ways to render component body:
 		`),
 		el(example, { src: fileURL("./components/examples/customElement/shadowRoot.js"), page_id }),
+		el("p").append(...T`
+			Regarding to ${el("code", "this.attachShadow({ mode: 'open' })")} see quick overview
+			${el("a", { textContent: t`Using Shadow DOM`, ...references.mdn_shadow_dom_depth })}. An another source of
+			information can be ${el("a", { textContent: t`Shadow DOM in Depth`, ...references.shadow_dom_depth })}.
+		`),
+		el("p").append(...T`
+			Besides the encapsulation, the Shadow DOM allows for using the ${el("a", references.mdn_shadow_dom_slot).append(
+			el("strong", t`<slot>`), t` element(s)`)}. You can simulate this feature using ${el("code", "simulateSlots")}:
+		`),
+		el(example, { src: fileURL("./components/examples/customElement/simulateSlots.js"), page_id }),
+		el("p").append(...T`
+			To sum up:
+		`),
+		el("ul").append(
+			el("li").append(...T`
+				The use of shadow DOM to encapsulate the internal structure of the custom element, which affects how
+				the custom element can be styled and modified using JavaScript and CSS.
+			`),
+			el("li").append(...T`
+				The ability to access and modify the internal structure of the custom element using JavaScript, which
+				is affected by the use of shadow DOM and the mode of the shadow DOM.
+			`),
+			el("li").append(...T`
+				The use of slots to allow for the insertion of content from the parent document into the custom
+				element, which is affected by the use of shadow DOM and the mode of the shadow DOM.
+			`),
+		),
 
 		el(mnemonic)
 	);

examples/index.js

@@ -1,18 +1,22 @@
-import { style, el } from './exports.js';
+import { style, el, S } from './exports.js';
 document.head.append(style.element);
 import { fullNameComponent } from './components/fullNameComponent.js';
 import { todosComponent } from './components/todosComponent.js';
 import { CustomHTMLTestElement, CustomSlottingHTMLElement } from "./components/webComponent.js";
 import { thirdParty } from "./components/3rd-party.js";
 
+const toggle= S(false);
 document.body.append(
 	el("h1", "Experiments:"),
 	el(fullNameComponent),
 	el(todosComponent),
 	el(CustomHTMLTestElement.tagName, { name: "attr" }),
 	el(thirdParty),
-	el(CustomSlottingHTMLElement.tagName).append(
+	el(CustomSlottingHTMLElement.tagName, { onclick: ()=> toggle(!toggle()) }).append(
 		el("strong", { slot: "name", textContent: "Honzo" }),
-		el("span", "…default slot")
+		S.el(toggle, is=> is
+			? el("span", "…default slot")
+			: el("span", "…custom slot")
+		)
 	)
 );

index.d.ts

@@ -47,7 +47,7 @@ type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagName
 type textContent= string | ddeSignal<string>;
 export function el<
 	TAG extends keyof ExtendedHTMLElementTagNameMap,
-	EL extends (TAG extends keyof ExtendedHTMLElementTagNameMap ? ExtendedHTMLElementTagNameMap[TAG] : HTMLElement)
+	EL extends ExtendedHTMLElementTagNameMap[TAG]
 >(
 	tag_name: TAG,
 	attrs?: ElementAttributes<EL> | textContent,
@@ -58,7 +58,7 @@ export function el(
 ): ddeDocumentFragment
 export function el(
 	tag_name: string,
-	attrs?: ElementAttributes<HTMLElement>,
+	attrs?: ElementAttributes<HTMLElement> | textContent,
 	...addons: ddeElementAddon<HTMLElement>[]
 ): ddeHTMLElement
 
@@ -101,7 +101,18 @@ export function elNS(
 export { elNS as createElementNS }
 
 export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
-export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: EL): EL
+/**
+ * Mapper function (optional). Pass for coppying attributes, this is NOT implemented by {@link simulateSlots} itself!
+ * */
+type simulateSlotsMapper= (body: HTMLSlotElement, el: HTMLElement)=> void;
+/** Simulate slots for ddeComponents */
+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 dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):
 	(element: SupportedElement, data?: any)=> void;

src/dom.js

@@ -67,18 +67,23 @@ export function createElement(tag, attributes, ...addons){
 }
 import { hasOwn } from "./helpers.js";
 /** @param {HTMLElement} element @param {HTMLElement} [root] */
-export function simulateSlots(element, root= element, mapper= undefined){
+export function simulateSlots(element, root, mapper){
+	if(typeof root!=="object"){
+		mapper= root;
+		root= element;
+	}
 	const _default= Symbol.for("default");
 	const slots= Array.from(root.querySelectorAll("slot"))
 		.reduce((out, curr)=> Reflect.set(out, curr.name || _default, curr) && out, {});
 	const has_d= hasOwn(slots, _default);
 	element.append= new Proxy(element.append, {
 		apply(orig, _, els){
+			if(els[0]===root) return orig.apply(element, els);
 			if(!els.length) return element;
 
 			const d= env.D.createDocumentFragment();
 			for(const el of els){
-				if(!el || !el.slot){ if(has_d) d.appendChild(el); continue; }
+				if(!el || !el.slot){ if(has_d) d.append(el); continue; }
 				const name= el.slot;
 				const slot= slots[name];
 				elementAttribute(el, "remove", "slot");