diff --git a/dist/dde-with-observables.js b/dist/dde-with-observables.js
index 72528c0..2d874f4 100644
--- a/dist/dde-with-observables.js
+++ b/dist/dde-with-observables.js
@@ -1,30 +1,31 @@
 //deka-dom-el library is available via global namespace `dde`
 (()=> {
-var w={isObservable(e){return!1},processReactiveAttribute(e,t,n,r){return n}};function M(e,t=!0){return t?Object.assign(w,e):(Object.setPrototypeOf(e,w),e)}function N(e){return w.isPrototypeOf(e)&&e!==w?e:w}function x(e){return typeof e>"u"}function B(e){let t=typeof e;return t!=="object"?t:e===null?"null":Object.prototype.toString.call(e)}function P(e,t){if(!e||!(e instanceof AbortSignal))return!0;if(!e.aborted)return e.addEventListener("abort",t),function(){e.removeEventListener("abort",t)}}var $={setDeleteAttr:te,ssr:""};function te(e,t,n){if(Reflect.set(e,t,n),!!x(n)){if(Reflect.deleteProperty(e,t),e instanceof HTMLElement&&e.getAttribute(t)==="undefined")return e.removeAttribute(t);if(Reflect.get(e,t)==="undefined")return Reflect.set(e,t,"")}}var y=[{scope:document.body,host:e=>e?e(document.body):document.body,custom_element:!1,prevent:!0}],p={get current(){return y[y.length-1]},get host(){return this.current.host},preventDefault(){let{current:e}=this;return e.prevent=!0,e},get state(){return[...y]},push(e={}){return y.push(Object.assign({},this.current,{prevent:!1},e))},pushRoot(){return y.push(y[0])},pop(){if(y.length!==1)return y.pop()}};function H(...e){return this.appendOriginal(...e),this}function ne(e){return e.append===H||(e.appendOriginal=e.append,e.append=H),e}var L;function R(e,t,...n){let r=N(this),o=0,c,s;switch((Object(t)!==t||r.isObservable(t))&&(t={textContent:t}),!0){case typeof e=="function":{o=1,p.push({scope:e,host:(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(b=>b(s)),void 0):s}),c=e(t||void 0);let u=c instanceof DocumentFragment;if(c.nodeName==="#comment")break;let d=R.mark({type:"component",name:e.name,host:u?"this":"parentElement"});c.prepend(d),u&&(s=d);break}case e==="#text":c=A.call(this,document.createTextNode(""),t);break;case(e==="<>"||!e):c=A.call(this,document.createDocumentFragment(),t);break;case!!L:c=A.call(this,document.createElementNS(L,e),t);break;case!c:c=A.call(this,document.createElement(e),t)}return ne(c),s||(s=c),n.forEach(u=>u(s)),o&&p.pop(),o=2,c}function xe(e,t=e,n=void 0){let r=Symbol.for("default"),o=Array.from(t.querySelectorAll("slot")).reduce((s,u)=>Reflect.set(s,u.name||r,u)&&s,{}),c=Reflect.has(o,r);if(e.append=new Proxy(e.append,{apply(s,u,d){if(!d.length)return e;let l=document.createDocumentFragment();for(let b of d){if(!b||!b.slot){c&&l.appendChild(b);continue}let i=b.slot,f=o[i];_(b,"remove","slot"),f&&(re(f,b,n),Reflect.deleteProperty(o,i))}return c&&(o[r].replaceWith(l),Reflect.deleteProperty(o,r)),e.append=s,e}}),e!==t){let s=Array.from(e.childNodes);s.forEach(u=>u.remove()),e.append(...s)}return t}function re(e,t,n){n&&n(e,t);try{e.replaceWith(A(t,{className:[t.className,e.className],dataset:{...e.dataset}}))}catch{e.replaceWith(t)}}R.mark=function(e,t=!1){e=Object.entries(e).map(([o,c])=>o+`="${c}"`).join(" ");let n=t?"":"/",r=document.createComment(`<dde:mark ${e}${$.ssr}${n}>`);return t||(r.end=document.createComment("</dde:mark>")),r};function _e(e){let t=this;return function(...r){L=e;let o=R.call(t,...r);return L=void 0,o}}var{setDeleteAttr:I}=$,j=new WeakMap;function A(e,...t){if(!t.length)return e;j.set(e,G(e,this));for(let[n,r]of Object.entries(Object.assign({},...t)))Z.call(this,e,n,r);return j.delete(e),e}function Z(e,t,n){let{setRemoveAttr:r,s:o}=G(e,this),c=this;n=o.processReactiveAttribute(e,t,n,(u,d)=>Z.call(c,e,u,d));let[s]=t;if(s==="=")return r(t.slice(1),n);if(s===".")return J(e,t.slice(1),n);if(/(aria|data)([A-Z])/.test(t))return t=t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(t,n);switch(t==="className"&&(t="class"),t){case"xlink:href":return r(t,n,"http://www.w3.org/1999/xlink");case"textContent":return I(e,t,n);case"style":if(typeof n!="object")break;case"dataset":return F(o,n,J.bind(null,e[t]));case"ariaset":return F(o,n,(u,d)=>r("aria-"+u,d));case"classList":return oe.call(c,e,n)}return ce(e,t)?I(e,t,n):r(t,n)}function G(e,t){if(j.has(e))return j.get(e);let r=(e instanceof SVGElement?ie:se).bind(null,e,"Attribute"),o=N(t);return{setRemoveAttr:r,s:o}}function oe(e,t){let n=N(this);return F(n,t,(r,o)=>e.classList.toggle(r,o===-1?void 0:!!o)),e}function Oe(e){return Array.from(e.children).forEach(t=>t.remove()),e}function _(e,t,n,r){return e instanceof HTMLElement?e[t+"Attribute"](n,r):e[t+"AttributeNS"](null,n,r)}function ce(e,t){if(!Reflect.has(e,t))return!1;let n=V(e,t);return!x(n.set)}function V(e,t){if(e=Object.getPrototypeOf(e),!e)return{};let n=Object.getOwnPropertyDescriptor(e,t);return n||V(e,t)}function F(e,t,n){if(!(typeof t!="object"||t===null))return Object.entries(t).forEach(function([o,c]){o&&(c=e.processReactiveAttribute(t,o,c,n),n(o,c))})}function K(e){return Array.isArray(e)?e.filter(Boolean).join(" "):e}function se(e,t,n,r){return e[(x(r)?"remove":"set")+t](n,K(r))}function ie(e,t,n,r,o=null){return e[(x(r)?"remove":"set")+t+"NS"](o,n,K(r))}function J(e,t,n){if(Reflect.set(e,t,n),!!x(n))return Reflect.deleteProperty(e,t)}function Se(e,t,n=e){p.push({scope:e,host:(...o)=>o.length?o.forEach(c=>c(e)):e,custom_element:e});let r=t.call(e,n);return p.pop(),r}function Ce(e){for(let n of["connected","disconnected"])Q(e.prototype,n+"Callback",function(r,o,c){r.apply(o,c),o.dispatchEvent(new Event("dde:"+n))});let t="attributeChanged";return Q(e.prototype,t+"Callback",function(n,r,o){let[c,,s]=o;r.dispatchEvent(new CustomEvent("dde:"+t,{detail:[c,s]})),n.apply(r,o)}),e.prototype.__dde_lifecycleToEvents=!0,e}function Q(e,t,n){e[t]=new Proxy(e[t]||(()=>{}),{apply:n})}function Pe(e,t,n){return t||(t={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(e,Object.assign({detail:c[0]},t)):new Event(e,t);return o.dispatchEvent(s)}}function E(e,t,n){return function(o){return o.addEventListener(e,t,n),o}}var D=ue(),fe=new WeakSet;E.connected=function(e,t){let{custom_element:n}=p.current,r="connected";return typeof t!="object"&&(t={}),t.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,e,t),c.__dde_lifecycleToEvents?c:c.isConnected?(c.dispatchEvent(new Event(s)),c):(P(t.signal,()=>D.offConnected(c,e))&&D.onConnected(c,e),c)}};E.disconnected=function(e,t){let{custom_element:n}=p.current,r="disconnected";return typeof t!="object"&&(t={}),t.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,e,t),c.__dde_lifecycleToEvents||P(t.signal,()=>D.offDisconnected(c,e))&&D.onDisconnected(c,e),c}};var z=new WeakMap;E.disconnectedAsAbort=function(e){if(z.has(e))return z.get(e);let t=new AbortController;return z.set(e,t),e(E.disconnected(()=>t.abort())),t};E.attributeChanged=function(e,t){let n="attributeChanged";return typeof t!="object"&&(t={}),function(o){let c="dde:"+n;if(o.addEventListener(c,e,t),o.__dde_lifecycleToEvents||fe.has(o))return o;let s=new MutationObserver(function(d){for(let{attributeName:l,target:b}of d)b.dispatchEvent(new CustomEvent(c,{detail:[l,b.getAttribute(l)]}))});return P(t.signal,()=>s.disconnect())&&s.observe(o,{attributes:!0}),o}};function ue(){let e=new Map,t=!1,n=new MutationObserver(function(i){for(let f of i)if(f.type==="childList"){if(l(f.addedNodes,!0)){s();continue}b(f.removedNodes,!0)&&s()}});return{onConnected(i,f){c();let a=o(i);a.connected.has(f)||(a.connected.add(f),a.length_c+=1)},offConnected(i,f){if(!e.has(i))return;let a=e.get(i);a.connected.has(f)&&(a.connected.delete(f),a.length_c-=1,r(i,a))},onDisconnected(i,f){c();let a=o(i);a.disconnected.has(f)||(a.disconnected.add(f),a.length_d+=1)},offDisconnected(i,f){if(!e.has(i))return;let a=e.get(i);a.disconnected.has(f)&&(a.disconnected.delete(f),a.length_d-=1,r(i,a))}};function r(i,f){f.length_c||f.length_d||(e.delete(i),s())}function o(i){if(e.has(i))return e.get(i);let f={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return e.set(i,f),f}function c(){t||(t=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function s(){!t||e.size||(t=!1,n.disconnect())}function u(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function d(i){e.size>30&&await u();let f=[];if(!(i instanceof Node))return f;for(let a of e.keys())a===i||!(a instanceof Node)||i.contains(a)&&f.push(a);return f}function l(i,f){let a=!1;for(let v of i){if(f&&d(v).then(l),!e.has(v))continue;let O=e.get(v);O.length_c&&(v.dispatchEvent(new Event("dde:connected")),O.connected=new WeakSet,O.length_c=0,O.length_d||e.delete(v),a=!0)}return a}function b(i,f){let a=!1;for(let v of i)f&&d(v).then(b),!(!e.has(v)||!e.get(v).length_d)&&(v.dispatchEvent(new Event("dde:disconnected")),e.delete(v),a=!0);return a}}var h=Symbol.for("observable");function W(e){try{return Reflect.has(e,h)}catch{return!1}}var T=[],g=new WeakMap;function m(e,t){if(typeof e!="function")return X(e,t);if(W(e))return e;let n=X(),r=function(){let[o,...c]=g.get(r);if(g.set(r,new Set([o])),T.push(r),n(e()),T.pop(),!c.length)return;let s=g.get(r);for(let u of c)s.has(u)||C(u,r)};return g.set(n[h],r),g.set(r,new Set([n])),r(),n}m.action=function(e,t,...n){let r=e[h],{actions:o}=r;if(!o||!Reflect.has(o,t))throw new Error(`'${e}' has no action with name '${t}'!`);if(o[t].apply(r,n),r.skip)return Reflect.deleteProperty(r,"skip");r.listeners.forEach(c=>c(r.value))};m.on=function e(t,n,r={}){let{signal:o}=r;if(!(o&&o.aborted)){if(Array.isArray(t))return t.forEach(c=>e(c,n,r));U(t,n),o&&o.addEventListener("abort",()=>C(t,n))}};m.symbols={onclear:Symbol.for("Observable.onclear")};m.clear=function(...e){for(let n of e){Reflect.deleteProperty(n,"toJSON");let r=n[h];r.onclear.forEach(o=>o.call(r)),t(n,r),Reflect.deleteProperty(n,h)}function t(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!g.has(o))return;let c=g.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),g.delete(o))})}};var k="__dde_reactive";m.el=function(e,t){let n=R.mark({type:"reactive"},!1),r=n.end,o=document.createDocumentFragment();o.append(n,r);let{current:c}=p,s=u=>{if(!n.parentNode||!r.parentNode)return C(e,s);p.push(c);let d=t(u);p.pop(),Array.isArray(d)||(d=[d]);let l=n;for(;(l=n.nextSibling)!==r;)l.remove();n.after(...d)};return U(e,s),ee(e,s,n,t),s(e()),o};var S="__dde_attributes";m.attribute=function(e,t=null){let n=m(t),r;return p.host(o=>{if(r=o,_(r,"has",e)?n(_(r,"get",e)):t!==null&&_(r,"set",e,t),o[S]){o[S][e]=n;return}r[S]={[e]:n},E.attributeChanged(function({detail:s}){/*! This maps attributes to observables (`S.attribute`).
-* Investigate `__dde_attributes` key of the element.*/let[u,d]=s,l=r[S][u];if(l)return l(d)})(r),E.disconnected(function(){/*! This removes all observables mapped to attributes (`S.attribute`).
-* Investigate `__dde_attributes` key of the element.*/m.clear(...Object.values(r[S]))})(r)}),new Proxy(n,{apply(o,c,s){if(!s.length)return o();let u=s[0];return _(r,"set",e,u)}})};var Y={isObservable:W,processReactiveAttribute(e,t,n,r){if(!W(n))return n;let o=c=>r(t,c);return U(n,o),ee(n,o,e,t),n()}};function ee(e,t,...n){let{current:r}=p;r.prevent||r.host(function(o){o[k]||(o[k]=[],E.disconnected(()=>o[k].forEach(([[c,s]])=>C(c,s,c[h]?.host()===o)))(o)),o[k].push([[e,t],...n])})}function X(e,t){let n=(...r)=>r.length?he(n,...r):pe(n);return de(n,e,t)}var ae=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),q=class extends Error{constructor(){super();let[t,...n]=this.stack.split(`
-`),r=t.slice(t.indexOf("@"),t.indexOf(".js:")+4);this.stack=n.find(o=>!o.includes(r))}};function de(e,t,n){let r=[];B(n)!=="[object Object]"&&(n={});let{onclear:o}=m.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=p;return Reflect.defineProperty(e,h,{value:{value:t,actions:n,onclear:r,host:c,listeners:new Set,defined:new q},enumerable:!1,writable:!1,configurable:!0}),e.toJSON=()=>e(),Object.setPrototypeOf(e[h],ae),e}function le(){return T[T.length-1]}function pe(e){if(!e[h])return;let{value:t,listeners:n}=e[h],r=le();return r&&n.add(r),g.has(r)&&g.get(r).add(e),t}function he(e,t,n){if(!e[h])return;let r=e[h];if(!(!n&&r.value===t))return r.value=t,r.listeners.forEach(o=>o(t)),t}function U(e,t){if(e[h])return e[h].listeners.add(t)}function C(e,t,n){let r=e[h];if(!r)return;let o=r.listeners.delete(t);if(n&&!r.listeners.size){if(e.clear(e),!g.has(r))return o;let c=g.get(r);if(!g.has(c))return o;g.get(c).forEach(s=>C(s,c,!0))}return o}M(Y);
+var A={isObservable(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function T(t,e=!0){return e?Object.assign(A,t):(Object.setPrototypeOf(t,A),t)}function C(t){return A.isPrototypeOf(t)&&t!==A?t:A}function y(t){return typeof t>"u"}function B(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function S(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function N(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return Reflect.set(r,ot(o),e(t,o)),r},{})}function ot(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var M={setDeleteAttr:ct,ssr:""};function ct(t,e,n){if(Reflect.set(t,e,n),!!y(n)){if(Reflect.deleteProperty(t,e),t instanceof HTMLElement&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var x=[{scope:document.body,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],b={get current(){return x[x.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...x]},push(t={}){return x.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return x.push(x[0])},pop(){if(x.length!==1)return x.pop()}};function H(...t){return this.appendOriginal(...t),this}function st(t){return t.append===H||(t.appendOriginal=t.append,t.append=H),t}var P;function w(t,e,...n){let r=C(this),o=0,c,s;switch((Object(e)!==e||r.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,b.push({scope:t,host:(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(h=>h(s)),void 0):s}),c=t(e||void 0);let a=c instanceof DocumentFragment;if(c.nodeName==="#comment")break;let d=w.mark({type:"component",name:t.name,host:a?"this":"parentElement"});c.prepend(d),a&&(s=d);break}case t==="#text":c=O.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):c=O.call(this,document.createDocumentFragment(),e);break;case!!P:c=O.call(this,document.createElementNS(P,t),e);break;case!c:c=O.call(this,document.createElement(t),e)}return st(c),s||(s=c),n.forEach(a=>a(s)),o&&b.pop(),o=2,c}function wt(t,e=t,n=void 0){let r=Symbol.for("default"),o=Array.from(e.querySelectorAll("slot")).reduce((s,a)=>Reflect.set(s,a.name||r,a)&&s,{}),c=Reflect.has(o,r);if(t.append=new Proxy(t.append,{apply(s,a,d){if(!d.length)return t;let l=document.createDocumentFragment();for(let h of d){if(!h||!h.slot){c&&l.appendChild(h);continue}let i=h.slot,u=o[i];ft(h,"remove","slot"),u&&(it(u,h,n),Reflect.deleteProperty(o,i))}return c&&(o[r].replaceWith(l),Reflect.deleteProperty(o,r)),t.append=s,t}}),t!==e){let s=Array.from(t.childNodes);s.forEach(a=>a.remove()),t.append(...s)}return e}function it(t,e,n){n&&n(t,e);try{t.replaceWith(O(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}w.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=document.createComment(`<dde:mark ${t}${M.ssr}${n}>`);return e||(r.end=document.createComment("</dde:mark>")),r};function Rt(t){let e=this;return function(...r){P=t;let o=w.call(e,...r);return P=void 0,o}}var{setDeleteAttr:I}=M,j=new WeakMap;function O(t,...e){if(!e.length)return t;j.set(t,G(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))Z.call(this,t,n,r);return j.delete(t),t}function Z(t,e,n){let{setRemoveAttr:r,s:o}=G(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(a,d)=>Z.call(c,t,a,d));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return J(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return I(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return $(o,n,J.bind(null,t[e]));case"ariaset":return $(o,n,(a,d)=>r("aria-"+a,d));case"classList":return ut.call(c,t,n)}return at(t,e)?I(t,e,n):r(e,n)}function G(t,e){if(j.has(t))return j.get(t);let r=(t instanceof SVGElement?lt:dt).bind(null,t,"Attribute"),o=C(e);return{setRemoveAttr:r,s:o}}function ut(t,e){let n=C(this);return $(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function Ct(t){return Array.from(t.children).forEach(e=>e.remove()),t}function ft(t,e,n,r){return t instanceof HTMLElement?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function at(t,e){if(!Reflect.has(t,e))return!1;let n=V(t,e);return!y(n.set)}function V(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||V(t,e)}function $(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,c]){o&&(c=t.processReactiveAttribute(e,o,c,n),n(o,c))})}function K(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function dt(t,e,n,r){return t[(y(r)?"remove":"set")+e](n,K(r))}function lt(t,e,n,r,o=null){return t[(y(r)?"remove":"set")+e+"NS"](o,n,K(r))}function J(t,e,n){if(Reflect.set(t,e,n),!!y(n))return Reflect.deleteProperty(t,e)}function jt(t,e,n=pt){b.push({scope:t,host:(...o)=>o.length?o.forEach(c=>c(t)):t,custom_element:t}),typeof n=="function"&&(n=n.call(t,t));let r=e.call(t,n);return b.pop(),r}function kt(t){for(let n of["connected","disconnected"])Q(t.prototype,n+"Callback",function(r,o,c){r.apply(o,c),o.dispatchEvent(new Event("dde:"+n))});let e="attributeChanged";return Q(t.prototype,e+"Callback",function(n,r,o){let[c,,s]=o;r.dispatchEvent(new CustomEvent("dde:"+e,{detail:[c,s]})),n.apply(r,o)}),t.prototype.__dde_lifecycleToEvents=!0,t}function Q(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function pt(t){return N(t,(e,n)=>e.getAttribute(n))}function Wt(t,e,n){return e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(t,Object.assign({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function E(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var k=bt(),ht=new WeakSet;E.connected=function(t,e){let{custom_element:n}=b.current,r="connected";return typeof e!="object"&&(e={}),e.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,t,e),c.__dde_lifecycleToEvents?c:c.isConnected?(c.dispatchEvent(new Event(s)),c):(S(e.signal,()=>k.offConnected(c,t))&&k.onConnected(c,t),c)}};E.disconnected=function(t,e){let{custom_element:n}=b.current,r="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,t,e),c.__dde_lifecycleToEvents||S(e.signal,()=>k.offDisconnected(c,t))&&k.onDisconnected(c,t),c}};var F=new WeakMap;E.disconnectedAsAbort=function(t){if(F.has(t))return F.get(t);let e=new AbortController;return F.set(t,e),t(E.disconnected(()=>e.abort())),e};E.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(o){let c="dde:"+n;if(o.addEventListener(c,t,e),o.__dde_lifecycleToEvents||ht.has(o))return o;let s=new MutationObserver(function(d){for(let{attributeName:l,target:h}of d)h.dispatchEvent(new CustomEvent(c,{detail:[l,h.getAttribute(l)]}))});return S(e.signal,()=>s.disconnect())&&s.observe(o,{attributes:!0}),o}};function bt(){let t=new Map,e=!1,n=new MutationObserver(function(i){for(let u of i)if(u.type==="childList"){if(l(u.addedNodes,!0)){s();continue}h(u.removedNodes,!0)&&s()}});return{onConnected(i,u){c();let f=o(i);f.connected.has(u)||(f.connected.add(u),f.length_c+=1)},offConnected(i,u){if(!t.has(i))return;let f=t.get(i);f.connected.has(u)&&(f.connected.delete(u),f.length_c-=1,r(i,f))},onDisconnected(i,u){c();let f=o(i);f.disconnected.has(u)||(f.disconnected.add(u),f.length_d+=1)},offDisconnected(i,u){if(!t.has(i))return;let f=t.get(i);f.disconnected.has(u)&&(f.disconnected.delete(u),f.length_d-=1,r(i,f))}};function r(i,u){u.length_c||u.length_d||(t.delete(i),s())}function o(i){if(t.has(i))return t.get(i);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(i,u),u}function c(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function s(){!e||t.size||(e=!1,n.disconnect())}function a(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function d(i){t.size>30&&await a();let u=[];if(!(i instanceof Node))return u;for(let f of t.keys())f===i||!(f instanceof Node)||i.contains(f)&&u.push(f);return u}function l(i,u){let f=!1;for(let v of i){if(u&&d(v).then(l),!t.has(v))continue;let _=t.get(v);_.length_c&&(v.dispatchEvent(new Event("dde:connected")),_.connected=new WeakSet,_.length_c=0,_.length_d||t.delete(v),f=!0)}return f}function h(i,u){let f=!1;for(let v of i)u&&d(v).then(h),!(!t.has(v)||!t.get(v).length_d)&&(v.dispatchEvent(new Event("dde:disconnected")),t.delete(v),f=!0);return f}}var p=Symbol.for("observable");function D(t){try{return Reflect.has(t,p)}catch{return!1}}var W=[],g=new WeakMap;function m(t,e){if(typeof t!="function")return X(!1,t,e);if(D(t))return t;let n=X(!0),r=function(){let[o,...c]=g.get(r);if(g.set(r,new Set([o])),W.push(r),rt(n,t()),W.pop(),!c.length)return;let s=g.get(r);for(let a of c)s.has(a)||R(a,r)};return g.set(n[p],r),g.set(r,new Set([n])),r(),n}m.action=function(t,e,...n){let r=t[p],{actions:o}=r;if(!o||!Reflect.has(o,e))throw new Error(`'${t}' has no action with name '${e}'!`);if(o[e].apply(r,n),r.skip)return Reflect.deleteProperty(r,"skip");r.listeners.forEach(c=>c(r.value))};m.on=function t(e,n,r={}){let{signal:o}=r;if(!(o&&o.aborted)){if(Array.isArray(e))return e.forEach(c=>t(c,n,r));q(e,n),o&&o.addEventListener("abort",()=>R(e,n))}};m.symbols={onclear:Symbol.for("Observable.onclear")};m.clear=function(...t){for(let n of t){Reflect.deleteProperty(n,"toJSON");let r=n[p];r.onclear.forEach(o=>o.call(r)),e(n,r),Reflect.deleteProperty(n,p)}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!g.has(o))return;let c=g.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),g.delete(o))})}};var L="__dde_reactive";m.el=function(t,e){let n=w.mark({type:"reactive"},!1),r=n.end,o=document.createDocumentFragment();o.append(n,r);let{current:c}=b,s=a=>{if(!n.parentNode||!r.parentNode)return R(t,s);b.push(c);let d=e(a);b.pop(),Array.isArray(d)||(d=[d]);let l=n;for(;(l=n.nextSibling)!==r;)l.remove();n.after(...d)};return q(t,s),et(t,s,n,e),s(t()),o};function gt(t,e){let n=(...r)=>r.length?t.setAttribute(e,...r):t.getAttribute(e);return n.attribute=e,n}var z="__dde_attributes";m.observedAttributes=function(t){let e=N(t,gt),n=t[z]={},r={_set(o){this.value=o}};return Object.keys(e).forEach(o=>{let c=e[o]=nt(e[o],e[o](),r);n[c.attribute]=c}),E.attributeChanged(function({detail:c}){/*! This maps attributes to observables (`O.observedAttributes`).
+	* Investigate `__dde_attributes` key of the element.*/let[s,a]=c,d=t[z][s];if(d)return m.action(d,"_set",a)})(t),E.disconnected(function(){/*! This removes all observables mapped to attributes (`O.observedAttributes`).
+	* Investigate `__dde_attributes` key of the element.*/m.clear(...Object.values(t[z]))})(t),e};var tt={isObservable:D,processReactiveAttribute(t,e,n,r){if(!D(n))return n;let o=c=>r(e,c);return q(n,o),et(n,o,t,e),n()}};function et(t,e,...n){let{current:r}=b;r.prevent||r.host(function(o){o[L]||(o[L]=[],E.disconnected(()=>o[L].forEach(([[c,s]])=>R(c,s,c[p]?.host()===o)))(o)),o[L].push([[t,e],...n])})}function X(t,e,n){let r=t?()=>Y(r):(...o)=>o.length?rt(r,...o):Y(r);return nt(r,e,n)}var vt=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),U=class extends Error{constructor(){super();let[e,...n]=this.stack.split(`
+`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4);this.stack=n.find(o=>!o.includes(r))}};function nt(t,e,n){let r=[];B(n)!=="[object Object]"&&(n={});let{onclear:o}=m.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=b;return Reflect.defineProperty(t,p,{value:{value:e,actions:n,onclear:r,host:c,listeners:new Set,defined:new U},enumerable:!1,writable:!1,configurable:!0}),t.toJSON=()=>t(),Object.setPrototypeOf(t[p],vt),t}function mt(){return W[W.length-1]}function Y(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=mt();return r&&n.add(r),g.has(r)&&g.get(r).add(t),e}function rt(t,e,n){if(!t[p])return;let r=t[p];if(!(!n&&r.value===e))return r.value=e,r.listeners.forEach(o=>o(e)),e}function q(t,e){if(t[p])return t[p].listeners.add(e)}function R(t,e,n){let r=t[p];if(!r)return;let o=r.listeners.delete(e);if(n&&!r.listeners.size){if(t.clear(t),!g.has(r))return o;let c=g.get(r);if(!g.has(c))return o;g.get(c).forEach(s=>R(s,c,!0))}return o}T(tt);
 globalThis.dde= {O: m,
-assign: A,
+assign: O,
 assignAttribute: Z,
-chainableAppend: ne,
-classListDeclarative: oe,
-createElement: R,
-createElementNS: _e,
-customElementRender: Se,
-customElementWithDDE: Ce,
-dispatchEvent: Pe,
-el: R,
-elNS: _e,
-elementAttribute: _,
-empty: Oe,
-isObservable: W,
-lifecycleToEvents: Ce,
+chainableAppend: st,
+classListDeclarative: ut,
+createElement: w,
+createElementNS: Rt,
+customElementRender: jt,
+customElementWithDDE: kt,
+dispatchEvent: Wt,
+el: w,
+elNS: Rt,
+elementAttribute: ft,
+empty: Ct,
+isObservable: D,
+lifecycleToEvents: kt,
 observable: m,
+observedAttributes: pt,
 on: E,
-registerReactivity: M,
-scope: p,
-simulateSlots: xe
+registerReactivity: T,
+scope: b,
+simulateSlots: wt
 };
 
 })();
\ No newline at end of file
diff --git a/dist/dde.js b/dist/dde.js
index d1540de..21c4c2d 100644
--- a/dist/dde.js
+++ b/dist/dde.js
@@ -1,24 +1,25 @@
 //deka-dom-el library is available via global namespace `dde`
 (()=> {
-var m={isObservable(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function q(t,e=!0){return e?Object.assign(m,t):(Object.setPrototypeOf(t,m),t)}function y(t){return m.isPrototypeOf(t)&&t!==m?t:m}function v(t){return typeof t>"u"}function w(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var R={setDeleteAttr:F,ssr:""};function F(t,e,n){if(Reflect.set(t,e,n),!!v(n)){if(Reflect.deleteProperty(t,e),t instanceof HTMLElement&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var b=[{scope:document.body,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],g={get current(){return b[b.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...b]},push(t={}){return b.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return b.push(b[0])},pop(){if(b.length!==1)return b.pop()}};function L(...t){return this.appendOriginal(...t),this}function U(t){return t.append===L||(t.appendOriginal=t.append,t.append=L),t}var A;function N(t,e,...n){let c=y(this),o=0,r,s;switch((Object(e)!==e||c.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,g.push({scope:t,host:(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(p=>p(s)),void 0):s}),r=t(e||void 0);let a=r instanceof DocumentFragment;if(r.nodeName==="#comment")break;let d=N.mark({type:"component",name:t.name,host:a?"this":"parentElement"});r.prepend(d),a&&(s=d);break}case t==="#text":r=x.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):r=x.call(this,document.createDocumentFragment(),e);break;case!!A:r=x.call(this,document.createElementNS(A,t),e);break;case!r:r=x.call(this,document.createElement(t),e)}return U(r),s||(s=r),n.forEach(a=>a(s)),o&&g.pop(),o=2,r}function nt(t,e=t,n=void 0){let c=Symbol.for("default"),o=Array.from(e.querySelectorAll("slot")).reduce((s,a)=>Reflect.set(s,a.name||c,a)&&s,{}),r=Reflect.has(o,c);if(t.append=new Proxy(t.append,{apply(s,a,d){if(!d.length)return t;let l=document.createDocumentFragment();for(let p of d){if(!p||!p.slot){r&&l.appendChild(p);continue}let i=p.slot,u=o[i];H(p,"remove","slot"),u&&(z(u,p,n),Reflect.deleteProperty(o,i))}return r&&(o[c].replaceWith(l),Reflect.deleteProperty(o,c)),t.append=s,t}}),t!==e){let s=Array.from(t.childNodes);s.forEach(a=>a.remove()),t.append(...s)}return e}function z(t,e,n){n&&n(t,e);try{t.replaceWith(x(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}N.mark=function(t,e=!1){t=Object.entries(t).map(([o,r])=>o+`="${r}"`).join(" ");let n=e?"":"/",c=document.createComment(`<dde:mark ${t}${R.ssr}${n}>`);return e||(c.end=document.createComment("</dde:mark>")),c};function rt(t){let e=this;return function(...c){A=t;let o=N.call(e,...c);return A=void 0,o}}var{setDeleteAttr:P}=R,C=new WeakMap;function x(t,...e){if(!e.length)return t;C.set(t,T(t,this));for(let[n,c]of Object.entries(Object.assign({},...e)))j.call(this,t,n,c);return C.delete(t),t}function j(t,e,n){let{setRemoveAttr:c,s:o}=T(t,this),r=this;n=o.processReactiveAttribute(t,e,n,(a,d)=>j.call(r,t,a,d));let[s]=e;if(s==="=")return c(e.slice(1),n);if(s===".")return W(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),c(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return c(e,n,"http://www.w3.org/1999/xlink");case"textContent":return P(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return S(o,n,W.bind(null,t[e]));case"ariaset":return S(o,n,(a,d)=>c("aria-"+a,d));case"classList":return B.call(r,t,n)}return I(t,e)?P(t,e,n):c(e,n)}function T(t,e){if(C.has(t))return C.get(t);let c=(t instanceof SVGElement?G:Z).bind(null,t,"Attribute"),o=y(e);return{setRemoveAttr:c,s:o}}function B(t,e){let n=y(this);return S(n,e,(c,o)=>t.classList.toggle(c,o===-1?void 0:!!o)),t}function ot(t){return Array.from(t.children).forEach(e=>e.remove()),t}function H(t,e,n,c){return t instanceof HTMLElement?t[e+"Attribute"](n,c):t[e+"AttributeNS"](null,n,c)}function I(t,e){if(!Reflect.has(t,e))return!1;let n=M(t,e);return!v(n.set)}function M(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||M(t,e)}function S(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,r]){o&&(r=t.processReactiveAttribute(e,o,r,n),n(o,r))})}function $(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function Z(t,e,n,c){return t[(v(c)?"remove":"set")+e](n,$(c))}function G(t,e,n,c,o=null){return t[(v(c)?"remove":"set")+e+"NS"](o,n,$(c))}function W(t,e,n){if(Reflect.set(t,e,n),!!v(n))return Reflect.deleteProperty(t,e)}function ut(t,e,n=t){g.push({scope:t,host:(...o)=>o.length?o.forEach(r=>r(t)):t,custom_element:t});let c=e.call(t,n);return g.pop(),c}function ft(t){for(let n of["connected","disconnected"])k(t.prototype,n+"Callback",function(c,o,r){c.apply(o,r),o.dispatchEvent(new Event("dde:"+n))});let e="attributeChanged";return k(t.prototype,e+"Callback",function(n,c,o){let[r,,s]=o;c.dispatchEvent(new CustomEvent("dde:"+e,{detail:[r,s]})),n.apply(c,o)}),t.prototype.__dde_lifecycleToEvents=!0,t}function k(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function dt(t,e,n){return e||(e={}),function(o,...r){n&&(r.unshift(o),o=typeof n=="function"?n():n);let s=r.length?new CustomEvent(t,Object.assign({detail:r[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function _(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var O=J(),V=new WeakSet;_.connected=function(t,e){let{custom_element:n}=g.current,c="connected";return typeof e!="object"&&(e={}),e.once=!0,function(r){n&&(r=n);let s="dde:"+c;return r.addEventListener(s,t,e),r.__dde_lifecycleToEvents?r:r.isConnected?(r.dispatchEvent(new Event(s)),r):(w(e.signal,()=>O.offConnected(r,t))&&O.onConnected(r,t),r)}};_.disconnected=function(t,e){let{custom_element:n}=g.current,c="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(r){n&&(r=n);let s="dde:"+c;return r.addEventListener(s,t,e),r.__dde_lifecycleToEvents||w(e.signal,()=>O.offDisconnected(r,t))&&O.onDisconnected(r,t),r}};var D=new WeakMap;_.disconnectedAsAbort=function(t){if(D.has(t))return D.get(t);let e=new AbortController;return D.set(t,e),t(_.disconnected(()=>e.abort())),e};_.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(o){let r="dde:"+n;if(o.addEventListener(r,t,e),o.__dde_lifecycleToEvents||V.has(o))return o;let s=new MutationObserver(function(d){for(let{attributeName:l,target:p}of d)p.dispatchEvent(new CustomEvent(r,{detail:[l,p.getAttribute(l)]}))});return w(e.signal,()=>s.disconnect())&&s.observe(o,{attributes:!0}),o}};function J(){let t=new Map,e=!1,n=new MutationObserver(function(i){for(let u of i)if(u.type==="childList"){if(l(u.addedNodes,!0)){s();continue}p(u.removedNodes,!0)&&s()}});return{onConnected(i,u){r();let f=o(i);f.connected.has(u)||(f.connected.add(u),f.length_c+=1)},offConnected(i,u){if(!t.has(i))return;let f=t.get(i);f.connected.has(u)&&(f.connected.delete(u),f.length_c-=1,c(i,f))},onDisconnected(i,u){r();let f=o(i);f.disconnected.has(u)||(f.disconnected.add(u),f.length_d+=1)},offDisconnected(i,u){if(!t.has(i))return;let f=t.get(i);f.disconnected.has(u)&&(f.disconnected.delete(u),f.length_d-=1,c(i,f))}};function c(i,u){u.length_c||u.length_d||(t.delete(i),s())}function o(i){if(t.has(i))return t.get(i);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(i,u),u}function r(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function s(){!e||t.size||(e=!1,n.disconnect())}function a(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function d(i){t.size>30&&await a();let u=[];if(!(i instanceof Node))return u;for(let f of t.keys())f===i||!(f instanceof Node)||i.contains(f)&&u.push(f);return u}function l(i,u){let f=!1;for(let h of i){if(u&&d(h).then(l),!t.has(h))continue;let E=t.get(h);E.length_c&&(h.dispatchEvent(new Event("dde:connected")),E.connected=new WeakSet,E.length_c=0,E.length_d||t.delete(h),f=!0)}return f}function p(i,u){let f=!1;for(let h of i)u&&d(h).then(p),!(!t.has(h)||!t.get(h).length_d)&&(h.dispatchEvent(new Event("dde:disconnected")),t.delete(h),f=!0);return f}}
+var m={isObservable(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function q(t,e=!0){return e?Object.assign(m,t):(Object.setPrototypeOf(t,m),t)}function _(t){return m.isPrototypeOf(t)&&t!==m?t:m}function v(t){return typeof t>"u"}function y(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function L(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(c,r){return Reflect.set(c,F(r),e(t,r)),c},{})}function F(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var R={setDeleteAttr:z,ssr:""};function z(t,e,n){if(Reflect.set(t,e,n),!!v(n)){if(Reflect.deleteProperty(t,e),t instanceof HTMLElement&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var b=[{scope:document.body,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],g={get current(){return b[b.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...b]},push(t={}){return b.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return b.push(b[0])},pop(){if(b.length!==1)return b.pop()}};function P(...t){return this.appendOriginal(...t),this}function B(t){return t.append===P||(t.appendOriginal=t.append,t.append=P),t}var w;function N(t,e,...n){let c=_(this),r=0,o,s;switch((Object(e)!==e||c.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{r=1,g.push({scope:t,host:(...l)=>l.length?(r===1?n.unshift(...l):l.forEach(p=>p(s)),void 0):s}),o=t(e||void 0);let a=o instanceof DocumentFragment;if(o.nodeName==="#comment")break;let d=N.mark({type:"component",name:t.name,host:a?"this":"parentElement"});o.prepend(d),a&&(s=d);break}case t==="#text":o=x.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):o=x.call(this,document.createDocumentFragment(),e);break;case!!w:o=x.call(this,document.createElementNS(w,t),e);break;case!o:o=x.call(this,document.createElement(t),e)}return B(o),s||(s=o),n.forEach(a=>a(s)),r&&g.pop(),r=2,o}function ct(t,e=t,n=void 0){let c=Symbol.for("default"),r=Array.from(e.querySelectorAll("slot")).reduce((s,a)=>Reflect.set(s,a.name||c,a)&&s,{}),o=Reflect.has(r,c);if(t.append=new Proxy(t.append,{apply(s,a,d){if(!d.length)return t;let l=document.createDocumentFragment();for(let p of d){if(!p||!p.slot){o&&l.appendChild(p);continue}let i=p.slot,u=r[i];Z(p,"remove","slot"),u&&(H(u,p,n),Reflect.deleteProperty(r,i))}return o&&(r[c].replaceWith(l),Reflect.deleteProperty(r,c)),t.append=s,t}}),t!==e){let s=Array.from(t.childNodes);s.forEach(a=>a.remove()),t.append(...s)}return e}function H(t,e,n){n&&n(t,e);try{t.replaceWith(x(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}N.mark=function(t,e=!1){t=Object.entries(t).map(([r,o])=>r+`="${o}"`).join(" ");let n=e?"":"/",c=document.createComment(`<dde:mark ${t}${R.ssr}${n}>`);return e||(c.end=document.createComment("</dde:mark>")),c};function st(t){let e=this;return function(...c){w=t;let r=N.call(e,...c);return w=void 0,r}}var{setDeleteAttr:W}=R,C=new WeakMap;function x(t,...e){if(!e.length)return t;C.set(t,M(t,this));for(let[n,c]of Object.entries(Object.assign({},...e)))T.call(this,t,n,c);return C.delete(t),t}function T(t,e,n){let{setRemoveAttr:c,s:r}=M(t,this),o=this;n=r.processReactiveAttribute(t,e,n,(a,d)=>T.call(o,t,a,d));let[s]=e;if(s==="=")return c(e.slice(1),n);if(s===".")return j(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),c(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return c(e,n,"http://www.w3.org/1999/xlink");case"textContent":return W(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return S(r,n,j.bind(null,t[e]));case"ariaset":return S(r,n,(a,d)=>c("aria-"+a,d));case"classList":return I.call(o,t,n)}return G(t,e)?W(t,e,n):c(e,n)}function M(t,e){if(C.has(t))return C.get(t);let c=(t instanceof SVGElement?J:V).bind(null,t,"Attribute"),r=_(e);return{setRemoveAttr:c,s:r}}function I(t,e){let n=_(this);return S(n,e,(c,r)=>t.classList.toggle(c,r===-1?void 0:!!r)),t}function it(t){return Array.from(t.children).forEach(e=>e.remove()),t}function Z(t,e,n,c){return t instanceof HTMLElement?t[e+"Attribute"](n,c):t[e+"AttributeNS"](null,n,c)}function G(t,e){if(!Reflect.has(t,e))return!1;let n=$(t,e);return!v(n.set)}function $(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||$(t,e)}function S(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([r,o]){r&&(o=t.processReactiveAttribute(e,r,o,n),n(r,o))})}function k(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function V(t,e,n,c){return t[(v(c)?"remove":"set")+e](n,k(c))}function J(t,e,n,c,r=null){return t[(v(c)?"remove":"set")+e+"NS"](r,n,k(c))}function j(t,e,n){if(Reflect.set(t,e,n),!!v(n))return Reflect.deleteProperty(t,e)}function dt(t,e,n=K){g.push({scope:t,host:(...r)=>r.length?r.forEach(o=>o(t)):t,custom_element:t}),typeof n=="function"&&(n=n.call(t,t));let c=e.call(t,n);return g.pop(),c}function pt(t){for(let n of["connected","disconnected"])U(t.prototype,n+"Callback",function(c,r,o){c.apply(r,o),r.dispatchEvent(new Event("dde:"+n))});let e="attributeChanged";return U(t.prototype,e+"Callback",function(n,c,r){let[o,,s]=r;c.dispatchEvent(new CustomEvent("dde:"+e,{detail:[o,s]})),n.apply(c,r)}),t.prototype.__dde_lifecycleToEvents=!0,t}function U(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function K(t){return L(t,(e,n)=>e.getAttribute(n))}function bt(t,e,n){return e||(e={}),function(r,...o){n&&(o.unshift(r),r=typeof n=="function"?n():n);let s=o.length?new CustomEvent(t,Object.assign({detail:o[0]},e)):new Event(t,e);return r.dispatchEvent(s)}}function A(t,e,n){return function(r){return r.addEventListener(t,e,n),r}}var O=X(),Q=new WeakSet;A.connected=function(t,e){let{custom_element:n}=g.current,c="connected";return typeof e!="object"&&(e={}),e.once=!0,function(o){n&&(o=n);let s="dde:"+c;return o.addEventListener(s,t,e),o.__dde_lifecycleToEvents?o:o.isConnected?(o.dispatchEvent(new Event(s)),o):(y(e.signal,()=>O.offConnected(o,t))&&O.onConnected(o,t),o)}};A.disconnected=function(t,e){let{custom_element:n}=g.current,c="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(o){n&&(o=n);let s="dde:"+c;return o.addEventListener(s,t,e),o.__dde_lifecycleToEvents||y(e.signal,()=>O.offDisconnected(o,t))&&O.onDisconnected(o,t),o}};var D=new WeakMap;A.disconnectedAsAbort=function(t){if(D.has(t))return D.get(t);let e=new AbortController;return D.set(t,e),t(A.disconnected(()=>e.abort())),e};A.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(r){let o="dde:"+n;if(r.addEventListener(o,t,e),r.__dde_lifecycleToEvents||Q.has(r))return r;let s=new MutationObserver(function(d){for(let{attributeName:l,target:p}of d)p.dispatchEvent(new CustomEvent(o,{detail:[l,p.getAttribute(l)]}))});return y(e.signal,()=>s.disconnect())&&s.observe(r,{attributes:!0}),r}};function X(){let t=new Map,e=!1,n=new MutationObserver(function(i){for(let u of i)if(u.type==="childList"){if(l(u.addedNodes,!0)){s();continue}p(u.removedNodes,!0)&&s()}});return{onConnected(i,u){o();let f=r(i);f.connected.has(u)||(f.connected.add(u),f.length_c+=1)},offConnected(i,u){if(!t.has(i))return;let f=t.get(i);f.connected.has(u)&&(f.connected.delete(u),f.length_c-=1,c(i,f))},onDisconnected(i,u){o();let f=r(i);f.disconnected.has(u)||(f.disconnected.add(u),f.length_d+=1)},offDisconnected(i,u){if(!t.has(i))return;let f=t.get(i);f.disconnected.has(u)&&(f.disconnected.delete(u),f.length_d-=1,c(i,f))}};function c(i,u){u.length_c||u.length_d||(t.delete(i),s())}function r(i){if(t.has(i))return t.get(i);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(i,u),u}function o(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function s(){!e||t.size||(e=!1,n.disconnect())}function a(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function d(i){t.size>30&&await a();let u=[];if(!(i instanceof Node))return u;for(let f of t.keys())f===i||!(f instanceof Node)||i.contains(f)&&u.push(f);return u}function l(i,u){let f=!1;for(let h of i){if(u&&d(h).then(l),!t.has(h))continue;let E=t.get(h);E.length_c&&(h.dispatchEvent(new Event("dde:connected")),E.connected=new WeakSet,E.length_c=0,E.length_d||t.delete(h),f=!0)}return f}function p(i,u){let f=!1;for(let h of i)u&&d(h).then(p),!(!t.has(h)||!t.get(h).length_d)&&(h.dispatchEvent(new Event("dde:disconnected")),t.delete(h),f=!0);return f}}
 globalThis.dde= {assign: x,
-assignAttribute: j,
-chainableAppend: U,
-classListDeclarative: B,
+assignAttribute: T,
+chainableAppend: B,
+classListDeclarative: I,
 createElement: N,
-createElementNS: rt,
-customElementRender: ut,
-customElementWithDDE: ft,
-dispatchEvent: dt,
+createElementNS: st,
+customElementRender: dt,
+customElementWithDDE: pt,
+dispatchEvent: bt,
 el: N,
-elNS: rt,
-elementAttribute: H,
-empty: ot,
-lifecycleToEvents: ft,
-on: _,
+elNS: st,
+elementAttribute: Z,
+empty: it,
+lifecycleToEvents: pt,
+observedAttributes: K,
+on: A,
 registerReactivity: q,
 scope: g,
-simulateSlots: nt
+simulateSlots: ct
 };
 
 })();
\ No newline at end of file
diff --git a/dist/esm-with-observables.js b/dist/esm-with-observables.js
index 6d845a0..00b01a9 100644
--- a/dist/esm-with-observables.js
+++ b/dist/esm-with-observables.js
@@ -1,4 +1,4 @@
-var w={isObservable(e){return!1},processReactiveAttribute(e,t,n,r){return n}};function M(e,t=!0){return t?Object.assign(w,e):(Object.setPrototypeOf(e,w),e)}function N(e){return w.isPrototypeOf(e)&&e!==w?e:w}function x(e){return typeof e>"u"}function B(e){let t=typeof e;return t!=="object"?t:e===null?"null":Object.prototype.toString.call(e)}function P(e,t){if(!e||!(e instanceof AbortSignal))return!0;if(!e.aborted)return e.addEventListener("abort",t),function(){e.removeEventListener("abort",t)}}var $={setDeleteAttr:te,ssr:""};function te(e,t,n){if(Reflect.set(e,t,n),!!x(n)){if(Reflect.deleteProperty(e,t),e instanceof HTMLElement&&e.getAttribute(t)==="undefined")return e.removeAttribute(t);if(Reflect.get(e,t)==="undefined")return Reflect.set(e,t,"")}}var y=[{scope:document.body,host:e=>e?e(document.body):document.body,custom_element:!1,prevent:!0}],p={get current(){return y[y.length-1]},get host(){return this.current.host},preventDefault(){let{current:e}=this;return e.prevent=!0,e},get state(){return[...y]},push(e={}){return y.push(Object.assign({},this.current,{prevent:!1},e))},pushRoot(){return y.push(y[0])},pop(){if(y.length!==1)return y.pop()}};function H(...e){return this.appendOriginal(...e),this}function ne(e){return e.append===H||(e.appendOriginal=e.append,e.append=H),e}var L;function R(e,t,...n){let r=N(this),o=0,c,s;switch((Object(t)!==t||r.isObservable(t))&&(t={textContent:t}),!0){case typeof e=="function":{o=1,p.push({scope:e,host:(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(b=>b(s)),void 0):s}),c=e(t||void 0);let u=c instanceof DocumentFragment;if(c.nodeName==="#comment")break;let d=R.mark({type:"component",name:e.name,host:u?"this":"parentElement"});c.prepend(d),u&&(s=d);break}case e==="#text":c=A.call(this,document.createTextNode(""),t);break;case(e==="<>"||!e):c=A.call(this,document.createDocumentFragment(),t);break;case!!L:c=A.call(this,document.createElementNS(L,e),t);break;case!c:c=A.call(this,document.createElement(e),t)}return ne(c),s||(s=c),n.forEach(u=>u(s)),o&&p.pop(),o=2,c}function xe(e,t=e,n=void 0){let r=Symbol.for("default"),o=Array.from(t.querySelectorAll("slot")).reduce((s,u)=>Reflect.set(s,u.name||r,u)&&s,{}),c=Reflect.has(o,r);if(e.append=new Proxy(e.append,{apply(s,u,d){if(!d.length)return e;let l=document.createDocumentFragment();for(let b of d){if(!b||!b.slot){c&&l.appendChild(b);continue}let i=b.slot,f=o[i];_(b,"remove","slot"),f&&(re(f,b,n),Reflect.deleteProperty(o,i))}return c&&(o[r].replaceWith(l),Reflect.deleteProperty(o,r)),e.append=s,e}}),e!==t){let s=Array.from(e.childNodes);s.forEach(u=>u.remove()),e.append(...s)}return t}function re(e,t,n){n&&n(e,t);try{e.replaceWith(A(t,{className:[t.className,e.className],dataset:{...e.dataset}}))}catch{e.replaceWith(t)}}R.mark=function(e,t=!1){e=Object.entries(e).map(([o,c])=>o+`="${c}"`).join(" ");let n=t?"":"/",r=document.createComment(`<dde:mark ${e}${$.ssr}${n}>`);return t||(r.end=document.createComment("</dde:mark>")),r};function _e(e){let t=this;return function(...r){L=e;let o=R.call(t,...r);return L=void 0,o}}var{setDeleteAttr:I}=$,j=new WeakMap;function A(e,...t){if(!t.length)return e;j.set(e,G(e,this));for(let[n,r]of Object.entries(Object.assign({},...t)))Z.call(this,e,n,r);return j.delete(e),e}function Z(e,t,n){let{setRemoveAttr:r,s:o}=G(e,this),c=this;n=o.processReactiveAttribute(e,t,n,(u,d)=>Z.call(c,e,u,d));let[s]=t;if(s==="=")return r(t.slice(1),n);if(s===".")return J(e,t.slice(1),n);if(/(aria|data)([A-Z])/.test(t))return t=t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(t,n);switch(t==="className"&&(t="class"),t){case"xlink:href":return r(t,n,"http://www.w3.org/1999/xlink");case"textContent":return I(e,t,n);case"style":if(typeof n!="object")break;case"dataset":return F(o,n,J.bind(null,e[t]));case"ariaset":return F(o,n,(u,d)=>r("aria-"+u,d));case"classList":return oe.call(c,e,n)}return ce(e,t)?I(e,t,n):r(t,n)}function G(e,t){if(j.has(e))return j.get(e);let r=(e instanceof SVGElement?ie:se).bind(null,e,"Attribute"),o=N(t);return{setRemoveAttr:r,s:o}}function oe(e,t){let n=N(this);return F(n,t,(r,o)=>e.classList.toggle(r,o===-1?void 0:!!o)),e}function Oe(e){return Array.from(e.children).forEach(t=>t.remove()),e}function _(e,t,n,r){return e instanceof HTMLElement?e[t+"Attribute"](n,r):e[t+"AttributeNS"](null,n,r)}function ce(e,t){if(!Reflect.has(e,t))return!1;let n=V(e,t);return!x(n.set)}function V(e,t){if(e=Object.getPrototypeOf(e),!e)return{};let n=Object.getOwnPropertyDescriptor(e,t);return n||V(e,t)}function F(e,t,n){if(!(typeof t!="object"||t===null))return Object.entries(t).forEach(function([o,c]){o&&(c=e.processReactiveAttribute(t,o,c,n),n(o,c))})}function K(e){return Array.isArray(e)?e.filter(Boolean).join(" "):e}function se(e,t,n,r){return e[(x(r)?"remove":"set")+t](n,K(r))}function ie(e,t,n,r,o=null){return e[(x(r)?"remove":"set")+t+"NS"](o,n,K(r))}function J(e,t,n){if(Reflect.set(e,t,n),!!x(n))return Reflect.deleteProperty(e,t)}function Se(e,t,n=e){p.push({scope:e,host:(...o)=>o.length?o.forEach(c=>c(e)):e,custom_element:e});let r=t.call(e,n);return p.pop(),r}function Ce(e){for(let n of["connected","disconnected"])Q(e.prototype,n+"Callback",function(r,o,c){r.apply(o,c),o.dispatchEvent(new Event("dde:"+n))});let t="attributeChanged";return Q(e.prototype,t+"Callback",function(n,r,o){let[c,,s]=o;r.dispatchEvent(new CustomEvent("dde:"+t,{detail:[c,s]})),n.apply(r,o)}),e.prototype.__dde_lifecycleToEvents=!0,e}function Q(e,t,n){e[t]=new Proxy(e[t]||(()=>{}),{apply:n})}function Pe(e,t,n){return t||(t={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(e,Object.assign({detail:c[0]},t)):new Event(e,t);return o.dispatchEvent(s)}}function E(e,t,n){return function(o){return o.addEventListener(e,t,n),o}}var D=ue(),fe=new WeakSet;E.connected=function(e,t){let{custom_element:n}=p.current,r="connected";return typeof t!="object"&&(t={}),t.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,e,t),c.__dde_lifecycleToEvents?c:c.isConnected?(c.dispatchEvent(new Event(s)),c):(P(t.signal,()=>D.offConnected(c,e))&&D.onConnected(c,e),c)}};E.disconnected=function(e,t){let{custom_element:n}=p.current,r="disconnected";return typeof t!="object"&&(t={}),t.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,e,t),c.__dde_lifecycleToEvents||P(t.signal,()=>D.offDisconnected(c,e))&&D.onDisconnected(c,e),c}};var z=new WeakMap;E.disconnectedAsAbort=function(e){if(z.has(e))return z.get(e);let t=new AbortController;return z.set(e,t),e(E.disconnected(()=>t.abort())),t};E.attributeChanged=function(e,t){let n="attributeChanged";return typeof t!="object"&&(t={}),function(o){let c="dde:"+n;if(o.addEventListener(c,e,t),o.__dde_lifecycleToEvents||fe.has(o))return o;let s=new MutationObserver(function(d){for(let{attributeName:l,target:b}of d)b.dispatchEvent(new CustomEvent(c,{detail:[l,b.getAttribute(l)]}))});return P(t.signal,()=>s.disconnect())&&s.observe(o,{attributes:!0}),o}};function ue(){let e=new Map,t=!1,n=new MutationObserver(function(i){for(let f of i)if(f.type==="childList"){if(l(f.addedNodes,!0)){s();continue}b(f.removedNodes,!0)&&s()}});return{onConnected(i,f){c();let a=o(i);a.connected.has(f)||(a.connected.add(f),a.length_c+=1)},offConnected(i,f){if(!e.has(i))return;let a=e.get(i);a.connected.has(f)&&(a.connected.delete(f),a.length_c-=1,r(i,a))},onDisconnected(i,f){c();let a=o(i);a.disconnected.has(f)||(a.disconnected.add(f),a.length_d+=1)},offDisconnected(i,f){if(!e.has(i))return;let a=e.get(i);a.disconnected.has(f)&&(a.disconnected.delete(f),a.length_d-=1,r(i,a))}};function r(i,f){f.length_c||f.length_d||(e.delete(i),s())}function o(i){if(e.has(i))return e.get(i);let f={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return e.set(i,f),f}function c(){t||(t=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function s(){!t||e.size||(t=!1,n.disconnect())}function u(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function d(i){e.size>30&&await u();let f=[];if(!(i instanceof Node))return f;for(let a of e.keys())a===i||!(a instanceof Node)||i.contains(a)&&f.push(a);return f}function l(i,f){let a=!1;for(let v of i){if(f&&d(v).then(l),!e.has(v))continue;let O=e.get(v);O.length_c&&(v.dispatchEvent(new Event("dde:connected")),O.connected=new WeakSet,O.length_c=0,O.length_d||e.delete(v),a=!0)}return a}function b(i,f){let a=!1;for(let v of i)f&&d(v).then(b),!(!e.has(v)||!e.get(v).length_d)&&(v.dispatchEvent(new Event("dde:disconnected")),e.delete(v),a=!0);return a}}var h=Symbol.for("observable");function W(e){try{return Reflect.has(e,h)}catch{return!1}}var T=[],g=new WeakMap;function m(e,t){if(typeof e!="function")return X(e,t);if(W(e))return e;let n=X(),r=function(){let[o,...c]=g.get(r);if(g.set(r,new Set([o])),T.push(r),n(e()),T.pop(),!c.length)return;let s=g.get(r);for(let u of c)s.has(u)||C(u,r)};return g.set(n[h],r),g.set(r,new Set([n])),r(),n}m.action=function(e,t,...n){let r=e[h],{actions:o}=r;if(!o||!Reflect.has(o,t))throw new Error(`'${e}' has no action with name '${t}'!`);if(o[t].apply(r,n),r.skip)return Reflect.deleteProperty(r,"skip");r.listeners.forEach(c=>c(r.value))};m.on=function e(t,n,r={}){let{signal:o}=r;if(!(o&&o.aborted)){if(Array.isArray(t))return t.forEach(c=>e(c,n,r));U(t,n),o&&o.addEventListener("abort",()=>C(t,n))}};m.symbols={onclear:Symbol.for("Observable.onclear")};m.clear=function(...e){for(let n of e){Reflect.deleteProperty(n,"toJSON");let r=n[h];r.onclear.forEach(o=>o.call(r)),t(n,r),Reflect.deleteProperty(n,h)}function t(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!g.has(o))return;let c=g.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),g.delete(o))})}};var k="__dde_reactive";m.el=function(e,t){let n=R.mark({type:"reactive"},!1),r=n.end,o=document.createDocumentFragment();o.append(n,r);let{current:c}=p,s=u=>{if(!n.parentNode||!r.parentNode)return C(e,s);p.push(c);let d=t(u);p.pop(),Array.isArray(d)||(d=[d]);let l=n;for(;(l=n.nextSibling)!==r;)l.remove();n.after(...d)};return U(e,s),ee(e,s,n,t),s(e()),o};var S="__dde_attributes";m.attribute=function(e,t=null){let n=m(t),r;return p.host(o=>{if(r=o,_(r,"has",e)?n(_(r,"get",e)):t!==null&&_(r,"set",e,t),o[S]){o[S][e]=n;return}r[S]={[e]:n},E.attributeChanged(function({detail:s}){/*! This maps attributes to observables (`S.attribute`).
-* Investigate `__dde_attributes` key of the element.*/let[u,d]=s,l=r[S][u];if(l)return l(d)})(r),E.disconnected(function(){/*! This removes all observables mapped to attributes (`S.attribute`).
-* Investigate `__dde_attributes` key of the element.*/m.clear(...Object.values(r[S]))})(r)}),new Proxy(n,{apply(o,c,s){if(!s.length)return o();let u=s[0];return _(r,"set",e,u)}})};var Y={isObservable:W,processReactiveAttribute(e,t,n,r){if(!W(n))return n;let o=c=>r(t,c);return U(n,o),ee(n,o,e,t),n()}};function ee(e,t,...n){let{current:r}=p;r.prevent||r.host(function(o){o[k]||(o[k]=[],E.disconnected(()=>o[k].forEach(([[c,s]])=>C(c,s,c[h]?.host()===o)))(o)),o[k].push([[e,t],...n])})}function X(e,t){let n=(...r)=>r.length?he(n,...r):pe(n);return de(n,e,t)}var ae=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),q=class extends Error{constructor(){super();let[t,...n]=this.stack.split(`
-`),r=t.slice(t.indexOf("@"),t.indexOf(".js:")+4);this.stack=n.find(o=>!o.includes(r))}};function de(e,t,n){let r=[];B(n)!=="[object Object]"&&(n={});let{onclear:o}=m.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=p;return Reflect.defineProperty(e,h,{value:{value:t,actions:n,onclear:r,host:c,listeners:new Set,defined:new q},enumerable:!1,writable:!1,configurable:!0}),e.toJSON=()=>e(),Object.setPrototypeOf(e[h],ae),e}function le(){return T[T.length-1]}function pe(e){if(!e[h])return;let{value:t,listeners:n}=e[h],r=le();return r&&n.add(r),g.has(r)&&g.get(r).add(e),t}function he(e,t,n){if(!e[h])return;let r=e[h];if(!(!n&&r.value===t))return r.value=t,r.listeners.forEach(o=>o(t)),t}function U(e,t){if(e[h])return e[h].listeners.add(t)}function C(e,t,n){let r=e[h];if(!r)return;let o=r.listeners.delete(t);if(n&&!r.listeners.size){if(e.clear(e),!g.has(r))return o;let c=g.get(r);if(!g.has(c))return o;g.get(c).forEach(s=>C(s,c,!0))}return o}M(Y);export{m as O,A as assign,Z as assignAttribute,ne as chainableAppend,oe as classListDeclarative,R as createElement,_e as createElementNS,Se as customElementRender,Ce as customElementWithDDE,Pe as dispatchEvent,R as el,_e as elNS,_ as elementAttribute,Oe as empty,W as isObservable,Ce as lifecycleToEvents,m as observable,E as on,M as registerReactivity,p as scope,xe as simulateSlots};
+var A={isObservable(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function T(t,e=!0){return e?Object.assign(A,t):(Object.setPrototypeOf(t,A),t)}function C(t){return A.isPrototypeOf(t)&&t!==A?t:A}function y(t){return typeof t>"u"}function B(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function S(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function N(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return Reflect.set(r,ot(o),e(t,o)),r},{})}function ot(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var M={setDeleteAttr:ct,ssr:""};function ct(t,e,n){if(Reflect.set(t,e,n),!!y(n)){if(Reflect.deleteProperty(t,e),t instanceof HTMLElement&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var x=[{scope:document.body,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],b={get current(){return x[x.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...x]},push(t={}){return x.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return x.push(x[0])},pop(){if(x.length!==1)return x.pop()}};function H(...t){return this.appendOriginal(...t),this}function st(t){return t.append===H||(t.appendOriginal=t.append,t.append=H),t}var P;function w(t,e,...n){let r=C(this),o=0,c,s;switch((Object(e)!==e||r.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,b.push({scope:t,host:(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(h=>h(s)),void 0):s}),c=t(e||void 0);let a=c instanceof DocumentFragment;if(c.nodeName==="#comment")break;let d=w.mark({type:"component",name:t.name,host:a?"this":"parentElement"});c.prepend(d),a&&(s=d);break}case t==="#text":c=O.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):c=O.call(this,document.createDocumentFragment(),e);break;case!!P:c=O.call(this,document.createElementNS(P,t),e);break;case!c:c=O.call(this,document.createElement(t),e)}return st(c),s||(s=c),n.forEach(a=>a(s)),o&&b.pop(),o=2,c}function wt(t,e=t,n=void 0){let r=Symbol.for("default"),o=Array.from(e.querySelectorAll("slot")).reduce((s,a)=>Reflect.set(s,a.name||r,a)&&s,{}),c=Reflect.has(o,r);if(t.append=new Proxy(t.append,{apply(s,a,d){if(!d.length)return t;let l=document.createDocumentFragment();for(let h of d){if(!h||!h.slot){c&&l.appendChild(h);continue}let i=h.slot,u=o[i];ft(h,"remove","slot"),u&&(it(u,h,n),Reflect.deleteProperty(o,i))}return c&&(o[r].replaceWith(l),Reflect.deleteProperty(o,r)),t.append=s,t}}),t!==e){let s=Array.from(t.childNodes);s.forEach(a=>a.remove()),t.append(...s)}return e}function it(t,e,n){n&&n(t,e);try{t.replaceWith(O(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}w.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=document.createComment(`<dde:mark ${t}${M.ssr}${n}>`);return e||(r.end=document.createComment("</dde:mark>")),r};function Rt(t){let e=this;return function(...r){P=t;let o=w.call(e,...r);return P=void 0,o}}var{setDeleteAttr:I}=M,j=new WeakMap;function O(t,...e){if(!e.length)return t;j.set(t,G(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))Z.call(this,t,n,r);return j.delete(t),t}function Z(t,e,n){let{setRemoveAttr:r,s:o}=G(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(a,d)=>Z.call(c,t,a,d));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return J(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return I(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return $(o,n,J.bind(null,t[e]));case"ariaset":return $(o,n,(a,d)=>r("aria-"+a,d));case"classList":return ut.call(c,t,n)}return at(t,e)?I(t,e,n):r(e,n)}function G(t,e){if(j.has(t))return j.get(t);let r=(t instanceof SVGElement?lt:dt).bind(null,t,"Attribute"),o=C(e);return{setRemoveAttr:r,s:o}}function ut(t,e){let n=C(this);return $(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function Ct(t){return Array.from(t.children).forEach(e=>e.remove()),t}function ft(t,e,n,r){return t instanceof HTMLElement?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function at(t,e){if(!Reflect.has(t,e))return!1;let n=V(t,e);return!y(n.set)}function V(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||V(t,e)}function $(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,c]){o&&(c=t.processReactiveAttribute(e,o,c,n),n(o,c))})}function K(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function dt(t,e,n,r){return t[(y(r)?"remove":"set")+e](n,K(r))}function lt(t,e,n,r,o=null){return t[(y(r)?"remove":"set")+e+"NS"](o,n,K(r))}function J(t,e,n){if(Reflect.set(t,e,n),!!y(n))return Reflect.deleteProperty(t,e)}function jt(t,e,n=pt){b.push({scope:t,host:(...o)=>o.length?o.forEach(c=>c(t)):t,custom_element:t}),typeof n=="function"&&(n=n.call(t,t));let r=e.call(t,n);return b.pop(),r}function kt(t){for(let n of["connected","disconnected"])Q(t.prototype,n+"Callback",function(r,o,c){r.apply(o,c),o.dispatchEvent(new Event("dde:"+n))});let e="attributeChanged";return Q(t.prototype,e+"Callback",function(n,r,o){let[c,,s]=o;r.dispatchEvent(new CustomEvent("dde:"+e,{detail:[c,s]})),n.apply(r,o)}),t.prototype.__dde_lifecycleToEvents=!0,t}function Q(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function pt(t){return N(t,(e,n)=>e.getAttribute(n))}function Wt(t,e,n){return e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(t,Object.assign({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function E(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var k=bt(),ht=new WeakSet;E.connected=function(t,e){let{custom_element:n}=b.current,r="connected";return typeof e!="object"&&(e={}),e.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,t,e),c.__dde_lifecycleToEvents?c:c.isConnected?(c.dispatchEvent(new Event(s)),c):(S(e.signal,()=>k.offConnected(c,t))&&k.onConnected(c,t),c)}};E.disconnected=function(t,e){let{custom_element:n}=b.current,r="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,t,e),c.__dde_lifecycleToEvents||S(e.signal,()=>k.offDisconnected(c,t))&&k.onDisconnected(c,t),c}};var F=new WeakMap;E.disconnectedAsAbort=function(t){if(F.has(t))return F.get(t);let e=new AbortController;return F.set(t,e),t(E.disconnected(()=>e.abort())),e};E.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(o){let c="dde:"+n;if(o.addEventListener(c,t,e),o.__dde_lifecycleToEvents||ht.has(o))return o;let s=new MutationObserver(function(d){for(let{attributeName:l,target:h}of d)h.dispatchEvent(new CustomEvent(c,{detail:[l,h.getAttribute(l)]}))});return S(e.signal,()=>s.disconnect())&&s.observe(o,{attributes:!0}),o}};function bt(){let t=new Map,e=!1,n=new MutationObserver(function(i){for(let u of i)if(u.type==="childList"){if(l(u.addedNodes,!0)){s();continue}h(u.removedNodes,!0)&&s()}});return{onConnected(i,u){c();let f=o(i);f.connected.has(u)||(f.connected.add(u),f.length_c+=1)},offConnected(i,u){if(!t.has(i))return;let f=t.get(i);f.connected.has(u)&&(f.connected.delete(u),f.length_c-=1,r(i,f))},onDisconnected(i,u){c();let f=o(i);f.disconnected.has(u)||(f.disconnected.add(u),f.length_d+=1)},offDisconnected(i,u){if(!t.has(i))return;let f=t.get(i);f.disconnected.has(u)&&(f.disconnected.delete(u),f.length_d-=1,r(i,f))}};function r(i,u){u.length_c||u.length_d||(t.delete(i),s())}function o(i){if(t.has(i))return t.get(i);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(i,u),u}function c(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function s(){!e||t.size||(e=!1,n.disconnect())}function a(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function d(i){t.size>30&&await a();let u=[];if(!(i instanceof Node))return u;for(let f of t.keys())f===i||!(f instanceof Node)||i.contains(f)&&u.push(f);return u}function l(i,u){let f=!1;for(let v of i){if(u&&d(v).then(l),!t.has(v))continue;let _=t.get(v);_.length_c&&(v.dispatchEvent(new Event("dde:connected")),_.connected=new WeakSet,_.length_c=0,_.length_d||t.delete(v),f=!0)}return f}function h(i,u){let f=!1;for(let v of i)u&&d(v).then(h),!(!t.has(v)||!t.get(v).length_d)&&(v.dispatchEvent(new Event("dde:disconnected")),t.delete(v),f=!0);return f}}var p=Symbol.for("observable");function D(t){try{return Reflect.has(t,p)}catch{return!1}}var W=[],g=new WeakMap;function m(t,e){if(typeof t!="function")return X(!1,t,e);if(D(t))return t;let n=X(!0),r=function(){let[o,...c]=g.get(r);if(g.set(r,new Set([o])),W.push(r),rt(n,t()),W.pop(),!c.length)return;let s=g.get(r);for(let a of c)s.has(a)||R(a,r)};return g.set(n[p],r),g.set(r,new Set([n])),r(),n}m.action=function(t,e,...n){let r=t[p],{actions:o}=r;if(!o||!Reflect.has(o,e))throw new Error(`'${t}' has no action with name '${e}'!`);if(o[e].apply(r,n),r.skip)return Reflect.deleteProperty(r,"skip");r.listeners.forEach(c=>c(r.value))};m.on=function t(e,n,r={}){let{signal:o}=r;if(!(o&&o.aborted)){if(Array.isArray(e))return e.forEach(c=>t(c,n,r));q(e,n),o&&o.addEventListener("abort",()=>R(e,n))}};m.symbols={onclear:Symbol.for("Observable.onclear")};m.clear=function(...t){for(let n of t){Reflect.deleteProperty(n,"toJSON");let r=n[p];r.onclear.forEach(o=>o.call(r)),e(n,r),Reflect.deleteProperty(n,p)}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!g.has(o))return;let c=g.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),g.delete(o))})}};var L="__dde_reactive";m.el=function(t,e){let n=w.mark({type:"reactive"},!1),r=n.end,o=document.createDocumentFragment();o.append(n,r);let{current:c}=b,s=a=>{if(!n.parentNode||!r.parentNode)return R(t,s);b.push(c);let d=e(a);b.pop(),Array.isArray(d)||(d=[d]);let l=n;for(;(l=n.nextSibling)!==r;)l.remove();n.after(...d)};return q(t,s),et(t,s,n,e),s(t()),o};function gt(t,e){let n=(...r)=>r.length?t.setAttribute(e,...r):t.getAttribute(e);return n.attribute=e,n}var z="__dde_attributes";m.observedAttributes=function(t){let e=N(t,gt),n=t[z]={},r={_set(o){this.value=o}};return Object.keys(e).forEach(o=>{let c=e[o]=nt(e[o],e[o](),r);n[c.attribute]=c}),E.attributeChanged(function({detail:c}){/*! This maps attributes to observables (`O.observedAttributes`).
+	* Investigate `__dde_attributes` key of the element.*/let[s,a]=c,d=t[z][s];if(d)return m.action(d,"_set",a)})(t),E.disconnected(function(){/*! This removes all observables mapped to attributes (`O.observedAttributes`).
+	* Investigate `__dde_attributes` key of the element.*/m.clear(...Object.values(t[z]))})(t),e};var tt={isObservable:D,processReactiveAttribute(t,e,n,r){if(!D(n))return n;let o=c=>r(e,c);return q(n,o),et(n,o,t,e),n()}};function et(t,e,...n){let{current:r}=b;r.prevent||r.host(function(o){o[L]||(o[L]=[],E.disconnected(()=>o[L].forEach(([[c,s]])=>R(c,s,c[p]?.host()===o)))(o)),o[L].push([[t,e],...n])})}function X(t,e,n){let r=t?()=>Y(r):(...o)=>o.length?rt(r,...o):Y(r);return nt(r,e,n)}var vt=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),U=class extends Error{constructor(){super();let[e,...n]=this.stack.split(`
+`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4);this.stack=n.find(o=>!o.includes(r))}};function nt(t,e,n){let r=[];B(n)!=="[object Object]"&&(n={});let{onclear:o}=m.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=b;return Reflect.defineProperty(t,p,{value:{value:e,actions:n,onclear:r,host:c,listeners:new Set,defined:new U},enumerable:!1,writable:!1,configurable:!0}),t.toJSON=()=>t(),Object.setPrototypeOf(t[p],vt),t}function mt(){return W[W.length-1]}function Y(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=mt();return r&&n.add(r),g.has(r)&&g.get(r).add(t),e}function rt(t,e,n){if(!t[p])return;let r=t[p];if(!(!n&&r.value===e))return r.value=e,r.listeners.forEach(o=>o(e)),e}function q(t,e){if(t[p])return t[p].listeners.add(e)}function R(t,e,n){let r=t[p];if(!r)return;let o=r.listeners.delete(e);if(n&&!r.listeners.size){if(t.clear(t),!g.has(r))return o;let c=g.get(r);if(!g.has(c))return o;g.get(c).forEach(s=>R(s,c,!0))}return o}T(tt);export{m as O,O as assign,Z as assignAttribute,st as chainableAppend,ut as classListDeclarative,w as createElement,Rt as createElementNS,jt as customElementRender,kt as customElementWithDDE,Wt as dispatchEvent,w as el,Rt as elNS,ft as elementAttribute,Ct as empty,D as isObservable,kt as lifecycleToEvents,m as observable,pt as observedAttributes,E as on,T as registerReactivity,b as scope,wt as simulateSlots};
diff --git a/dist/esm.js b/dist/esm.js
index 882b11e..7e51b15 100644
--- a/dist/esm.js
+++ b/dist/esm.js
@@ -1 +1 @@
-var m={isObservable(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function q(t,e=!0){return e?Object.assign(m,t):(Object.setPrototypeOf(t,m),t)}function y(t){return m.isPrototypeOf(t)&&t!==m?t:m}function v(t){return typeof t>"u"}function w(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var R={setDeleteAttr:F,ssr:""};function F(t,e,n){if(Reflect.set(t,e,n),!!v(n)){if(Reflect.deleteProperty(t,e),t instanceof HTMLElement&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var b=[{scope:document.body,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],g={get current(){return b[b.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...b]},push(t={}){return b.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return b.push(b[0])},pop(){if(b.length!==1)return b.pop()}};function L(...t){return this.appendOriginal(...t),this}function U(t){return t.append===L||(t.appendOriginal=t.append,t.append=L),t}var A;function N(t,e,...n){let c=y(this),o=0,r,s;switch((Object(e)!==e||c.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,g.push({scope:t,host:(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(p=>p(s)),void 0):s}),r=t(e||void 0);let a=r instanceof DocumentFragment;if(r.nodeName==="#comment")break;let d=N.mark({type:"component",name:t.name,host:a?"this":"parentElement"});r.prepend(d),a&&(s=d);break}case t==="#text":r=x.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):r=x.call(this,document.createDocumentFragment(),e);break;case!!A:r=x.call(this,document.createElementNS(A,t),e);break;case!r:r=x.call(this,document.createElement(t),e)}return U(r),s||(s=r),n.forEach(a=>a(s)),o&&g.pop(),o=2,r}function nt(t,e=t,n=void 0){let c=Symbol.for("default"),o=Array.from(e.querySelectorAll("slot")).reduce((s,a)=>Reflect.set(s,a.name||c,a)&&s,{}),r=Reflect.has(o,c);if(t.append=new Proxy(t.append,{apply(s,a,d){if(!d.length)return t;let l=document.createDocumentFragment();for(let p of d){if(!p||!p.slot){r&&l.appendChild(p);continue}let i=p.slot,u=o[i];H(p,"remove","slot"),u&&(z(u,p,n),Reflect.deleteProperty(o,i))}return r&&(o[c].replaceWith(l),Reflect.deleteProperty(o,c)),t.append=s,t}}),t!==e){let s=Array.from(t.childNodes);s.forEach(a=>a.remove()),t.append(...s)}return e}function z(t,e,n){n&&n(t,e);try{t.replaceWith(x(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}N.mark=function(t,e=!1){t=Object.entries(t).map(([o,r])=>o+`="${r}"`).join(" ");let n=e?"":"/",c=document.createComment(`<dde:mark ${t}${R.ssr}${n}>`);return e||(c.end=document.createComment("</dde:mark>")),c};function rt(t){let e=this;return function(...c){A=t;let o=N.call(e,...c);return A=void 0,o}}var{setDeleteAttr:P}=R,C=new WeakMap;function x(t,...e){if(!e.length)return t;C.set(t,T(t,this));for(let[n,c]of Object.entries(Object.assign({},...e)))j.call(this,t,n,c);return C.delete(t),t}function j(t,e,n){let{setRemoveAttr:c,s:o}=T(t,this),r=this;n=o.processReactiveAttribute(t,e,n,(a,d)=>j.call(r,t,a,d));let[s]=e;if(s==="=")return c(e.slice(1),n);if(s===".")return W(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),c(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return c(e,n,"http://www.w3.org/1999/xlink");case"textContent":return P(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return S(o,n,W.bind(null,t[e]));case"ariaset":return S(o,n,(a,d)=>c("aria-"+a,d));case"classList":return B.call(r,t,n)}return I(t,e)?P(t,e,n):c(e,n)}function T(t,e){if(C.has(t))return C.get(t);let c=(t instanceof SVGElement?G:Z).bind(null,t,"Attribute"),o=y(e);return{setRemoveAttr:c,s:o}}function B(t,e){let n=y(this);return S(n,e,(c,o)=>t.classList.toggle(c,o===-1?void 0:!!o)),t}function ot(t){return Array.from(t.children).forEach(e=>e.remove()),t}function H(t,e,n,c){return t instanceof HTMLElement?t[e+"Attribute"](n,c):t[e+"AttributeNS"](null,n,c)}function I(t,e){if(!Reflect.has(t,e))return!1;let n=M(t,e);return!v(n.set)}function M(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||M(t,e)}function S(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,r]){o&&(r=t.processReactiveAttribute(e,o,r,n),n(o,r))})}function $(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function Z(t,e,n,c){return t[(v(c)?"remove":"set")+e](n,$(c))}function G(t,e,n,c,o=null){return t[(v(c)?"remove":"set")+e+"NS"](o,n,$(c))}function W(t,e,n){if(Reflect.set(t,e,n),!!v(n))return Reflect.deleteProperty(t,e)}function ut(t,e,n=t){g.push({scope:t,host:(...o)=>o.length?o.forEach(r=>r(t)):t,custom_element:t});let c=e.call(t,n);return g.pop(),c}function ft(t){for(let n of["connected","disconnected"])k(t.prototype,n+"Callback",function(c,o,r){c.apply(o,r),o.dispatchEvent(new Event("dde:"+n))});let e="attributeChanged";return k(t.prototype,e+"Callback",function(n,c,o){let[r,,s]=o;c.dispatchEvent(new CustomEvent("dde:"+e,{detail:[r,s]})),n.apply(c,o)}),t.prototype.__dde_lifecycleToEvents=!0,t}function k(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function dt(t,e,n){return e||(e={}),function(o,...r){n&&(r.unshift(o),o=typeof n=="function"?n():n);let s=r.length?new CustomEvent(t,Object.assign({detail:r[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function _(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var O=J(),V=new WeakSet;_.connected=function(t,e){let{custom_element:n}=g.current,c="connected";return typeof e!="object"&&(e={}),e.once=!0,function(r){n&&(r=n);let s="dde:"+c;return r.addEventListener(s,t,e),r.__dde_lifecycleToEvents?r:r.isConnected?(r.dispatchEvent(new Event(s)),r):(w(e.signal,()=>O.offConnected(r,t))&&O.onConnected(r,t),r)}};_.disconnected=function(t,e){let{custom_element:n}=g.current,c="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(r){n&&(r=n);let s="dde:"+c;return r.addEventListener(s,t,e),r.__dde_lifecycleToEvents||w(e.signal,()=>O.offDisconnected(r,t))&&O.onDisconnected(r,t),r}};var D=new WeakMap;_.disconnectedAsAbort=function(t){if(D.has(t))return D.get(t);let e=new AbortController;return D.set(t,e),t(_.disconnected(()=>e.abort())),e};_.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(o){let r="dde:"+n;if(o.addEventListener(r,t,e),o.__dde_lifecycleToEvents||V.has(o))return o;let s=new MutationObserver(function(d){for(let{attributeName:l,target:p}of d)p.dispatchEvent(new CustomEvent(r,{detail:[l,p.getAttribute(l)]}))});return w(e.signal,()=>s.disconnect())&&s.observe(o,{attributes:!0}),o}};function J(){let t=new Map,e=!1,n=new MutationObserver(function(i){for(let u of i)if(u.type==="childList"){if(l(u.addedNodes,!0)){s();continue}p(u.removedNodes,!0)&&s()}});return{onConnected(i,u){r();let f=o(i);f.connected.has(u)||(f.connected.add(u),f.length_c+=1)},offConnected(i,u){if(!t.has(i))return;let f=t.get(i);f.connected.has(u)&&(f.connected.delete(u),f.length_c-=1,c(i,f))},onDisconnected(i,u){r();let f=o(i);f.disconnected.has(u)||(f.disconnected.add(u),f.length_d+=1)},offDisconnected(i,u){if(!t.has(i))return;let f=t.get(i);f.disconnected.has(u)&&(f.disconnected.delete(u),f.length_d-=1,c(i,f))}};function c(i,u){u.length_c||u.length_d||(t.delete(i),s())}function o(i){if(t.has(i))return t.get(i);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(i,u),u}function r(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function s(){!e||t.size||(e=!1,n.disconnect())}function a(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function d(i){t.size>30&&await a();let u=[];if(!(i instanceof Node))return u;for(let f of t.keys())f===i||!(f instanceof Node)||i.contains(f)&&u.push(f);return u}function l(i,u){let f=!1;for(let h of i){if(u&&d(h).then(l),!t.has(h))continue;let E=t.get(h);E.length_c&&(h.dispatchEvent(new Event("dde:connected")),E.connected=new WeakSet,E.length_c=0,E.length_d||t.delete(h),f=!0)}return f}function p(i,u){let f=!1;for(let h of i)u&&d(h).then(p),!(!t.has(h)||!t.get(h).length_d)&&(h.dispatchEvent(new Event("dde:disconnected")),t.delete(h),f=!0);return f}}export{x as assign,j as assignAttribute,U as chainableAppend,B as classListDeclarative,N as createElement,rt as createElementNS,ut as customElementRender,ft as customElementWithDDE,dt as dispatchEvent,N as el,rt as elNS,H as elementAttribute,ot as empty,ft as lifecycleToEvents,_ as on,q as registerReactivity,g as scope,nt as simulateSlots};
+var m={isObservable(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function q(t,e=!0){return e?Object.assign(m,t):(Object.setPrototypeOf(t,m),t)}function _(t){return m.isPrototypeOf(t)&&t!==m?t:m}function v(t){return typeof t>"u"}function y(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function L(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(c,r){return Reflect.set(c,F(r),e(t,r)),c},{})}function F(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var R={setDeleteAttr:z,ssr:""};function z(t,e,n){if(Reflect.set(t,e,n),!!v(n)){if(Reflect.deleteProperty(t,e),t instanceof HTMLElement&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var b=[{scope:document.body,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],g={get current(){return b[b.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...b]},push(t={}){return b.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return b.push(b[0])},pop(){if(b.length!==1)return b.pop()}};function P(...t){return this.appendOriginal(...t),this}function B(t){return t.append===P||(t.appendOriginal=t.append,t.append=P),t}var w;function N(t,e,...n){let c=_(this),r=0,o,s;switch((Object(e)!==e||c.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{r=1,g.push({scope:t,host:(...l)=>l.length?(r===1?n.unshift(...l):l.forEach(p=>p(s)),void 0):s}),o=t(e||void 0);let a=o instanceof DocumentFragment;if(o.nodeName==="#comment")break;let d=N.mark({type:"component",name:t.name,host:a?"this":"parentElement"});o.prepend(d),a&&(s=d);break}case t==="#text":o=x.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):o=x.call(this,document.createDocumentFragment(),e);break;case!!w:o=x.call(this,document.createElementNS(w,t),e);break;case!o:o=x.call(this,document.createElement(t),e)}return B(o),s||(s=o),n.forEach(a=>a(s)),r&&g.pop(),r=2,o}function ct(t,e=t,n=void 0){let c=Symbol.for("default"),r=Array.from(e.querySelectorAll("slot")).reduce((s,a)=>Reflect.set(s,a.name||c,a)&&s,{}),o=Reflect.has(r,c);if(t.append=new Proxy(t.append,{apply(s,a,d){if(!d.length)return t;let l=document.createDocumentFragment();for(let p of d){if(!p||!p.slot){o&&l.appendChild(p);continue}let i=p.slot,u=r[i];Z(p,"remove","slot"),u&&(H(u,p,n),Reflect.deleteProperty(r,i))}return o&&(r[c].replaceWith(l),Reflect.deleteProperty(r,c)),t.append=s,t}}),t!==e){let s=Array.from(t.childNodes);s.forEach(a=>a.remove()),t.append(...s)}return e}function H(t,e,n){n&&n(t,e);try{t.replaceWith(x(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}N.mark=function(t,e=!1){t=Object.entries(t).map(([r,o])=>r+`="${o}"`).join(" ");let n=e?"":"/",c=document.createComment(`<dde:mark ${t}${R.ssr}${n}>`);return e||(c.end=document.createComment("</dde:mark>")),c};function st(t){let e=this;return function(...c){w=t;let r=N.call(e,...c);return w=void 0,r}}var{setDeleteAttr:W}=R,C=new WeakMap;function x(t,...e){if(!e.length)return t;C.set(t,M(t,this));for(let[n,c]of Object.entries(Object.assign({},...e)))T.call(this,t,n,c);return C.delete(t),t}function T(t,e,n){let{setRemoveAttr:c,s:r}=M(t,this),o=this;n=r.processReactiveAttribute(t,e,n,(a,d)=>T.call(o,t,a,d));let[s]=e;if(s==="=")return c(e.slice(1),n);if(s===".")return j(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),c(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return c(e,n,"http://www.w3.org/1999/xlink");case"textContent":return W(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return S(r,n,j.bind(null,t[e]));case"ariaset":return S(r,n,(a,d)=>c("aria-"+a,d));case"classList":return I.call(o,t,n)}return G(t,e)?W(t,e,n):c(e,n)}function M(t,e){if(C.has(t))return C.get(t);let c=(t instanceof SVGElement?J:V).bind(null,t,"Attribute"),r=_(e);return{setRemoveAttr:c,s:r}}function I(t,e){let n=_(this);return S(n,e,(c,r)=>t.classList.toggle(c,r===-1?void 0:!!r)),t}function it(t){return Array.from(t.children).forEach(e=>e.remove()),t}function Z(t,e,n,c){return t instanceof HTMLElement?t[e+"Attribute"](n,c):t[e+"AttributeNS"](null,n,c)}function G(t,e){if(!Reflect.has(t,e))return!1;let n=$(t,e);return!v(n.set)}function $(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||$(t,e)}function S(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([r,o]){r&&(o=t.processReactiveAttribute(e,r,o,n),n(r,o))})}function k(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function V(t,e,n,c){return t[(v(c)?"remove":"set")+e](n,k(c))}function J(t,e,n,c,r=null){return t[(v(c)?"remove":"set")+e+"NS"](r,n,k(c))}function j(t,e,n){if(Reflect.set(t,e,n),!!v(n))return Reflect.deleteProperty(t,e)}function dt(t,e,n=K){g.push({scope:t,host:(...r)=>r.length?r.forEach(o=>o(t)):t,custom_element:t}),typeof n=="function"&&(n=n.call(t,t));let c=e.call(t,n);return g.pop(),c}function pt(t){for(let n of["connected","disconnected"])U(t.prototype,n+"Callback",function(c,r,o){c.apply(r,o),r.dispatchEvent(new Event("dde:"+n))});let e="attributeChanged";return U(t.prototype,e+"Callback",function(n,c,r){let[o,,s]=r;c.dispatchEvent(new CustomEvent("dde:"+e,{detail:[o,s]})),n.apply(c,r)}),t.prototype.__dde_lifecycleToEvents=!0,t}function U(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function K(t){return L(t,(e,n)=>e.getAttribute(n))}function bt(t,e,n){return e||(e={}),function(r,...o){n&&(o.unshift(r),r=typeof n=="function"?n():n);let s=o.length?new CustomEvent(t,Object.assign({detail:o[0]},e)):new Event(t,e);return r.dispatchEvent(s)}}function A(t,e,n){return function(r){return r.addEventListener(t,e,n),r}}var O=X(),Q=new WeakSet;A.connected=function(t,e){let{custom_element:n}=g.current,c="connected";return typeof e!="object"&&(e={}),e.once=!0,function(o){n&&(o=n);let s="dde:"+c;return o.addEventListener(s,t,e),o.__dde_lifecycleToEvents?o:o.isConnected?(o.dispatchEvent(new Event(s)),o):(y(e.signal,()=>O.offConnected(o,t))&&O.onConnected(o,t),o)}};A.disconnected=function(t,e){let{custom_element:n}=g.current,c="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(o){n&&(o=n);let s="dde:"+c;return o.addEventListener(s,t,e),o.__dde_lifecycleToEvents||y(e.signal,()=>O.offDisconnected(o,t))&&O.onDisconnected(o,t),o}};var D=new WeakMap;A.disconnectedAsAbort=function(t){if(D.has(t))return D.get(t);let e=new AbortController;return D.set(t,e),t(A.disconnected(()=>e.abort())),e};A.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(r){let o="dde:"+n;if(r.addEventListener(o,t,e),r.__dde_lifecycleToEvents||Q.has(r))return r;let s=new MutationObserver(function(d){for(let{attributeName:l,target:p}of d)p.dispatchEvent(new CustomEvent(o,{detail:[l,p.getAttribute(l)]}))});return y(e.signal,()=>s.disconnect())&&s.observe(r,{attributes:!0}),r}};function X(){let t=new Map,e=!1,n=new MutationObserver(function(i){for(let u of i)if(u.type==="childList"){if(l(u.addedNodes,!0)){s();continue}p(u.removedNodes,!0)&&s()}});return{onConnected(i,u){o();let f=r(i);f.connected.has(u)||(f.connected.add(u),f.length_c+=1)},offConnected(i,u){if(!t.has(i))return;let f=t.get(i);f.connected.has(u)&&(f.connected.delete(u),f.length_c-=1,c(i,f))},onDisconnected(i,u){o();let f=r(i);f.disconnected.has(u)||(f.disconnected.add(u),f.length_d+=1)},offDisconnected(i,u){if(!t.has(i))return;let f=t.get(i);f.disconnected.has(u)&&(f.disconnected.delete(u),f.length_d-=1,c(i,f))}};function c(i,u){u.length_c||u.length_d||(t.delete(i),s())}function r(i){if(t.has(i))return t.get(i);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(i,u),u}function o(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function s(){!e||t.size||(e=!1,n.disconnect())}function a(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function d(i){t.size>30&&await a();let u=[];if(!(i instanceof Node))return u;for(let f of t.keys())f===i||!(f instanceof Node)||i.contains(f)&&u.push(f);return u}function l(i,u){let f=!1;for(let h of i){if(u&&d(h).then(l),!t.has(h))continue;let E=t.get(h);E.length_c&&(h.dispatchEvent(new Event("dde:connected")),E.connected=new WeakSet,E.length_c=0,E.length_d||t.delete(h),f=!0)}return f}function p(i,u){let f=!1;for(let h of i)u&&d(h).then(p),!(!t.has(h)||!t.get(h).length_d)&&(h.dispatchEvent(new Event("dde:disconnected")),t.delete(h),f=!0);return f}}export{x as assign,T as assignAttribute,B as chainableAppend,I as classListDeclarative,N as createElement,st as createElementNS,dt as customElementRender,pt as customElementWithDDE,bt as dispatchEvent,N as el,st as elNS,Z as elementAttribute,it as empty,pt as lifecycleToEvents,K as observedAttributes,A as on,q as registerReactivity,g as scope,ct as simulateSlots};
diff --git a/docs/p04-observables.html b/docs/p04-observables.html
index 85f730a..ae89d3b 100644
--- a/docs/p04-observables.html
+++ b/docs/p04-observables.html
@@ -121,7 +121,7 @@ document.head.append(
 const interval= 5 * 1000;
 setTimeout(clearInterval, 10*interval,
 	setInterval(()=&gt; count(count()+1), interval));
-</code></div><script>Flems(document.getElementById("code-example-1-ehcq40v0h5k"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { O } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst count= O(0);\\n\\nimport { el } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\ndocument.body.append(\\n\\tel(\\\"p\\\", O(()=> \\\"Currently: \\\"+count())),\\n\\tel(\\\"p\\\", { classList: { red: O(()=> count()%2) }, dataset: { count }, textContent: \\\"Attributes example\\\" })\\n);\\ndocument.head.append(\\n\\tel(\\\"style\\\", \\\".red { color: red; }\\\")\\n);\\n\\nconst interval= 5 * 1000;\\nsetTimeout(clearInterval, 10*interval,\\n\\tsetInterval(()=> count(count()+1), interval));\\n\"}],\"toolbar\":false}"));</script><p>To derived attribute based on value of observable variable just use the observable as a&nbsp;value of the attribute (<code>assign(element, { attribute: O('value') })</code>). <code>assign</code>/<code>el</code> provides ways to glue reactive attributes/classes more granularly into the DOM. Just use dedicated build-in attributes <code>dataset</code>, <code>ariaset</code> and <code>classList</code>.</p><p>For computation, you can use the derived observable (see above) like <code>assign(element, { textContent: O(()=&gt; 'Hello '+WorldObservable()) })</code>.</p><p>To represent part of the template filled dynamically based on the observable value use <code>O.el(observable, DOMgenerator)</code>. This was already used in the todo example above or see:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-2-8r8qappf8mo" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { O } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
+</code></div><script>Flems(document.getElementById("code-example-1-ehcq40v0h5k"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { O } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst count= O(0);\\n\\nimport { el } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\ndocument.body.append(\\n\\tel(\\\"p\\\", O(()=> \\\"Currently: \\\"+count())),\\n\\tel(\\\"p\\\", { classList: { red: O(()=> count()%2) }, dataset: { count }, textContent: \\\"Attributes example\\\" })\\n);\\ndocument.head.append(\\n\\tel(\\\"style\\\", \\\".red { color: red; }\\\")\\n);\\n\\nconst interval= 5 * 1000;\\nsetTimeout(clearInterval, 10*interval,\\n\\tsetInterval(()=> count(count()+1), interval));\\n\"}],\"toolbar\":false}"));</script><p>To derived attribute based on value of observable variable just use the observable as a&nbsp;value of the attribute (<code>assign(element, { attribute: O('value') })</code>). <code>assign</code>/<code>el</code> provides ways to glue reactive attributes/classes more granularly into the DOM. Just use dedicated build-in attributes <code>dataset</code>, <code>ariaset</code> and <code>classList</code>.</p><p>For computation, you can use the “derived observable” (see above) like <code>assign(element, { textContent: O(()=&gt; 'Hello '+WorldObservable()) })</code>. This is read-only observable its value is computed based on given function and updated when any observable used in the function changes.</p><p>To represent part of the template filled dynamically based on the observable value use <code>O.el(observable, DOMgenerator)</code>. This was already used in the todo example above or see:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-2-8r8qappf8mo" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { O } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
 const count= O(0, {
 	add(){ this.value= this.value + Math.round(Math.random()*10); }
 });
@@ -147,4 +147,4 @@ setTimeout(clearInterval, 10*interval, setInterval(function(){
 	O.action(count, "add");
 	O.action(numbers, "push", count());
 }, interval));
-</code></div><script>Flems(document.getElementById("code-example-2-8r8qappf8mo"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { O } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst count= O(0, {\\n\\tadd(){ this.value= this.value + Math.round(Math.random()*10); }\\n});\\nconst numbers= O([ count() ], {\\n\\tpush(next){ this.value.push(next); }\\n});\\n\\nimport { el } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\ndocument.body.append(\\n\\tO.el(count, count=> count%2\\n\\t\\t? el(\\\"p\\\", \\\"Last number is odd.\\\")\\n\\t\\t: el()\\n\\t),\\n\\tel(\\\"p\\\", \\\"Lucky numbers:\\\"),\\n\\tel(\\\"ul\\\").append(\\n\\t\\tO.el(numbers, numbers=> numbers.toReversed()\\n\\t\\t\\t.map(n=> el(\\\"li\\\", n)))\\n\\t)\\n);\\n\\nconst interval= 5*1000;\\nsetTimeout(clearInterval, 10*interval, setInterval(function(){\\n\\tO.action(count, \\\"add\\\");\\n\\tO.action(numbers, \\\"push\\\", count());\\n}, interval));\\n\"}],\"toolbar\":false}"));</script><div class="notice"><!--<dde:mark type="component" name="mnemonic" host="parentElement" ssr/>--><h3 id="h-mnemonic"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-mnemonic" tabindex="-1">#</a> Mnemonic</h3><ul><li><code>O(&lt;value&gt;)</code> — observable: reactive value</li><li><code>O(()=&gt; &lt;computation&gt;)</code> — observable: reactive value dependent on calculation using other observables</li><li><code>O.on(&lt;observable&gt;, &lt;listener&gt;[, &lt;options&gt;])</code> — listen to the observable value changes</li><li><code>O.clear(...&lt;observables&gt;)</code> — off and clear observables</li><li><code>O(&lt;value&gt;, &lt;actions&gt;)</code> — observable: pattern to create complex reactive objects/arrays</li><li><code>O.action(&lt;observable&gt;, &lt;action-name&gt;, ...&lt;action-arguments&gt;)</code> — invoke an&nbsp;action for given observable</li><li><code>O.el(&lt;observable&gt;, &lt;function-returning-dom&gt;)</code> — render partial dom structure (template) based on the current observable value</li></ul></div><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><a rel="prev" href="p03-events" title="Using not only events in UI declaratively."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->Events and Addons (previous)</a><a rel="next" href="p05-scopes" title="Organizing UI into components"><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->(next) Scopes and components</a></div></main></body></html>
\ No newline at end of file
+</code></div><script>Flems(document.getElementById("code-example-2-8r8qappf8mo"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { O } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst count= O(0, {\\n\\tadd(){ this.value= this.value + Math.round(Math.random()*10); }\\n});\\nconst numbers= O([ count() ], {\\n\\tpush(next){ this.value.push(next); }\\n});\\n\\nimport { el } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\ndocument.body.append(\\n\\tO.el(count, count=> count%2\\n\\t\\t? el(\\\"p\\\", \\\"Last number is odd.\\\")\\n\\t\\t: el()\\n\\t),\\n\\tel(\\\"p\\\", \\\"Lucky numbers:\\\"),\\n\\tel(\\\"ul\\\").append(\\n\\t\\tO.el(numbers, numbers=> numbers.toReversed()\\n\\t\\t\\t.map(n=> el(\\\"li\\\", n)))\\n\\t)\\n);\\n\\nconst interval= 5*1000;\\nsetTimeout(clearInterval, 10*interval, setInterval(function(){\\n\\tO.action(count, \\\"add\\\");\\n\\tO.action(numbers, \\\"push\\\", count());\\n}, interval));\\n\"}],\"toolbar\":false}"));</script><div class="notice"><!--<dde:mark type="component" name="mnemonic" host="parentElement" ssr/>--><h3 id="h-mnemonic"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-mnemonic" tabindex="-1">#</a> Mnemonic</h3><ul><li><code>O(&lt;value&gt;)</code> — observable: reactive value</li><li><code>O(()=&gt; &lt;computation&gt;)</code> — read-only observable: reactive value dependent on calculation using other observables</li><li><code>O.on(&lt;observable&gt;, &lt;listener&gt;[, &lt;options&gt;])</code> — listen to the observable value changes</li><li><code>O.clear(...&lt;observables&gt;)</code> — off and clear observables</li><li><code>O(&lt;value&gt;, &lt;actions&gt;)</code> — observable: pattern to create complex reactive objects/arrays</li><li><code>O.action(&lt;observable&gt;, &lt;action-name&gt;, ...&lt;action-arguments&gt;)</code> — invoke an&nbsp;action for given observable</li><li><code>O.el(&lt;observable&gt;, &lt;function-returning-dom&gt;)</code> — render partial dom structure (template) based on the current observable value</li></ul></div><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><a rel="prev" href="p03-events" title="Using not only events in UI declaratively."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->Events and Addons (previous)</a><a rel="next" href="p05-scopes" title="Organizing UI into components"><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->(next) Scopes and components</a></div></main></body></html>
\ No newline at end of file
diff --git a/docs_src/components/mnemonic/observables-init.js b/docs_src/components/mnemonic/observables-init.js
index d05b100..2dea569 100644
--- a/docs_src/components/mnemonic/observables-init.js
+++ b/docs_src/components/mnemonic/observables-init.js
@@ -7,7 +7,7 @@ export function mnemonic(){
 			el("code", "O(<value>)"), " — observable: reactive value",
 		),
 		el("li").append(
-			el("code", "O(()=> <computation>)"), " — observable: reactive value dependent on calculation using other observables",
+			el("code", "O(()=> <computation>)"), " — read-only observable: reactive value dependent on calculation using other observables",
 		),
 		el("li").append(
 			el("code", "O.on(<observable>, <listener>[, <options>])"), " — listen to the observable value changes",
diff --git a/docs_src/p04-observables.html.js b/docs_src/p04-observables.html.js
index 90940a6..d6c0753 100644
--- a/docs_src/p04-observables.html.js
+++ b/docs_src/p04-observables.html.js
@@ -88,7 +88,9 @@ export function page({ pkg, info }){
 			el("code", "ariaset"), " and ", el("code", "classList"), "."
 		),
 		el("p").append(
-			"For computation, you can use the derived observable (see above) like ", el("code", "assign(element, { textContent: O(()=> 'Hello '+WorldObservable()) })"), "."
+			"For computation, you can use the “derived observable” (see above) like ", el("code", "assign(element, { textContent: O(()=> 'Hello '+WorldObservable()) })"), ".",
+			" ",
+			"This is read-only observable its value is computed based on given function and updated when any observable used in the function changes."
 		),
 		el("p").append(
 			"To represent part of the template filled dynamically based on the observable value use ", el("code", "O.el(observable, DOMgenerator)"), ".",
diff --git a/examples/components/3rd-party.js b/examples/components/3rd-party.js
index 722ef5f..332ba35 100644
--- a/examples/components/3rd-party.js
+++ b/examples/components/3rd-party.js
@@ -1,4 +1,4 @@
-import { style, el, O } from '../exports.js';
+import { style, el, O, isObservable } from '../exports.js';
 const className= style.host(thirdParty).css`
 	:host {
 		color: green;
@@ -22,12 +22,13 @@ export function thirdParty(){
 	// Array.from((new URL(location)).searchParams.entries())
 	// 	.forEach(([ key, value ])=> O.action(store, "set", key, value));
 	// O.on(store, data=> history.replaceState("", "", "?"+(new URLSearchParams(JSON.parse(JSON.stringify(data)))).toString()));
-	useAdapter(store, store_adapter, {
+	useStore(store_adapter, {
 		onread(data){
 			Array.from(data.entries())
 				.forEach(([ key, value ])=> O.action(store, "set", key, value));
+			return store;
 		}
-	});
+	})();
 	return el("input", {
 		className,
 		value: store().value(),
@@ -36,9 +37,14 @@ export function thirdParty(){
 	});
 }
 
-function useAdapter(observable, adapter, { onread, onbeforewrite }= {}){
-	if(!onread) onread= observable;
+function useStore(adapter_in, { onread, onbeforewrite }= {}){
+	const adapter= typeof adapter_in === "function" ? { read: adapter_in } : adapter_in;
+	if(!onread) onread= O;
 	if(!onbeforewrite) onbeforewrite= data=> JSON.parse(JSON.stringify(data));
-	onread(adapter.read()); //TODO OK as synchronous
-	O.on(observable, data=> adapter.write(onbeforewrite(data)));
+	return function useStoreInner(data_read){
+		const observable= onread(adapter.read(data_read)); //TODO OK as synchronous
+		if(adapter.write && isObservable(observable))
+			O.on(observable, data=> adapter.write(onbeforewrite(data)));
+		return observable;
+	};
 }
diff --git a/examples/components/webComponent.js b/examples/components/webComponent.js
index 00d2b8f..7f334ec 100644
--- a/examples/components/webComponent.js
+++ b/examples/components/webComponent.js
@@ -13,24 +13,29 @@ export class CustomHTMLTestElement extends HTMLElement{
 	connectedCallback(){
 		if(!this.hasAttribute("pre-name")) this.setAttribute("pre-name", "default");
 		this.attachShadow({ mode: "open" }).append(
-			customElementRender(this, this.render)
+			customElementRender(this, this.render, this.attributes)
 		);
 	}
 
-	render({ test }){
+	attributes(element){
+		const observed= O.observedAttributes(element);
+		return Object.assign({ test: element.test }, observed);
+	}
+	render({ name, preName, test }){
 		console.log(scope.state);
 		scope.host(
 			on.connected(()=> console.log(CustomHTMLTestElement)),
 			on.attributeChanged(e=> console.log(e)),
 			on.disconnected(()=> console.log(CustomHTMLTestElement))
 		);
-		const name= O.attribute("name");
-		const preName= O.attribute("pre-name");
-		
-		console.log({ name, test, preName});
+		const text= text=> el().append(
+			el("#text", text),
+			" | "
+		);
 		return el("p").append(
-			el("#text", name),
-			el("#text", preName),
+			text(test),
+			text(name),
+			text(preName),
 			el("button", { type: "button", textContent: "pre-name", onclick: ()=> preName("Ahoj") })
 		);
 	}
diff --git a/package.json b/package.json
index 0f285ee..13a1bd1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "deka-dom-el",
-	"version": "0.7.5",
+	"version": "0.7.6",
 	"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",
@@ -46,6 +46,7 @@
 		"browser": true,
 		"undef": "true",
 		"latedef": "true",
+		"-W014": true,
 		"maxparams": 5,
 		"maxdepth": 3,
 		"maxcomplexity": 14,
@@ -58,7 +59,7 @@
 	"size-limit": [
 		{
 			"path": "./index.js",
-			"limit": "9.75 kB",
+			"limit": "9.85 kB",
 			"gzip": false,
 			"brotli": false
 
diff --git a/src/customElement.js b/src/customElement.js
index e0c117b..a769f85 100644
--- a/src/customElement.js
+++ b/src/customElement.js
@@ -1,10 +1,11 @@
 import { scope } from "./dom.js";
-export function customElementRender(custom_element, render, props= custom_element){
+export function customElementRender(custom_element, render, props= observedAttributes){
 	scope.push({
 		scope: custom_element,
 		host: (...c)=> c.length ? c.forEach(c=> c(custom_element)) : custom_element,
 		custom_element
 	});
+	if(typeof props==="function") props= props.call(custom_element, custom_element);
 	const out= render.call(custom_element, props);
 	scope.pop();
 	return out;
@@ -31,3 +32,8 @@ export { lifecycleToEvents as customElementWithDDE };
 function wrapMethod(obj, method, apply){
 	obj[method]= new Proxy(obj[method] || (()=> {}), { apply });
 }
+
+import { observedAttributes as oA } from "./helpers.js";
+export function observedAttributes(instance){
+	return oA(instance, (i, n)=> i.getAttribute(n));
+}
diff --git a/src/events.js b/src/events.js
index 6f743e4..537bf65 100644
--- a/src/events.js
+++ b/src/events.js
@@ -84,6 +84,7 @@ on.attributeChanged= function(listener, options){
 		});
 		const c= onAbort(options.signal, ()=> observer.disconnect());
 		if(c) observer.observe(element, { attributes: true });
+		//TODO: clean up when element disconnected
 		return element;
 	};
 };
diff --git a/src/helpers.js b/src/helpers.js
index 80c2ee2..44cf4bb 100644
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -15,3 +15,12 @@ export function onAbort(signal, listener){
 		signal.removeEventListener("abort", listener);
 	};
 }
+export function observedAttributes(instance, observedAttribute){
+	const { observedAttributes= [] }= instance.constructor;
+	return observedAttributes
+		.reduce(function(out, name){
+			Reflect.set(out, kebabToCamel(name), observedAttribute(instance, name));
+			return out;
+		}, {});
+}
+function kebabToCamel(name){ return name.replace(/-./g, x=> x[1].toUpperCase()); }
diff --git a/src/observables-lib.js b/src/observables-lib.js
index 53ddc0f..ae40c49 100644
--- a/src/observables-lib.js
+++ b/src/observables-lib.js
@@ -9,7 +9,7 @@ const stack_watch= [];
 /**
  * ### `WeakMap<function, Set<ddeObservable<any, any>>>`
  * The `Set` is in the form of `[ source, ...depended observables (DSs) ]`.
- * When the DS is cleaned (`S.clear`) it is removed from DSs,
+ * When the DS is cleaned (`O.clear`) it is removed from DSs,
  * if remains only one (`source`) it is cleared too.
  * ### `WeakMap<object, function>`
  * This is used for revesed deps, the `function` is also key for `deps`.
@@ -18,16 +18,16 @@ const stack_watch= [];
 const deps= new WeakMap();
 export function observable(value, actions){
 	if(typeof value!=="function")
-		return create(value, actions);
+		return create(false, value, actions);
 	if(isObservable(value)) return value;
 	
-	const out= create();
+	const out= create(true);
 	const contextReWatch= function(){
 		const [ origin, ...deps_old ]= deps.get(contextReWatch);
 		deps.set(contextReWatch, new Set([ origin ]));
 
 		stack_watch.push(contextReWatch);
-		out(value());
+		write(out, value());
 		stack_watch.pop();
 
 		if(!deps_old.length) return;
@@ -113,41 +113,38 @@ observable.el= function(o, map){
 	return out;
 };
 import { on } from "./events.js";
+import { observedAttributes } from "./helpers.js";
+function observedAttribute(instance, name){
+	const out= (...args)=> !args.length
+		? instance.getAttribute(name)
+		: instance.setAttribute(name, ...args);
+	out.attribute= name;
+	return out;
+}
 const key_attributes= "__dde_attributes";
-observable.attribute= function(name, initial= null){
-	//TODO host=element & reuse existing
-	const out= observable(initial);
-	let element;
-	scope.host(el=> {
-		element= el;
-		if(elementAttribute(element, "has", name)) out(elementAttribute(element, "get", name));
-		else if(initial!==null) elementAttribute(element, "set", name, initial);
-		
-		if(el[key_attributes]){
-			el[key_attributes][name]= out;
-			return;
-		}
-		element[key_attributes]= { [name]: out };
-		on.attributeChanged(function attributeChangeToObservable({ detail }){
-			/*! This maps attributes to observables (`S.attribute`).
-			 * Investigate `__dde_attributes` key of the element.*/
-			const [ name, value ]= detail;
-			const curr= element[key_attributes][name];
-			if(curr) return curr(value);
-		})(element);
-		on.disconnected(function(){
-			/*! This removes all observables mapped to attributes (`S.attribute`).
-			 * Investigate `__dde_attributes` key of the element.*/
-			observable.clear(...Object.values(element[key_attributes]));
-		})(element);
-	});
-	return new Proxy(out, {
-		apply(target, _, args){
-			if(!args.length) return target();
-			const value= args[0];
-			return elementAttribute(element, "set", name, value);
-		}
+observable.observedAttributes= function(element){
+	const attrs= observedAttributes(element, observedAttribute);
+	const store= element[key_attributes]= {};
+	const actions= {
+		_set(value){ this.value= value; },
+	};
+	Object.keys(attrs).forEach(name=> {
+		const attr= attrs[name]= toObservable(attrs[name], attrs[name](), actions);
+		store[attr.attribute]= attr;
 	});
+	on.attributeChanged(function attributeChangeToObservable({ detail }){
+		/*! This maps attributes to observables (`O.observedAttributes`).
+			* Investigate `__dde_attributes` key of the element.*/
+		const [ name, value ]= detail;
+		const curr= element[key_attributes][name];
+		if(curr) return observable.action(curr, "_set", value);
+	})(element);
+	on.disconnected(function(){
+		/*! This removes all observables mapped to attributes (`O.observedAttributes`).
+			* Investigate `__dde_attributes` key of the element.*/
+		observable.clear(...Object.values(element[key_attributes]));
+	})(element);
+	return attrs;
 };
 
 import { typeOf } from './helpers.js';
@@ -169,7 +166,7 @@ function removeObservablesFromElements(o, listener, ...notes){
 			element[key_reactive]= [];
 			on.disconnected(()=>
 				/*!
-				 * Clears all Observables listeners added in the current scope/host (`S.el`, `assign`, …?).
+				 * Clears all Observables listeners added in the current scope/host (`O.el`, `assign`, …?).
 				 * You can investigate the `__dde_reactive` key of the element.
 				 * */
 				element[key_reactive].forEach(([ [ o, listener ] ])=>
@@ -180,9 +177,10 @@ function removeObservablesFromElements(o, listener, ...notes){
 	});
 }
 
-function create(value, actions){
-	const o=  (...value)=>
-		value.length ? write(o, ...value) : read(o);
+function create(is_readonly, value, actions){
+	const o= is_readonly
+		? ()=> read(o)
+		: (...value)=> value.length ? write(o, ...value) : read(o);
 	return toObservable(o, value, actions);
 }
 const protoSigal= Object.assign(Object.create(null), {