@epa-wg/custom-element 0.0.11 → 0.0.12

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,22 +1,37 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
+    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="slice" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
     <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>
-          <list size="12">
+          <list size="17">
             <item index="0" class="java.lang.String" itemvalue="nobr" />
             <item index="1" class="java.lang.String" itemvalue="noembed" />
             <item index="2" class="java.lang.String" itemvalue="comment" />
             <item index="3" class="java.lang.String" itemvalue="noscript" />
             <item index="4" class="java.lang.String" itemvalue="embed" />
             <item index="5" class="java.lang.String" itemvalue="script" />
-            <item index="6" class="java.lang.String" itemvalue="custom-element" />
-            <item index="7" class="java.lang.String" itemvalue="dce-external-4" />
-            <item index="8" class="java.lang.String" itemvalue="html-demo-element" />
-            <item index="9" class="java.lang.String" itemvalue="dce-external" />
-            <item index="10" class="java.lang.String" itemvalue="dce-internal" />
-            <item index="11" class="java.lang.String" itemvalue="dce-hash" />
+            <item index="6" class="java.lang.String" itemvalue="html-demo-element" />
+            <item index="7" class="java.lang.String" itemvalue="custom-element" />
+            <item index="8" class="java.lang.String" itemvalue="local-storage" />
+            <item index="9" class="java.lang.String" itemvalue="dce-1" />
+            <item index="10" class="java.lang.String" itemvalue="xhtml:table" />
+            <item index="11" class="java.lang.String" itemvalue="xhtml:tbody" />
+            <item index="12" class="java.lang.String" itemvalue="xhtml:tr" />
+            <item index="13" class="java.lang.String" itemvalue="xhtml:th" />
+            <item index="14" class="java.lang.String" itemvalue="xhtml:td" />
+            <item index="15" class="java.lang.String" itemvalue="xhtml:tfoot" />
+            <item index="16" class="java.lang.String" itemvalue="dce-2" />
           </list>
         </value>
       </option>

package/.idea/misc.xml

@@ -1,6 +1,5 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectRootManager">
-    <output url="file://$PROJECT_DIR$/out" />
-  </component>
+<project version="4">
+  <component name="ProjectRootManager">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
 </project>

package/.vs/VSWorkspaceState.json

@@ -0,0 +1,8 @@
+{
+  "ExpandedNodes": [
+    "",
+    "\\demo"
+  ],
+  "SelectedNode": "\\demo",
+  "PreviewInSolutionExplorer": false
+}

package/README.md

@@ -1,6 +1,6 @@
 # custom-element
 `Declarative Custom Element` is a part of pure `Declarative Web Application` stack. A proof of concept as a part of 
