diff --git a/src/custom-element.js b/src/custom-element.js
index ece2a69..0176b52 100644
--- a/src/custom-element.js
+++ b/src/custom-element.js
@@ -1,27 +1,36 @@
-const XML_DECLARATION = '<?xml version="1.0" encoding="UTF-8"?>'
-,          XSL_NS_URL = 'http://www.w3.org/1999/XSL/Transform'
-,          DCE_NS_URL ="urn:schemas-epa-wg:dce";
+const XSL_NS_URL  = 'http://www.w3.org/1999/XSL/Transform'
+,     HTML_NS_URL = 'http://www.w3.org/1999/xhtml'
+,     EXSL_NS_URL = 'http://exslt.org/common'
+,     DCE_NS_URL  ="urn:schemas-epa-wg:dce";
 
 // const log = x => console.debug( new XMLSerializer().serializeToString( x ) );
 
-const attr = (el, attr)=> el.getAttribute(attr)
+const attr = (el, attr)=> el.getAttribute?.(attr)
+,   isText = e => e.nodeType === 3
 ,   create = ( tag, t = '' ) => ( e => ((e.innerText = t||''),e) )(document.createElement( tag ))
-,   createNS = ( ns, tag, t = '' ) => ( e => ((e.innerText = t||''),e) )(document.createElementNS( ns, tag ));
+,   createText = ( d, t) => (d.ownerDocument || d ).createTextNode( t )
+,   createNS = ( ns, tag, t = '' ) => ( e => ((e.innerText = t||''),e) )(document.createElementNS( ns, tag ))
+,   xslNs = x => ( x?.setAttribute('xmlns:xsl', XSL_NS_URL ), x )
+,   xslHtmlNs = x => ( x?.setAttribute('xmlns:xhtml', HTML_NS_URL ), xslNs(x) );
 
+    function
+ASSERT(x)
+{   if(!x)
+        debugger
+}
     function
 xml2dom( xmlString )
 {
-    return new DOMParser().parseFromString( XML_DECLARATION + xmlString, "application/xml" )
+    return new DOMParser().parseFromString( xmlString, "application/xml" )
 }
     function
 xmlString(doc){ return new XMLSerializer().serializeToString( doc ) }
 
     function
 injectData( root, sectionName, arr, cb )
