Pre dev-memo (#17)

* 🎉

* ➖ no good direction

how to clean up not used in text re-rendering ⇒ needs to be more inside of `O.el`

* 🐛 🔨 `O.el`

* 🚀 implementing #16

* 💥 `on.(dis)connected` only once

dist/esm-with-observables.d.ts

@@ -54,7 +54,7 @@ interface observable{
 	 * */
 	el<S extends any>(observable: Observable<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
 
-    attribute(name: string, initial?: string): Observable<string, {}>;
+    observedAttributes(custom_element: HTMLElement): Record<string, Observable<any, any>>;
 }
 export const observable: observable;
 export const O: observable;
@@ -64,16 +64,11 @@ declare global {
 	type ddeActions<V>= Actions<V>
 }
 type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
-declare global {
-	interface ddePublicElementTagNameMap{
-	}
-}
 type SupportedElement=
 	  HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
 	| SVGElementTagNameMap[keyof SVGElementTagNameMap]
 	| MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
 	| CustomElementTagNameMap[keyof CustomElementTagNameMap]
-	| ddePublicElementTagNameMap[keyof ddePublicElementTagNameMap];
 declare global {
 	type ddeComponentAttributes= Record<any, any> | undefined;
 	type ddeElementAddon<El extends SupportedElement | DocumentFragment>= (element: El)=> El | void;
@@ -112,7 +107,7 @@ export function classListDeclarative<El extends SupportedElement>(element: El, c
 export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
 export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT]
 
-type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap
+type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
 type textContent= string | ( (set?: string)=> string ); // TODO: for some reason `Observable<string, any>` leads to `attrs?: any`
 export function el<
 	TAG extends keyof ExtendedHTMLElementTagNameMap & string,
@@ -239,9 +234,22 @@ export const scope: {
 	pop(): ReturnType<Array<Scope>["pop"]>,
 };
 
-/* TypeScript MEH // TODO for SVG */
-type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
+export function customElementRender<
+	EL extends HTMLElement,
+	P extends any = Record<string, any>
+>(
+	custom_element: EL,
+	render: (props: P)=> SupportedElement,
+	props?: P | ((...args: any[])=> P)
+): EL
+export function customElementWithDDE<EL extends HTMLElement>(custom_element: EL): EL
+export function lifecycleToEvents<EL extends HTMLElement>(custom_element: EL): EL
+export function observedAttributes(custom_element: HTMLElement): Record<string, string>
+
+/* TypeScript MEH */
 declare global{
+	type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
+	
 	interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
 	interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
 	interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }

dist/esm.d.ts

@@ -54,7 +54,7 @@ interface observable{
 	 * */
 	el<S extends any>(observable: Observable<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
 
-    attribute(name: string, initial?: string): Observable<string, {}>;
+    observedAttributes(custom_element: HTMLElement): Record<string, Observable<any, any>>;
 }
 export const observable: observable;
 export const O: observable;
@@ -64,16 +64,11 @@ declare global {
 	type ddeActions<V>= Actions<V>
 }
 type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
-declare global {
-	interface ddePublicElementTagNameMap{
-	}
-}
 type SupportedElement=
 	  HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
 	| SVGElementTagNameMap[keyof SVGElementTagNameMap]
 	| MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
 	| CustomElementTagNameMap[keyof CustomElementTagNameMap]
-	| ddePublicElementTagNameMap[keyof ddePublicElementTagNameMap];
 declare global {
 	type ddeComponentAttributes= Record<any, any> | undefined;
 	type ddeElementAddon<El extends SupportedElement | DocumentFragment>= (element: El)=> El | void;
@@ -112,7 +107,7 @@ export function classListDeclarative<El extends SupportedElement>(element: El, c
 export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
 export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT]
 
-type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap
+type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
 type textContent= string | ( (set?: string)=> string ); // TODO: for some reason `Observable<string, any>` leads to `attrs?: any`
 export function el<
 	TAG extends keyof ExtendedHTMLElementTagNameMap & string,
@@ -239,9 +234,22 @@ export const scope: {
 	pop(): ReturnType<Array<Scope>["pop"]>,
 };
 
-/* TypeScript MEH // TODO for SVG */
-type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
+export function customElementRender<
+	EL extends HTMLElement,
+	P extends any = Record<string, any>
+>(
+	custom_element: EL,
+	render: (props: P)=> SupportedElement,
+	props?: P | ((...args: any[])=> P)
+): EL
+export function customElementWithDDE<EL extends HTMLElement>(custom_element: EL): EL
+export function lifecycleToEvents<EL extends HTMLElement>(custom_element: EL): EL
+export function observedAttributes(custom_element: HTMLElement): Record<string, string>
+
+/* TypeScript MEH */
 declare global{
+	type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
+	
 	interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
 	interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
 	interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }

docs/p03-events.html

@@ -67,7 +67,7 @@ document.body.append(
 function log({ type, detail }){
 	console.log({ _this: this, type, detail });
 }
-</code></div><script>Flems(document.getElementById("code-example-1-35hjjp3e4js"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst paragraph= el(\\\"p\\\", \\\"See live-cycle events in console.\\\",\\n\\tel=> log({ type: \\\"dde:created\\\", detail: el }),\\n\\ton.connected(log),\\n\\ton.disconnected(log),\\n\\ton.attributeChanged(log));\\n\\ndocument.body.append(\\n\\tparagraph,\\n\\tel(\\\"button\\\", \\\"Update attribute\\\", on(\\\"click\\\", ()=> paragraph.setAttribute(\\\"test\\\", Math.random().toString()))),\\n\\t\\\" \\\",\\n\\tel(\\\"button\\\", \\\"Remove\\\", on(\\\"click\\\", ()=> paragraph.remove()))\\n);\\n\\n/** @param {Partial<CustomEvent>} event */\\nfunction log({ type, detail }){\\n\\tconsole.log({ _this: this, type, detail });\\n}\\n\"}],\"toolbar\":false}"));</script><p>For Custom elements, we will later introduce a way to replace <code>*Callback</code> syntax with <code>dde:*</code> events. The <code>on.*</code> functions then listen to the appropriate Custom Elements events (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks">Custom element lifecycle callbacks | MDN</a>).</p><p>But, in case of regular elemnets the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver"><code>MutationObserver</code> | MDN</a> is internaly used to track these events. Therefore, there are some drawbacks:</p><ul><li>To proper listener registration, you need to use <code>on.*</code> not `on("dde:*", …)`!</li><li>Use sparingly! Internally, library must loop of all registered events and fires event properly. <strong>It is good practice to use the fact that if an element is removed, its children are also removed!</strong> In this spirit, we will introduce later the <strong>host</strong> syntax to register clean up procedures when the component is removed from the app.</li></ul><h3 id="h-final-notes"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-final-notes" tabindex="-1">#</a> Final notes</h3><p>The library also provides a&nbsp;method to dispatch the events.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-2-b6a1hbrxh7s" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, on, dispatchEvent } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
+</code></div><script>Flems(document.getElementById("code-example-1-35hjjp3e4js"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst paragraph= el(\\\"p\\\", \\\"See live-cycle events in console.\\\",\\n\\tel=> log({ type: \\\"dde:created\\\", detail: el }),\\n\\ton.connected(log),\\n\\ton.disconnected(log),\\n\\ton.attributeChanged(log));\\n\\ndocument.body.append(\\n\\tparagraph,\\n\\tel(\\\"button\\\", \\\"Update attribute\\\", on(\\\"click\\\", ()=> paragraph.setAttribute(\\\"test\\\", Math.random().toString()))),\\n\\t\\\" \\\",\\n\\tel(\\\"button\\\", \\\"Remove\\\", on(\\\"click\\\", ()=> paragraph.remove()))\\n);\\n\\n/** @param {Partial<CustomEvent>} event */\\nfunction log({ type, detail }){\\n\\tconsole.log({ _this: this, type, detail });\\n}\\n\"}],\"toolbar\":false}"));</script><p>For Custom elements, we will later introduce a way to replace <code>*Callback</code> syntax with <code>dde:*</code> events. The <code>on.*</code> functions then listen to the appropriate Custom Elements events (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks">Custom element lifecycle callbacks | MDN</a>).</p><p>But, in case of regular elemnets the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver"><code>MutationObserver</code> | MDN</a> is internaly used to track these events. Therefore, there are some drawbacks:</p><ul><li>To proper listener registration, you need to use <code>on.*</code> not `on("dde:*", …)`!</li><li>Use sparingly! Internally, library must loop of all registered events and fires event properly. <strong>It is good practice to use the fact that if an element is removed, its children are also removed!</strong> In this spirit, we will introduce later the <strong>host</strong> syntax to register clean up procedures when the component is removed from the app.</li></ul><p>To provide intuitive behaviour, similar also to how the life-cycle events works in other frameworks/libraries, deka-dom-el library ensures that <code>on.connected</code> and <code>on.disconnected</code> are called only once and only when the element is (dis)connected to live DOM. The solution is inspired by <a href="https://vuejs.org/guide/extras/web-components.html#lifecycle" title="Vue and Web Components | Lifecycle">Vue</a>. For using native behaviour re-(dis)connecting element, use:</p><ul><li>custom <code>MutationObserver</code> or logic in (dis)<div class="code"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js"></code></div> or…</li><li>re-add <code>on.connected</code> or <code>on.disconnected</code> listeners.</li></ul><h3 id="h-final-notes"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-final-notes" tabindex="-1">#</a> Final notes</h3><p>The library also provides a&nbsp;method to dispatch the events.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-2-b6a1hbrxh7s" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, on, dispatchEvent } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
 document.body.append(
 	el("p", "Listenning to `test` event.", on("test", console.log)).append(
 		el("br"),

docs_src/p03-events.html.js

@@ -108,6 +108,17 @@ export function page({ pkg, info }){
 				" clean up procedures when the component is removed from the app."
 			),
 		),
+		el("p").append(
+			"To provide intuitive behaviour, similar also to how the life-cycle events works in other",
+			" frameworks/libraries, deka-dom-el library ensures that ", el("code", "on.connected"),
+			" and ", el("code", "on.disconnected"), " are called only once and only when the element",
+			" is (dis)connected to live DOM. The solution is inspired by ", el("a", { textContent: "Vue", href: "https://vuejs.org/guide/extras/web-components.html#lifecycle", title: "Vue and Web Components | Lifecycle" }), ".",
+			" For using native behaviour re-(dis)connecting element, use:"
+		),
+		el("ul").append(
+			el("li").append("custom ", el("code", "MutationObserver"), " or logic in (dis)", el(code, "connectedCallback"), " or…"),
+			el("li").append("re-add ", el("code", "on.connected"), " or ", el("code", "on.disconnected"), " listeners.")
+		),
 
 		el(h3, "Final notes"),
 		el("p", "The library also provides a method to dispatch the events."),

examples/components/todosComponent.js

@@ -84,7 +84,7 @@ function todoComponent({ textContent, value }){
 	return el("li").append(
 		O.el(is_editable, is=> is
 			? el("input", { value: textContent(), type: "text" }, onedited)
-			: el("span", { textContent, onclick: is_editable.bind(null, true) }),
+			: el("span", { textContent, onclick: is_editable.bind(null, true) })
 		),
 		el("button", { type: "button", value, textContent: "-" }, onclick)
 	);

index.d.ts

@@ -1,16 +1,11 @@
 import { Observable } from "./observables";
 
 type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
-declare global {
-	interface ddePublicElementTagNameMap{
-	}
-}
 type SupportedElement=
 	  HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
 	| SVGElementTagNameMap[keyof SVGElementTagNameMap]
 	| MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
 	| CustomElementTagNameMap[keyof CustomElementTagNameMap]
-	| ddePublicElementTagNameMap[keyof ddePublicElementTagNameMap];
 declare global {
 	type ddeComponentAttributes= Record<any, any> | undefined;
 	type ddeElementAddon<El extends SupportedElement | DocumentFragment>= (element: El)=> El | void;
@@ -48,7 +43,7 @@ export function classListDeclarative<El extends SupportedElement>(element: El, c
 export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
 export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT]
 
-type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap
+type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
 type textContent= string | ( (set?: string)=> string ); // TODO: for some reason `Observable<string, any>` leads to `attrs?: any`
 export function el<
 	TAG extends keyof ExtendedHTMLElementTagNameMap & string,
@@ -187,9 +182,10 @@ export function customElementWithDDE<EL extends HTMLElement>(custom_element: EL)
 export function lifecycleToEvents<EL extends HTMLElement>(custom_element: EL): EL
 export function observedAttributes(custom_element: HTMLElement): Record<string, string>
 
-/* TypeScript MEH // TODO for SVG */
-type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
+/* TypeScript MEH */
 declare global{
+	type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
+	
 	interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
 	interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
 	interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "deka-dom-el",
-	"version": "0.7.7",
+	"version": "0.7.8",
 	"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",
@@ -59,18 +59,24 @@
 	"size-limit": [
 		{
 			"path": "./index.js",
-			"limit": "10 kB",
+			"limit": "10.5 kB",
 			"gzip": false,
 			"brotli": false
 
 		},
 		{
 			"path": "./observables.js",
-			"limit": "11.5 kB",
+			"limit": "12 kB",
 			"gzip": false,
 			"brotli": false
 
 		},
+		{
+			"path": "./index-with-observables.js",
+			"limit": "15 kB",
+			"gzip": false,
+			"brotli": false
+		},
 		{
 			"path": "./index-with-observables.js",
 			"limit": "5 kB"

src/customElement.js

@@ -1,3 +1,4 @@
+import { keyLTE } from "./dom-common.js";
 import { scope } from "./dom.js";
 export function customElementRender(custom_element, render, props= observedAttributes){
 	scope.push({
@@ -11,20 +12,24 @@ export function customElementRender(custom_element, render, props= observedAttri
 	return out;
 }
 export function lifecycleToEvents(class_declaration){
-	for (const name of [ "connected", "disconnected" ])
-		wrapMethod(class_declaration.prototype, name+"Callback", function(target, thisArg, detail){
+	wrapMethod(class_declaration.prototype, "connectedCallback", function(target, thisArg, detail){
 		target.apply(thisArg, detail);
-			thisArg.dispatchEvent(new Event("dde:"+name));
+		thisArg.dispatchEvent(new Event("dde:connected"));
 	});
-	const name= "attributeChanged";
-	wrapMethod(class_declaration.prototype, name+"Callback", function(target, thisArg, detail){
+	wrapMethod(class_declaration.prototype, "disconnectedCallback", function(target, thisArg, detail){
+		target.apply(thisArg, detail);
+		(queueMicrotask || setTimeout)(
+			()=> !thisArg.isConnected && thisArg.dispatchEvent(new Event("dde:disconnected"))
+		);
+	});
+	wrapMethod(class_declaration.prototype, "attributeChangedCallback", function(target, thisArg, detail){
 		const [ attribute, , value ]= detail;
-		thisArg.dispatchEvent(new CustomEvent("dde:"+name, {
+		thisArg.dispatchEvent(new CustomEvent("dde:attributeChanged", {
 			detail: [ attribute, value ]
 		}));
 		target.apply(thisArg, detail);
 	});
-	class_declaration.prototype.__dde_lifecycleToEvents= true;
+	class_declaration.prototype[keyLTE]= true;
 	return class_declaration;
 }
 export { lifecycleToEvents as customElementWithDDE };

src/dom-common.js

@@ -26,3 +26,4 @@ function setDeleteAttr(obj, prop, val){
 	if(Reflect.get(obj, prop)==="undefined")
 		return Reflect.set(obj, prop, "");
 }
+export const keyLTE= "__dde_lifecycleToEvents"; //boolean

src/events.js

@@ -1,5 +1,5 @@
 export { registerReactivity } from './observables-common.js';
-import { enviroment as env } from './dom-common.js';
+import { enviroment as env, keyLTE } from './dom-common.js';
 
 export function dispatchEvent(name, options, host){
 	if(!options) options= {};
@@ -26,6 +26,7 @@ const els_attribute_store= new WeakSet();
 import { scope } from "./dom.js";
 import { onAbort } from './helpers.js';
 //TODO: cleanUp when event before abort?
+//TODO: docs (e.g.) https://nolanlawson.com/2024/01/13/web-component-gotcha-constructor-vs-connectedcallback/
 on.connected= function(listener, options){
 	const { custom_element }= scope.current;
 	const name= "connected";
@@ -36,7 +37,7 @@ on.connected= function(listener, options){
 		if(custom_element) element= custom_element;
 		const event= "dde:"+name;
 		element.addEventListener(event, listener, options);
-		if(element.__dde_lifecycleToEvents) return element;
+		if(element[keyLTE]) return element;
 		if(element.isConnected) return ( element.dispatchEvent(new Event(event)), element );
 
 		const c= onAbort(options.signal, ()=> c_ch_o.offConnected(element, listener));
@@ -54,7 +55,7 @@ on.disconnected= function(listener, options){
 		if(custom_element) element= custom_element;
 		const event= "dde:"+name;
 		element.addEventListener(event, listener, options);
-		if(element.__dde_lifecycleToEvents) return element;
+		if(element[keyLTE]) return element;
 
 		const c= onAbort(options.signal, ()=> c_ch_o.offDisconnected(element, listener));
 		if(c) c_ch_o.onDisconnected(element, listener);
@@ -77,7 +78,7 @@ on.attributeChanged= function(listener, options){
 	return function registerElement(element){
 		const event= "dde:"+name;
 		element.addEventListener(event, listener, options);
-		if(element.__dde_lifecycleToEvents || els_attribute_store.has(element))
+		if(element[keyLTE] || els_attribute_store.has(element))
 			return element;
 		
 		if(!env.M) return element;
@@ -171,13 +172,13 @@ function connectionsChangesObserverConstructor(){
 	function requestIdle(){ return new Promise(function(resolve){
 		(requestIdleCallback || requestAnimationFrame)(resolve);
 	}); }
-	async function collectChildren(element, filter){
+	async function collectChildren(element){
 		if(store.size > 30)//TODO limit?
 			await requestIdle();
 		const out= [];
 		if(!(element instanceof Node)) return out;
 		for(const el of store.keys()){
-			if(el===element || !(el instanceof Node) || filter(el)) continue;
+			if(el===element || !(el instanceof Node)) continue;
 			if(element.contains(el))
 				out.push(el);
 		}
@@ -186,7 +187,7 @@ function connectionsChangesObserverConstructor(){
 	function observerAdded(addedNodes, is_root){
 		let out= false;
 		for(const element of addedNodes){
-			if(is_root) collectChildren(element, el=> !el.isConnectedd).then(observerAdded);
+			if(is_root) collectChildren(element).then(observerAdded);
 			if(!store.has(element)) continue;
 			
 			const ls= store.get(element);
@@ -203,17 +204,21 @@ function connectionsChangesObserverConstructor(){
 	function observerRemoved(removedNodes, is_root){
 		let out= false;
 		for(const element of removedNodes){
-			if(is_root) collectChildren(element, el=> el.isConnectedd).then(observerRemoved);
+			if(is_root) collectChildren(element).then(observerRemoved);
 			if(!store.has(element)) continue;
 			
 			const ls= store.get(element);
 			if(!ls.length_d) continue;
-			
-			element.dispatchEvent(new Event("dde:disconnected"));
-			
-			store.delete(element);
+			(queueMicrotask || setTimeout)(dispatchRemove(element));
 			out= true;
 		}
 		return out;
 	}
+	function dispatchRemove(element){
+		return ()=> {
+			if(element.isConnected) return;
+			element.dispatchEvent(new Event("dde:disconnected"));
+			store.delete(element);
+		};
+	}
 }

src/observables-lib.js

@@ -96,7 +96,7 @@ observable.el= function(o, map){
 	out.append(mark_start, mark_end);
 	const { current }= scope;
 	const reRenderReactiveElement= v=> {
-		if(!mark_start.parentNode || !mark_end.parentNode)
+		if(!mark_start.parentNode || !mark_end.parentNode) // isConnected or wasn’t yet rendered
 			return removeObservableListener(o, reRenderReactiveElement);
 		scope.push(current);
 		let els= map(v);
@@ -107,12 +107,21 @@ observable.el= function(o, map){
 		while(( el_r= mark_start.nextSibling ) !== mark_end)
 			el_r.remove();
 		mark_start.after(...els);
+		if(mark_start.isConnected)
+			requestCleanUpReactives(current.host());
 	};
 	addObservableListener(o, reRenderReactiveElement);
 	removeObservablesFromElements(o, reRenderReactiveElement, mark_start, map);
 	reRenderReactiveElement(o());
 	return out;
 };
+function requestCleanUpReactives(host){
+	if(!host || !host[key_reactive]) return;
+	(requestIdleCallback || setTimeout)(function(){
+		host[key_reactive]= host[key_reactive]
+			.filter(([ o, el ])=> el.isConnected ? true : (removeObservableListener(...o), false));
+	});
+}
 import { on } from "./events.js";
 import { observedAttributes } from "./helpers.js";
 const observedAttributeActions= {
@@ -152,7 +161,11 @@ export const observables_config= {
 	isObservable,
 	processReactiveAttribute(element, key, attrs, set){
 		if(!isObservable(attrs)) return attrs;
-		const l= attr=> set(key, attr);
+		const l= attr=> {
+			if(!element.isConnected)
+				return removeObservableListener(attrs, l);
+			set(key, attr);
+		};
 		addObservableListener(attrs, l);
 		removeObservablesFromElements(attrs, l, element, key);
 		return attrs();