-[WCCG in Declarative custom elements](https://github.com/w3c/webcomponents-cg/issues/32#issuecomment-1321037301) 
+[WCCG in Declarative custom elements](https://github.com/w3c/webcomponents-cg/issues/32#issuecomment-1321037301) and [Declarative Web Application](https://github.com/EPA-WG/dwa#readme)
 discussion. The functionality of DCE and its data access does not require programming using JavaScript. 
 
 It allows to define custom HTML tag with template filled from slots, attributes and data `slice` as of now from  
@@ -32,13 +32,13 @@ yarn add @epa-wg/custom-element
 ## [Live demo 🔗][demo-url]
 ```html
 <custom-element tag="pokemon-tile" hidden>
-    <h3><xsl:value-of select="title"/></h3> <!-- title is an attribute in instance
+    <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: <xsl:value-of select='//smile'/></div>
+        <div>Smile as: {//smile} </div>
     </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"
@@ -165,21 +165,28 @@ template engine.
 
 # troubleshooting
 ## HTML parser is not compatible with templates
-On many tags like `table`, or link `a` the attempt to use XSLT operations could lead to DOM order missmatch to given 
-in template. In such cases the `html:` prefix in front of troubled tag would solve the parsing.
+On many tags like `table`, or link `a` the attempt to use XSLT operations could lead to DOM order mismatch to given 
+in template. In such cases the `xhtml:` prefix in front of troubled tag would solve the parsing.
 
 ```html
 <custom-element tag="dce-2" hidden>
-    <local-storage key="basket" slice="basket"></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:table>
-    count:<xsl:value-of select="count(//slice/basket/@*)"/>
+  <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> {name()} </xhtml:th>
+          <xhtml:td> {.}      </xhtml:td>
+        </xhtml:tr>
+      </xsl:for-each>
+    </xhtml:tbody>
+    <xhtml:tfoot>
+      <xhtml:tr>
+        <xhtml:td><slot>🤔</slot></xhtml:td>
+        <xhtml:th> {sum(//slice/basket/@*)} </xhtml:th>
+      </xhtml:tr>
+    </xhtml:tfoot>
+  </xhtml:table>
 </custom-element>
 ```
 See [demo source](demo/local-storage.html) for detailed sample.
@@ -206,7 +213,7 @@ run transformation under debugger.
 * try to add as attribute you could observe and put the value of node name or text to identify the current location in data 
 within template
 ```xml
-<b title="{name(*)} : {text()}">xml tag name:<xsl:value-of select='name()'/></b>
+<b title="{name(*)} : {text()}">xml tag name: <xsl:value-of select='name()'/></b>
 ```
 
 [git-url]:        https://github.com/EPA-WG/custom-element
@@ -218,9 +225,9 @@ within template
 [github-image]:   https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
 [npm-image]:      https://img.shields.io/npm/v/@epa-wg/custom-element.svg
 [npm-url]:        https://npmjs.org/package/@epa-wg/custom-element
-[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.11/coverage/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.11/coverage/lcov-report/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.11/storybook-static/index.html?path=/story/welcome--introduction
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.12/coverage/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.12/coverage/lcov-report/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.12/storybook-static/index.html?path=/story/welcome--introduction
 [sandbox-url]:    https://stackblitz.com/github/EPA-WG/custom-element?file=index.html
 [webcomponents-url]: https://www.webcomponents.org/element/@epa-wg/custom-element
 [webcomponents-img]: https://img.shields.io/badge/webcomponents.org-published-blue.svg

package/custom-element.js

@@ -1,27 +1,37 @@
-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 +81,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 +248,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 +259,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 +288,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 +355,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 +363,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 +384,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 +406,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();

package/demo/a.html

@@ -1,24 +1,38 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
+      xmlns:html="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>
-    <link rel="icon" href="demo/wc-square.svg" />
+    <link rel="icon" href="./wc-square.svg" />
+    <script type="module" src="../location-element.js"></script>
     <script type="module" src="../custom-element.js"></script>
+
     <style>
-        @import "demo/demo.css";
-        svg{ max-width: 2rem;}
+        @import "./demo.css";
+
+        button{ background: forestgreen; }
+        table{ min-width: 16rem; }
+        td{ border-bottom: 1px solid silver; }
+        tfoot td{ border-bottom: none; }
+        td,th{text-align: right; }
+        caption{ padding: 1rem; font-weight: bolder; font-family: sans-serif; }
     </style>
 </head>
 <body>
 
-<template id="template1">
-    <slot> Hello </slot> World!
-</template>
-
- <custom-element src="html-template.html#dwc-logo" >
-            <template><i>loading from HTML templates file ...</i></template>
-        </custom-element>
+<custom-element >
+    <local-storage key="basket" slice="basket"></local-storage>
+    <html:table>
+        <xsl:for-each select="//slice/basket/@*">
+            <html:tr>
+                <html:th> {name()} </html:th>
+                <html:td> {.}      </html:td>
+            </html:tr>
+        </xsl:for-each>
+    </html:table>
+    count:<xsl:value-of select="count(//slice/basket/@*)"/>
+</custom-element>
 
 </body>
 </html>