-{
+{   const create = ( tag ) => root.ownerDocument.createElement( tag );
     const inject = ( tag, parent, s ) =>
-    {
-        parent.append( s = createNS( DCE_NS_URL, tag ) );
+    {   parent.append( s = create( tag ) );
         return s;
     };
     const l = inject( sectionName, root );
@@ -71,70 +80,133 @@ Json2Xml( o, tag )
         ret.push("/>");
     return ret.join('\n');
 }
+    export function
+tagUid( node )
+{   // {} to xsl:value-of
+    forEach$(node,'*',d => [...d.childNodes].filter( e=>e.nodeType === 3 ).forEach( e=>
+    {   if( e.parentNode.localName === 'style' )
+            return;
+        const m = e.data.matchAll( /{([^}]*)}/g );
+        if(m)
+        {   let l = 0
+            , txt = t => createText(e,t||'')
+            ,  tt = [];
+            [...m].forEach(t=>
+            {   if( t.index > l )
+                    tt.push( txt( t.input.substring( l, t.index ) ))
+                const v = e.ownerDocument.createElement('xsl:value-of');
+                v.setAttribute('select', t[1] );
+                tt.push(v);
+                l = t.index+t[0].length;
+            })
+            if( l < e.data.length)
+                tt.push( txt( e.data.substring(l,e.data.length) ));
+            if( tt.length )
+            {   for( let t of tt )
+                    d.insertBefore(t,e);
+                d.removeChild(e);
+            }
+        }
+    }));
 
+    if( 'all' in node ) {
+        let i= 1;
+        for( let e of node.all )
+            e.setAttribute && !e.tagName.startsWith('xsl:') && e.setAttribute('data-dce-id', '' + i++)
+    }
+    return node
+}
     export function
 createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
 {
     if( templateNode.tagName === S || templateNode.documentElement?.tagName === S )
-        return templateNode
-    const dom = xml2dom(
-`<xsl:stylesheet version="1.0"
-    xmlns:xsl="${ XSL_NS_URL }"
+        return tagUid(templateNode)
+    const sanitizeXsl = xml2dom(`<xsl:stylesheet version="1.0" xmlns:xsl="${ XSL_NS_URL }" xmlns:xhtml="${ HTML_NS_URL }" xmlns:exsl="${EXSL_NS_URL}" exclude-result-prefixes="exsl" >   
+        <xsl:output method="xml" />
+        <xsl:template match="/"><dce-root><xsl:apply-templates select="*"/></dce-root></xsl:template>
+        <xsl:template match="*[name()='template']"><xsl:apply-templates mode="sanitize" select="*|text()"/></xsl:template>
+        <xsl:template match="*"><xsl:apply-templates mode="sanitize" select="*|text()"/></xsl:template>
+        <xsl:template match="*[name()='svg']|*[name()='math']"><xsl:apply-templates mode="sanitize" select="."/></xsl:template>
+        <xsl:template mode="sanitize" match="*[count(text())=1 and count(*)=0]"><xsl:copy><xsl:apply-templates mode="sanitize" select="@*"/><xsl:value-of select="text()"/></xsl:copy></xsl:template>
+        <xsl:template mode="sanitize" match="xhtml:*[count(text())=1 and count(*)=0]"><xsl:element name="{local-name()}"><xsl:apply-templates mode="sanitize" select="@*"/><xsl:value-of select="text()"/></xsl:element></xsl:template>
+        <xsl:template mode="sanitize" match="*|@*"><xsl:copy><xsl:apply-templates mode="sanitize" select="*|@*|text()"/></xsl:copy></xsl:template>
+        <xsl:template mode="sanitize" match="text()[normalize-space(.) = '']"/>
+        <xsl:template mode="sanitize" match="text()"><dce-text><xsl:copy/></dce-text></xsl:template>
+        <xsl:template mode="sanitize" match="xsl:value-of|*[name()='slot']"><dce-text><xsl:copy><xsl:apply-templates mode="sanitize" select="*|@*|text()"/></xsl:copy></dce-text></xsl:template>
+        <xsl:template mode="sanitize" match="xhtml:*"><xsl:element name="{local-name()}"><xsl:apply-templates mode="sanitize" select="*|@*|text()"/></xsl:element></xsl:template>
+    </xsl:stylesheet>`)
+    const sanitizeProcessor = new XSLTProcessor()
+    ,   tc = (n =>
+        {
+            forEach$(n,'script', s=> s.remove() );
+            const e = n.firstElementChild?.content || n.content
+            , asXmlNode = r => xslHtmlNs(xml2dom( '<xhtml/>' ).importNode(r, true));
+            if( e )
+            {   const t = create('div');
+                [ ...e.childNodes ].map( c => t.append(c.cloneNode(true)) )
+                return asXmlNode(t)
+            }
+            return  asXmlNode(n.documentElement || n.body || n)
+        })(templateNode)
+    ,   xslDom = xml2dom(
+        `<xsl:stylesheet version="1.0"
+        xmlns:xsl="${ XSL_NS_URL }"
+        xmlns:dce="urn:schemas-epa-wg:dce"
+        xmlns:exsl="http://exslt.org/common"
+        exclude-result-prefixes="exsl"
     >
-    <xsl:output method="html" />
-
+    <xsl:template mode="payload"  match="attributes"></xsl:template>
     <xsl:template match="/">
-        <xsl:for-each select="//attributes">
-            <xsl:call-template name="attributes"/>\t
-        </xsl:for-each>
+        <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
     </xsl:template>
     <xsl:template name="slot" >
         <xsl:param name="slotname" />
         <xsl:param name="defaultvalue" />
         <xsl:choose>
             <xsl:when test="//payload/*[@slot=$slotname]">
-                <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
+               <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
             </xsl:when>
             <xsl:otherwise>
                 <xsl:copy-of select="$defaultvalue"/>
             </xsl:otherwise>
         </xsl:choose>
     </xsl:template>
-    <xsl:template name="attributes"></xsl:template>
-    <xsl:variable name="slottemplate">
+    <xsl:variable name="js-injected-body">
         <xsl:call-template name="slot" >
             <xsl:with-param name="slotname" select="''"/>
             <xsl:with-param name="defaultvalue"/>
         </xsl:call-template>
     </xsl:variable>
 </xsl:stylesheet>`
-    );
+        );
 
-    const attrsTemplate = dom.documentElement.lastElementChild.previousElementSibling
-    , getTemplateRoot = n => n.documentElement || n.firstElementChild?.content || n.content || n.body || n
-    , tc = getTemplateRoot(templateNode)
-    , cc = tc?.childNodes || [];
-    if( (tc instanceof CustomElement) || tc.nodeType===11) {
-        for( let c of cc )
-            attrsTemplate.append(dom.importNode(c,true))
-    }else
-    {
-        attrsTemplate.append(dom.importNode(tc,true))
-    }
+    sanitizeProcessor.importStylesheet( sanitizeXsl );
+
+    const fr = sanitizeProcessor.transformToFragment(tc, document)
+    ,   $ = (e,css) => e.querySelector(css)
+    ,   payload = $( xslDom, 'template[mode="payload"]');
+    if( !fr )
+        return console.error("transformation error",{ xml:tc.outerHTML, xsl: xmlString( sanitizeXsl ) });
+
+    for( const c of fr.childNodes )
+        payload.append(xslDom.importNode(c,true))
+
+    const embeddedTemplates = [...payload.querySelectorAll('template')];
+    embeddedTemplates.forEach(t=>payload.ownerDocument.documentElement.append(t));
 
-    const slot2xsl = s =>
-    {   const v = dom.firstElementChild.lastElementChild.lastElementChild.cloneNode(true);
-        v.firstElementChild.setAttribute('select',`'${s.name}'`)
+    const   slotCall = $(xslDom,'call-template[name="slot"]')
+    ,       slot2xsl = s =>
+    {   const v = slotCall.cloneNode(true)
+        ,  name = attr(s,'name') || '';
+        name && v.firstElementChild.setAttribute('select',`'${ name }'`)
         for( let c of s.childNodes)
             v.lastElementChild.append(c)
         return v
     }
 
-    for( const s of attrsTemplate.querySelectorAll('slot') )
-        s.parentNode.replaceChild( slot2xsl(s), s )
+    forEach$( payload,'slot', s => s.parentNode.replaceChild( slot2xsl(s), s ) )
 
-    // apply bodyXml changes
-    return dom
+    return tagUid(xslDom)
 }
     export async function
 xhrTemplate(src)
@@ -175,9 +247,9 @@ deepEqual(a, b, O=false)
 injectSlice( x, s, data )
 {
     const isString = typeof data === 'string' ;
-
+    const createXmlNode = ( tag, t = '' ) => ( e => ((e.append( createText(x, t||''))),e) )(x.ownerDocument.createElement( tag ))
     const el = isString
-        ? create(s, data)
+        ? createXmlNode(s, data)
         : document.adoptNode( xml2dom( Json2Xml( data, s ) ).documentElement);
     [...x.children].filter( e=>e.localName === s ).map( el=>el.remove() );
     el.data = data
@@ -186,8 +258,7 @@ injectSlice( x, s, data )
 
 function forEach$( el, css, cb){
     if( el.querySelectorAll )
-        for( let n of el.querySelectorAll(css) )
-            cb(n)
+        [...el.querySelectorAll(css)].forEach(cb)
 }
 const getByHashId = ( n, id )=> ( p => n===p? null: (p && ( p.querySelector(id) || getByHashId(p,id) ) ))( n.getRootNode() )
 const loadTemplateRoots = async ( src, dce )=>
@@ -216,6 +287,64 @@ const loadTemplateRoots = async ( src, dce )=>
         return [dom]
     }catch (error){ return [dce]}
 }
+export function mergeAttr( from, to )
+{   if( isText(from) )
+    {
+        if( !isText(to) ){ debugger }
+        return
+    }
+    for( let a of from.attributes)
+        a.namespaceURI? to.setAttributeNS( a.namespaceURI, a.name, a.value ) : to.setAttribute( a.name, a.value )
+}
+export function assureUnique(n, id=0)
+{
+    const m = {}
+    for( const e of n.childNodes )
+    {
+        const a = attr(e,'data-dce-id') || e.dceId || 0;
+        if( !m[a] )
+        {   if( !a )
+            {   m[a] = e.dceId = ++id;
+                if( e.setAttribute )
+                    e.setAttribute('data-dce-id', e.dceId )
+            }else
+                m[a] = 1;
+        }else
+        {   const v = e.dceId = a + '-' + m[a]++;
+            if( e.setAttribute )
+                e.setAttribute('data-dce-id', v )
+        }
+        e.childNodes.length && assureUnique(e)
+    }
+}
+export function merge( parent, fromArr )
+{
+    const id2old = {};
+    for( let c of parent.childNodes)
+    {   ASSERT( !id2old[c.dceId] );
+        if( isText(c) )
+        {   ASSERT( c.data.trim() );
+            id2old[c.dceId || 0] = c;
+        } else
+            id2old[attr(c, 'data-dce-id') || 0] = c;
+    }
+    for( let e of [...fromArr] )
+    {
+        const o = id2old[ attr(e, 'data-dce-id') || e.dceId ];
+        if( o )
+        {   if( isText(e) )
+            {   if( o.nodeValue !== e.nodeValue )
+                    o.nodeValue = e.nodeValue;
+            }else
+            {   mergeAttr(o,e)
+                if( o.childNodes.length || e.childNodes.length )
+                    merge(o, e.childNodes)
+            }
+        }else
+            parent.append( e )
+    }
+}
+
     export class
 CustomElement extends HTMLElement
 {
@@ -225,7 +354,7 @@ CustomElement extends HTMLElement
         , templateDocs = templateRoots.map( n => createXsltFromDom( n ) )
         , xp = templateDocs.map( (td, p) =>{ p = new XSLTProcessor(); p.importStylesheet( td ); return p })
 
-        Object.defineProperty( this, "xsltString", { get: ()=>xp.map( td => xmlString(td) ).join('\n') });
+        Object.defineProperty( this, "xsltString", { get: ()=>templateDocs.map( td => xmlString(td) ).join('\n') });
 
         const tag = attr( this, 'tag' );
         const dce = this;
@@ -233,13 +362,18 @@ CustomElement extends HTMLElement
         class DceElement extends HTMLElement
         {
             connectedCallback()
-            {   const x = createNS( DCE_NS_URL,'datadom' );
+            {   const x = xml2dom( '<datadom/>' ).documentElement;
+                const createXmlNode = ( tag, t = '' ) => ( e =>
+                {   if( t )
+                        e.append( createText( x, t ))
+                    return e;
+                })(x.ownerDocument.createElement( tag ))
                 injectData( x, 'payload'    , this.childNodes, assureSlot );
-                injectData( x, 'attributes' , this.attributes, e => create( e.nodeName, e.value ) );
-                injectData( x, 'dataset', Object.keys( this.dataset ), k => create( k, this.dataset[ k ] ) );
-                const sliceRoot = injectData( x, 'slice', sliceNames, k => create( k, '' ) );
+                this.innerHTML='';
+                injectData( x, 'attributes' , this.attributes, e => createXmlNode( e.nodeName, e.value ) );
+                injectData( x, 'dataset', Object.keys( this.dataset ), k => createXmlNode( k, this.dataset[ k ] ) );
+                const sliceRoot = injectData( x, 'slice', sliceNames, k => createXmlNode( k, '' ) );
                 this.xml = x;
-                const slices = {};
 
                 const sliceEvents=[];
                 const applySlices = ()=>
@@ -249,7 +383,7 @@ CustomElement extends HTMLElement
                     {   const s = attr( ev.target, 'slice');
                         if( processed[s] )
                             continue;
-                        injectSlice( sliceRoot, s, ev.detail );
+                        injectSlice( sliceRoot, s, 'object' === typeof ev.detail ? {...ev.detail}: ev.detail );
                         processed[s] = ev;
                     }
                     Object.keys(processed).length !== 0 && transform();
@@ -271,17 +405,28 @@ CustomElement extends HTMLElement
                 };
                 const transform = ()=>
                 {
-                    const ff = xp.map( p => p.transformToFragment(x, document) );
-                    this.innerHTML = '';
+                    const ff = xp.map( (p,i) =>
+                    {   const f = p.transformToFragment(x, document)
+                        if( !f )
+                            console.error( "XSLT transformation error. xsl:\n", xmlString(templateDocs[i]), '\nxml:\n', xmlString(x) );
+                        return f
+                    });
                     ff.map( f =>
-                    {   [ ...f.childNodes ].forEach( e => this.append( e ) );
+                    {   if( !f )
+                            return;
+                        assureUnique(f)
+                        merge( this, f.childNodes )
+                    })
+                    const changeCb = el=>this.onSlice({ detail: el[attr(el,'slice-prop') || 'value'], target: el })
+                    , hasInitValue = el => el.hasAttribute('slice-prop') || el.hasAttribute('value') || el.value;
 
-                        forEach$( this,'[slice]', el =>
-                        {   if( 'function' === typeof el.sliceInit )
-                            {   const s = attr( el,'slice' );
-                                slices[s] = el.sliceInit( slices[s] );
-                            }
-                        })
+                    forEach$( this,'[slice]', el =>
+                    {   if( !el.dceInitialized )
+                        {   el.dceInitialized = 1;
+                            el.addEventListener( attr(el,'slice-update')|| 'change', ()=>changeCb(el) )
+                            if( hasInitValue(el) )
+                                changeCb(el)
+                        }
                     })
                 };
                 transform();
diff --git a/src/demo/http-request.html b/src/demo/http-request.html
index 9f62d93..c1396ea 100644
--- a/src/demo/http-request.html
+++ b/src/demo/http-request.html
@@ -35,7 +35,7 @@
                    description="load the list of pokemons">
     <p>Should display 6 image buttons with pokemon name </p>
     <template>
-<custom-element tag="dce-1" hidden>
+<custom-element>
     <template><!-- wrapping into template to prevent images loading within DCE declaration -->
         <http-request
             url="https://pokeapi.co/api/v2/pokemon?limit=6&offset=0"
@@ -43,80 +43,67 @@
             method="GET"
             header-accept="application/json"
             ></http-request>
+        <xsl:variable name="slides-url"
+            >https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world</xsl:variable>
         <xsl:for-each select="//slice/page/data/results/*">
-            <xsl:variable name="slides-url"
-                >https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world</xsl:variable>
             <xsl:variable name="pokeid"
                 select="substring-before( substring-after( @url, 'https://pokeapi.co/api/v2/pokemon/'),'/')"
                 ></xsl:variable>
             <button>
                 <img src="{$slides-url}/{$pokeid}.svg"
                      alt="{@name}"/>
-                <xsl:value-of select='@name'/>
+                {@name}
             </button>
         </xsl:for-each>
     </template>
 </custom-element>
-<dce-1></dce-1>
     </template>
 </html-demo-element>
 
-<html-demo-element legend="1. http-request headers"
+<html-demo-element legend="2. http-request response and headers"
                    description="request and response headers access demo">
 
     <template>
-            <custom-element
-                tag="headers-demo"
-                hidden
-                >
-<http-request
-    url="https://pokeapi.co/api/v2/pokemon?offset=6&limit=6"
-    slice="request_slice"
-    type="text"
-    mode="cors"
-    header-x-test="testing"
-    ></http-request>
-Content of <code>//slice/request_slice</code> is filled by <b>request</b> and <b>response</b>
-from <code>${url}</code>
+        <custom-element url="https://pokeapi.co/api/v2/pokemon?offset=6&limit=6">
+            <template> <!-- IMPORTANT! to wrap DCE payload into template to avoid
+                               http-request initializing out of instance -->
+                <http-request
+                        url="{url}"
+                        slice="request_slice"
+                        type="text"
+                        mode="cors"
+                        header-x-test="testing"
+                ></http-request>
+                Content of <code>//slice/request_slice</code> is filled by <b>request</b> and <b>response</b>
+                from <code>${url}</code>
 
-<h3>Samples</h3>
-<table>
-<tr><th>//slice/request_slice/request/headers/@mode</th>
-    <td><xsl:value-of select="//slice/request_slice/request/@mode"/></td></tr>
-<tr><th>//slice/request_slice/response/headers/@content-type</th>
-    <td><xsl:value-of select="//slice/request_slice/response/headers/@content-type"/></td></tr>
-<tr><th>//slice/request_slice/response/@status</th>
-    <td><xsl:value-of select="//slice/request_slice/response/@status"/></td></tr>
-</table>
-<xsl:for-each select="//slice/request_slice/*">
-    <ul data-request-section="{name(.)}">
-        <b data-testid="request-section"><xsl:value-of select='name(.)'/></b>
-        <xsl:for-each select="@*">
-            <div>
-                <var data-testid="section-attribute">@<xsl:value-of select='local-name(.)'/></var>
-                =
-                <code><xsl:value-of select='.'/></code>
-            </div>
-        </xsl:for-each>
-        <xsl:for-each select="*">
-            <div>
-                <b data-testid="section-deep"><xsl:value-of select='local-name(.)'/></b>
-                <ul>
-                    <xsl:for-each select="@*">
-                        <li>
-                            <var data-testid="section-attribute">@<xsl:value-of select='local-name(.)'/></var>
-                            =
-                            <code><xsl:value-of select='.'/></code>
-                        </li>
-                    </xsl:for-each>
-                    <code><xsl:value-of select='.'/></code>
-                </ul>
-            </div>
-        </xsl:for-each>
-    </ul>
-</xsl:for-each>
-            </custom-element>
-            <headers-demo></headers-demo>
+                <h3>Samples</h3>
+                <table>
+                    <tr><th>  //slice/request_slice/request/@mode  </th>
+                        <td>{ //slice/request_slice/request/@mode }</td></tr>
+                    <tr><th>  //slice/request_slice/response/headers/@content-type  </th>
+                        <td>{ //slice/request_slice/response/headers/@content-type }</td></tr>
+                    <tr><th>  //slice/request_slice/response/@status  </th>
+                        <td>{ //slice/request_slice/response/@status }</td></tr>
+                </table>
+                <xsl:apply-templates mode="display" select="//slice/request_slice/*"></xsl:apply-templates>
+                <xsl:template mode="display" match="*">
+                    <fieldset>
+                        <legend> {local-name(.)} </legend>
+                        <ul>
+                            <xsl:for-each select="@*">
+                                <li>
+                                    <var data-testid="section-attribute">@{local-name(.)}</var>
+                                    =
+                                    <code><xsl:value-of select='.'/></code>
+                                </li>
+                            </xsl:for-each>
+                        </ul>
+                        <xsl:apply-templates mode="display" select="*"></xsl:apply-templates>
+                    </fieldset>
+                </xsl:template>
+            </template>
+        </custom-element>
     </template>
 </html-demo-element>
 
diff --git a/src/demo/local-storage.html b/src/demo/local-storage.html
index 00e78c7..5d6d9f1 100644
--- a/src/demo/local-storage.html
+++ b/src/demo/local-storage.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:html="http://www.w3.org/1999/xhtml">
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>custom-element Declarative Custom Element implementation demo</title>
@@ -41,21 +41,25 @@
     <p>Click the fruits button to add into cart </p>
     <template>
         <custom-element tag="dce-2" hidden>
-            <local-storage key="basket" slice="basket" live type="json"></local-storage>
-            <html:table>
-                <xsl:for-each select="//slice/basket/@*">
-                    <html:tr>
-                        <html:th><xsl:value-of select="name()"/></html:th>
-                        <html:td><xsl:value-of select="."/></html:td>
-                    </html:tr>
-                </xsl:for-each>
-                <html:tfoot>
-                    <html:tr>
-                        <html:td><slot>🤔</slot></html:td>
-                        <html:th><xsl:value-of select="sum(//slice/basket/@*)"/></html:th>
-                    </html:tr>
-                </html:tfoot>
-            </html:table>
+            <template>
+                <local-storage key="basket" slice="basket" live type="json"></local-storage>
+                <xhtml:table xmlns:xhtml="http://www.w3.org/1999/xhtml"  >
+                    <xhtml:tbody>
+                        <xsl:for-each select="//basket/@*">
+                            <xhtml:tr>
+                                <xhtml:th><xsl:value-of select="name()"/></xhtml:th>
+                                <xhtml:td><xsl:value-of select="."/></xhtml:td>
+                            </xhtml:tr>
+                        </xsl:for-each>
+                    </xhtml:tbody>
+                    <xhtml:tfoot>
+                        <xhtml:tr>
+                            <xhtml:td><slot>🤔</slot></xhtml:td>
+                            <xhtml:th><xsl:value-of select="sum(//slice/basket/@*)"/></xhtml:th>
+                        </xhtml:tr>
+                    </xhtml:tfoot>
+                </xhtml:table>
+            </template>
         </custom-element>
         <dce-2>🛒total</dce-2>
     </template>
@@ -90,6 +94,7 @@
             basket[k] || (basket[k] = 1);
             localStorage.setItem( k, basket[k] = 1+1*localStorage[k] )
             localStorage.setItem( 'basket', JSON.stringify(basket) );
+            renderStorage();
         } );
 
     const renderStorage = () =>
diff --git a/src/demo/location-element.html b/src/demo/location-element.html
index bf1e984..bc1716b 100644
--- a/src/demo/location-element.html
+++ b/src/demo/location-element.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:html="http://www.w3.org/1999/xhtml">
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+      xmlns:xhtml="http://www.w3.org/1999/xhtml">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>custom-element Declarative Custom Element implementation demo</title>
@@ -24,7 +25,7 @@
 <html-demo-element legend="Change window URL">
     <template>
         <a href="#dce2">#dce2</a>
-        <form >
+        <form method="get">
             <input name="p1" value="abc"/>
             <input name="p2" value="def"/>
             <input type="submit" value="params"/>
@@ -38,7 +39,7 @@
 </html-demo-element>
 
 
-<html-demo-element legend="2. window.location live update"
+<html-demo-element legend="1. window.location live update"
                    description="In the page beginning change the window URL via link or by history change"
                    id="dce2"
     >
@@ -49,24 +50,20 @@
 
                 <location-element slice="window-url" live></location-element>
 
-                <html:table>
-                    <xsl:for-each select="//slice/window-url/@*">
-                        <html:tr>
-                            <html:th><xsl:value-of select="name()"/></html:th>
-                            <html:td><xsl:value-of select="."/></html:td>
-                        </html:tr>
-                    </xsl:for-each>
-                    <html:tr>
-                        <html:th><u>params</u></html:th>
-                        <html:th></html:th>
-                    </html:tr>
-                    <xsl:for-each select="//slice/window-url/params/*">
-                        <html:tr>
-                            <html:th><xsl:value-of select="name()"/></html:th>
-                            <html:td><xsl:value-of select="."/></html:td>
-                        </html:tr>
-                    </xsl:for-each>
-                </html:table>
+                <xhtml:table>
+                        <tr><th><h3> URL properties </h3></th></tr>
+                        <xsl:apply-templates mode="attrs"  select="//slice/window-url/@*"></xsl:apply-templates>
+                </xhtml:table>
+                <xhtml:table>
+                        <tr><th><h3> URL parameters </h3></th></tr>
+                        <xsl:apply-templates mode="attrs"  select="//slice/window-url/params/*"></xsl:apply-templates>
+                </xhtml:table>
+                <xsl:template mode="attrs" match="*|@*">
+                    <xhtml:tr>
+                        <xhtml:th>{name()}</xhtml:th>
+                        <xhtml:td>{.}</xhtml:td>
+                    </xhtml:tr>
+                </xsl:template>
             </template>
         </custom-element>
         <dce-2>?</dce-2>
@@ -74,7 +71,7 @@
 </html-demo-element>
 
 
-<html-demo-element legend="1. window.location simplest"
+<html-demo-element legend="2. window.location simplest"
                    description="location read only during initial and only render, does not track the changes."
                    id="dce1">
     <p>Has to produce URL properties</p>
@@ -84,24 +81,26 @@
 
                 <location-element slice="window-url"></location-element>
 
-                <html:table>
-                    <xsl:for-each select="//slice/window-url/@*">
-                        <html:tr>
-                            <html:th><xsl:value-of select="name()"/></html:th>
-                            <html:td><xsl:value-of select="."/></html:td>
-                        </html:tr>
-                    </xsl:for-each>
-                    <html:tr>
-                        <html:th><u>params</u></html:th>
-                        <html:th></html:th>
-                    </html:tr>
-                    <xsl:for-each select="//slice/window-url/params/*">
-                        <html:tr>
-                            <html:th><xsl:value-of select="name()"/></html:th>
-                            <html:td><xsl:value-of select="."/></html:td>
-                        </html:tr>
-                    </xsl:for-each>
-                </html:table>
+                <xhtml:table>
+                    <xhtml:tbody>
+                        <xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
+                        <xsl:for-each select="//slice/window-url/@*">
+                            <xhtml:tr>
+                                <xhtml:th>{name()}</xhtml:th>
+                                <xhtml:td>{.}</xhtml:td>
+                            </xhtml:tr>
+                        </xsl:for-each>
+                    </xhtml:tbody>
+                    <xhtml:tbody>
+                        <xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
+                        <xsl:for-each select="//slice/window-url/params/*">
+                            <xhtml:tr>
+                                <xhtml:th>{name()}</xhtml:th>
+                                <xhtml:td>{.}</xhtml:td>
+                            </xhtml:tr>
+                        </xsl:for-each>
+                    </xhtml:tbody>
+                </xhtml:table>
             </template>
         </custom-element>
         <dce-1>?</dce-1>
@@ -119,24 +118,26 @@
 
                 <location-element slice="src-url" src="https://my.example?a=1&b=2#3"></location-element>
 
-                <html:table>
-                    <xsl:for-each select="//slice/src-url/@*">
-                        <html:tr>
-                            <html:th><xsl:value-of select="name()"/></html:th>
-                            <html:td><xsl:value-of select="."/></html:td>
-                        </html:tr>
-                    </xsl:for-each>
-                    <html:tr>
-                        <html:th><u>params</u></html:th>
-                        <html:th></html:th>
-                    </html:tr>
-                    <xsl:for-each select="//slice/src-url/params/*">
-                        <html:tr>
-                            <html:th><xsl:value-of select="name()"/></html:th>
-                            <html:td><xsl:value-of select="."/></html:td>
-                        </html:tr>
-                    </xsl:for-each>
-                </html:table>
+                <xhtml:table>
+                    <xhtml:tbody>
+                        <xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
+                        <xsl:for-each select="//slice/src-url/@*">
+                            <xhtml:tr>
+                                <xhtml:th>{name()}</xhtml:th>
+                                <xhtml:td>{.}</xhtml:td>
+                            </xhtml:tr>
+                        </xsl:for-each>
+                    </xhtml:tbody>
+                    <xhtml:tbody>
+                        <xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
+                        <xsl:for-each select="//slice/src-url/params/*">
+                            <xhtml:tr>
+                                <xhtml:th>{name()}</xhtml:th>
+                                <xhtml:td>{.}</xhtml:td>
+                            </xhtml:tr>
+                        </xsl:for-each>
+                    </xhtml:tbody>
+                </xhtml:table>
             </template>
         </custom-element>
         <dce-3>?</dce-3>
diff --git a/src/http-request.js b/src/http-request.js
index 30fcab8..4649c62 100644
--- a/src/http-request.js
+++ b/src/http-request.js
@@ -2,58 +2,49 @@ const     attr = (el, attr)=> el.getAttribute(attr);
 
 export class HttpRequestElement extends HTMLElement
 {
-    // @attribute url
-    constructor() {
-        super();
+    static get observedAttributes() {
+        return  [   'value' // populated from localStorage, if defined initially, sets the value in storage
+                ,   'slice'
+                ,   'url'
+                ,   'method'
+                ,   'header-accept'
+                ]
     }
+
     get requestHeaders()
     {   const ret = {};
         [...this.attributes].filter(a=>a.name.startsWith('header-')).map( a => ret[a.name.substring(7)] = a.value );
-        return ret;
+        return ret
     }
     get requestProps()
     {   const ret = {};
         [...this.attributes].filter(a=>!a.name.startsWith('header-')).map( a => ret[a.name] = a.value );
-        return ret;
+        return ret
     }
-    sliceInit( s )
-    {   if( !s )
-            s = {};
-        s.element = this;
-        if( s.destroy )
-            return s;
-        const controller = new AbortController();
-        s.destroy = ()=>
-        {   // todo destroy slices in custom-element
-            controller.abort();
-        };
+
+    disconnectedCallback(){ this._destroy?.(); }
+
+    connectedCallback()
+    {   const controller = new AbortController();
+        this._destroy = ()=> controller.abort(this.localName+' disconnected');
+
         const     url = attr(this, 'url') || ''
         ,     request = { ...this.requestProps, headers: this.requestHeaders }
-        ,       slice = { detail: { request }, target: this }
-        , updateSlice = slice =>
-        {   for( let parent = s.element.parentElement; parent; parent = parent.parentElement )
-                if ( parent.onSlice )
-                    return parent.onSlice(slice);
-            console.error(`${this.localName} used outside of custom-element`)
-            debugger;
-        };
-
+        ,       slice = { request }
+        ,      update = () => this.dispatchEvent( new Event('change') );
+        this.value = slice;
         setTimeout( async ()=>
-        {   updateSlice( slice );
+        {   update();
             const response = await fetch(url,{ ...this.requestProps, signal: controller.signal, headers: this.requestHeaders })
-            ,      r= {headers: {}};
-            [...response.headers].map( ([k,v]) => r.headers[k]=v );
-            'ok,status,statusText,type,url,redirected'.split(',').map(k=>r[k]=response[k])
+            ,      r = {headers: {}};
+            [...response.headers].map( ([k,v]) => r.headers[k] = v );
+            'ok,status,statusText,type,url,redirected'.split(',').map( k=> r[k] = response[k] )
 
-            slice.detail.response = r;
-            updateSlice( slice );
-            const detail = {...slice.detail}
-            detail.data = await response.json();
-            const s = {...slice, detail}
-            updateSlice( s );
+            slice.response = r;
+            update();
+            slice.data = await response.json();
+            update();
         },0 );
-
-        return s;
     }
 }
 
diff --git a/src/index.html b/src/index.html
index 5149223..92635cf 100644
--- a/src/index.html
+++ b/src/index.html
@@ -25,11 +25,12 @@ <h3><code>custom-element</code> demo</h3>
         The data query is powered by XPath. </p>
     <p>Try in <a href="https://stackblitz.com/github/EPA-WG/custom-element?file=index.html" >Sandbox</a> </p>
     <section>
-    <b>Data layer demo</b>
+    <h4>Data layer demo</h4>
         <a href="./demo/local-storage.html"     >local-storage      </a> |
         <a href="./demo/http-request.html"      >http-request       </a> |
         <a href="./demo/location-element.html"  >location-element   </a> |
-        <a href="./demo/external-template.html" >external template  </a>
+        <a href="./demo/external-template.html" >external template  </a> |
+        <a href="./demo/dom-merge.html"         >DOM merge on dynamic update </a>
     </section>
 </nav>
 <html-demo-element legend="1. simple payload"
@@ -58,7 +59,7 @@ <h3><code>custom-element</code> demo</h3>
         <custom-element tag="dce-2-slots" hidden>
            <slot name="slot2"> 😃</slot> and again:
            <slot name="slot2"> 😃</slot>
-            <input placeholder="🐇❤️{//*[@slot='slot2']}"/>
+            <xhtml:input placeholder="🐇❤️{//*[@slot='slot2']}"/>
         </custom-element>
         <dce-2-slots><i slot="slot2">🥕</i></dce-2-slots>
         <dce-2-slots></dce-2-slots>
@@ -108,13 +109,13 @@ <h3><code>custom-element</code> demo</h3>
 
         <custom-element tag="pokemon-tile" hidden id="shared-template">
             <template>
-                <h3><xsl:value-of select="title"/></h3> <!-- title is an attribute in instance
-                                                             mapped into /*/attributes/title -->
-                <xsl:if test="//smile">                 <!-- data-smile DCE instance attribute,
-                                                             mapped into /*/dataset/smile
-                                                             used in condition -->
-                                                        <!-- data-smile DCE instance attribute, used as HTML -->
-                    <div>Smile as: <xsl:value-of select='//smile'/></div>
+                <h3> {title} </h3>           <!-- title is an attribute in instance
+                                                  mapped into /*/attributes/title -->
+                <xsl:if test="//smile">      <!-- data-smile DCE instance attribute,
+                                                  mapped into /*/dataset/smile
+                                                  used in condition -->
+                                             <!-- data-smile DCE instance attribute, used as HTML -->
+                    <div>Smile as: {//smile}</div> <!-- /datadom/dataset/smile -->
                 </xsl:if>
                 <!-- image would not be visible in sandbox, see live demo -->
                 <img src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{pokemon-id}.svg"
@@ -126,16 +127,17 @@ <h3><xsl:value-of select="title"/></h3> <!-- title is an attribute in instance
                                                         <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
                 <p><slot name="description"><i>description is not available</i></slot></p>
                 <xsl:for-each select="//*[@pokemon-id]">
-                                                    <!-- loop over payload elements with `pokemon-id` attribute -->
-                <button>
-                    <img height="32"
-                        src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg"
-                        alt="{text()}"/>
-                    <br/>
-                    <xsl:value-of select='text()'/>
-                </button>
+                                                        <!-- loop over payload elements with `pokemon-id` attribute,
+                                                            i.e LI elements -->
+                    <button>
+                        <img height="32"
+                            src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg"
+                            alt="{text()}"/>
+                        <br/>
+                        {text()} <!-- text from LI element in loop -->
+                    </button>
 
-            </xsl:for-each>
+                </xsl:for-each>
             </template>
         </custom-element>
 
diff --git a/src/local-storage.js b/src/local-storage.js
index a3b69d6..f9e6117 100644
--- a/src/local-storage.js
+++ b/src/local-storage.js
@@ -1,5 +1,4 @@
-const     attr = (el, attr)=> el.getAttribute(attr)
-, string2value = (type, v) =>
+const     string2value = (type, v) =>
 {   if( type === 'text')
         return v;
     if( type === 'json')
@@ -24,42 +23,36 @@ function ensureTrackLocalStorage()
 
 export class LocalStorageElement extends HTMLElement
 {
-    // @attribute live - monitors localStorage change
-    // @attribute type - `text|json`, defaults to text, other types are compatible with INPUT field
-    constructor()
+    static get observedAttributes() {
+        return  [   'value' // populated from localStorage, if defined initially, sets the valiue in storage
+                ,   'slice'
+                ,   'key'
+                ,   'type' // `text|json`, defaults to text, other types are compatible with INPUT field
+                ,   'live' // monitors localStorage change
+                ];
+    }
+
+    async connectedCallback()
     {
-        super();
-        const      state = {}
-        ,           type = attr(this, 'type') || 'text'
-        ,       listener = e=> e.detail.key === attr( this,'key' ) && propagateSlice()
-        , propagateSlice = ()=>
-        {   for( let parent = this.parentElement; parent; parent = parent.parentElement)
-                if( parent.onSlice )
-                    return parent.onSlice(
-                        {     detail: string2value( type, localStorage.getItem( attr( this, 'key' ) ) )
-                        ,     target: this
-                        } );
-                console.error(`${this.localName} used outside of custom-element`)
-                debugger;
-        };
-        this.sliceInit = s =>
-        {   if( !state.listener && this.hasAttribute('live') )
-            {   state.listener = 1;
-                window.addEventListener( 'local-storage', listener );
-                ensureTrackLocalStorage();
-            }
-            propagateSlice();
-            return s || {}
+        const    attr = attr => this.getAttribute(attr)
+            , fromStorage = ()=>
+        {   this.value = string2value( attr('type'), localStorage.getItem( attr( 'key' ) ) );
+            this.dispatchEvent( new Event('change') )
+        }
+        // todo apply type
+        if( this.hasAttribute('value'))
+            localStorage.setItem( attr( this, 'key' ) )
+        else
+            fromStorage()
+
+        if( this.hasAttribute('live') )
+        {   const listener = (e => e.detail.key === attr( 'key' ) && fromStorage());
+            window.addEventListener( 'local-storage', listener );
+            ensureTrackLocalStorage();
+            this._destroy = ()=> window.removeEventListener('local-storage', listener );
         }
-        this._destroy = ()=>
-        {
-            if( !state.listener )
-                return;
-            state.listener && window.removeEventListener('local-storage', listener );
-            delete state.listener;
-        };
     }
-    disconnectedCallback(){ this._destroy(); }
+    disconnectedCallback(){ this._destroy?.(); }
 }
 
 window.customElements.define( 'local-storage', LocalStorageElement );
diff --git a/src/location-element.js b/src/location-element.js
index 11d0f0d..c236409 100644
--- a/src/location-element.js
+++ b/src/location-element.js
@@ -2,15 +2,20 @@ const     attr = (el, attr)=> el.getAttribute(attr);
 
 export class LocationElement extends HTMLElement
 {
-    // @attribute live - monitors localStorage change
-    // @attribute src - URL to be parsed, defaults to `window.location`
+    static get observedAttributes()
+    {   return  [   'value' // populated from localStorage, if defined initially, sets the valiue in storage
+                ,   'slice'
+                ,   'live' // monitors location change
+                ,   'src'  // URL to be parsed, defaults to `window.location`
+                ];
+    }
 
     constructor()
     {
         super();
         const      state = {}
         ,       listener = e=> propagateSlice(e)
-        , propagateSlice = (e)=>
+        , propagateSlice = ()=>
         {   const urlStr = attr(this,'src')
             const url = urlStr? new URL(urlStr) : window.location
 
@@ -24,21 +29,14 @@ export class LocationElement extends HTMLElement
             {   if ('string' === typeof url[k])
                     detail[k] = url[k]
             }
-            for( let parent = this.parentElement; parent; parent = parent.parentElement)
-            {   if (parent.onSlice)
-                    return parent.onSlice(
-                        {   detail
-                            , target: this
-                        });
-            }
-            console.error(`${this.localName} used outside of custom-element`)
-            debugger;
+            this.value = detail;
+            this.dispatchEvent( new Event('change') );
         };
         this.sliceInit = s =>
         {
             if( !state.listener && this.hasAttribute('live') )
             {   state.listener = 1;
-                window.addEventListener( 'popstate', listener );
+                window.addEventListener( 'popstate'  , listener );
                 window.addEventListener( 'hashchange', listener );
             }
             propagateSlice();
@@ -49,14 +47,15 @@ export class LocationElement extends HTMLElement
             if( !state.listener )
                 return;
             if(state.listener)
-            {   window.removeEventListener('popstate', listener);
+            {   window.removeEventListener('popstate'  , listener);
                 window.removeEventListener('hashchange', listener);
             }
             delete state.listener;
         };
-        this.sliceInit()
+
     }
-    disconnectedCallback(){ this._destroy(); }
+    connectedCallback(){ this.sliceInit() }
+    disconnectedCallback(){ this._destroy() }
 }
 
 window.customElements.define( 'location-element', LocationElement );
diff --git a/test/location-element.test.js b/test/location-element.test.js
index b53e04f..03e53cd 100644
--- a/test/location-element.test.js
+++ b/test/location-element.test.js
@@ -18,7 +18,7 @@ describe('location-element', () => {
         const el = await renderStory(LocationElementLoad);
 
         const match = prop =>
-            expect(el.innerText).to.include(prop+``+window.location[prop]);
+            expect(el.innerText).to.include(prop+'\t'+window.location[prop]);
         match('protocol')
         match('host')
         match('hostname')
@@ -31,7 +31,7 @@ describe('location-element', () => {
         const mySearchParams = new URLSearchParams(window.location.search);
         for (const [key, value] of mySearchParams)
         {
-            expect(el.innerText).to.include(key+``+value);
+            expect(el.innerText).to.include(key+`\t`+value);
         }
     });
 
@@ -40,7 +40,7 @@ describe('location-element', () => {
         const el = await renderStory(LocationElementLive);
 
         const match = prop =>
-            expect(el.innerText).to.include(prop+``+window.location[prop]);
+            expect(el.innerText).to.include(prop+`\t`+window.location[prop]);
         match('protocol')
         match('host')
         match('hostname')
@@ -53,7 +53,7 @@ describe('location-element', () => {
         const mySearchParams = new URLSearchParams(window.location.search);
         for (const [key, value] of mySearchParams)
         {
-            expect(el.innerText).to.include(key+``+value);
+            expect(el.innerText).to.include(key+`\t`+value);
         }
         window.location.hash = '#dce'
         await aTimeout(10);
diff --git a/test/src-attribute.test.js b/test/src-attribute.test.js
index 2d9384c..2305a3d 100644
--- a/test/src-attribute.test.js
+++ b/test/src-attribute.test.js
@@ -41,7 +41,7 @@ describe('src attribute', () => {
     sleep(100)
 
     expect(el.querySelectorAll('my-component').length).to.equal(0);
-    expect(el.querySelector('custom-element').firstElementChild.tagName.startsWith('DCE-')).to.equal(true);
+    expect(el.querySelector('custom-element').firstElementChild.localName.startsWith('dce-')).to.equal(true);
     expect(el.querySelector('custom-element').getAttribute('tag')).to.equal('');
     expect(el.querySelectorAll('svg').length).to.equal(1);
   });
@@ -69,7 +69,7 @@ describe('src attribute', () => {
 
   it('src=html', async () => {
     const el = await renderStory(HtmlTemplate);
-    await sleep(100)
+    await sleep(1000)
     expect(el.innerHTML).to.include('<svg');
     expect(el.innerText).to.include('👋');
     expect(el.innerText).to.include('👌');