@epa-wg/custom-element 0.0.18 → 0.0.19

package/README.md

@@ -22,16 +22,17 @@ UI is re-rendered on each data slice change triggered by initialization or DOM e
 <details>
 <summary> What is DCE? </summary>
 DCE provides the next level of abstraction in HTML - native composition. With native implementation which is 
-streaming parser, streaming transformation, multithreading. native assumes the C/Rust compiled code. There is no place for JavaScript except of polyfill and ability to extend DCE, which otherwise has to be native.
+streaming parser, streaming transformation, multithreading. native assumes the C/Rust compiled code. 
+There is no place for JavaScript except of polyfill and ability to extend DCE, which otherwise has to be native.
 
 The composition assumes the fully functional template and ability to call the template with parameters( custom tag + attributes) .
 
-As the next to HTML abstraction layer - composition, it needs and provide:
+As the next to HTML abstraction layer - **composition**, it provides:
 * ability to use dependencies as from withing the page as from external file/lib via src attribute and # in URL
 * ability to treat external content via content-type like html, SVG, images, video with own template rendering
 * provide styles and embedded DCE declarations in own and named(lib) scope, sharing the scoped registry.
 
-As the next to composition layer of **functional component** it provides
+After composition the layer of **functional component** provides
 * data layer with access to attributes/payload(+slots), dataset, data bound slice
 * means in template to use the data selector for condition/enumeration/text injection into attributes and DOM
 * Set of native primitives to support browser APIs declaratively: location,storage, http request which bonded to slice and as result to reactive UI.
@@ -58,12 +59,35 @@ npm i -P @epa-wg/custom-element
 yarn add @epa-wg/custom-element
 ```
 
-## [enable IDE support](ide/IDE.md)
+## Enable IDE support
+[IDE.md](ide/IDE.md)
 
 
 
 ## [Live demo 🔗][demo-url]
+
+### Interactivity via data `slice` triggered by events
+```html
+<custom-element>
+      <input slice="typed"> //slice/typed : {//slice/typed}
+</custom-element>
+
+<custom-element>
+    <template>
+        <button slice="clickcount"
+                slice-event="click"
+                slice-value="//clickcount + 1" > + </button>
+        <input slice="clickcount" type="number" value="{//clickcount ?? 0}">
+        Click count: { //clickcount }
+    </template>
+</custom-element>
+```
+More on `slice` concept in [slice and events demo page][slice-demo-url]
+
+### Templating power
+comes from XSLT and XPath. Which is natively implemented in all current browsers, globally tested and well documented.
 ```html
+
 <custom-element tag="pokemon-tile" hidden>
     <h3>{title}</h3> <!-- title is an attribute in instance
                                                  mapped into /*/attributes/title -->
@@ -315,6 +339,7 @@ within template
 [git-test-url]:   https://github.com/EPA-WG/custom-element-test
 [demo-url]:       https://unpkg.com/@epa-wg/custom-element@0.0/index.html
 [css-demo-url]:   https://unpkg.com/@epa-wg/custom-element@0.0/demo/scoped-css.html
+[slice-demo-url]:   https://unpkg.com/@epa-wg/custom-element@0.0/demo/data-slices.html
 [hex-grid-url]:   https://unpkg.com/@epa-wg/custom-element@0.0/demo/hex-grid.html
 [hex-grid-image]: demo/hex-grid-transform.png
 [local-storage-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/local-storage.html
@@ -323,9 +348,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.18/coverage/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.18/coverage/lcov-report/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.18/storybook-static/index.html?path=/story/welcome--introduction
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.19/coverage/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.19/coverage/lcov-report/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.19/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/bin/xslDtd2Ide.mjs

@@ -116,7 +116,7 @@ writeFileSync( '.././ide/customData-xsl.json', JSON.stringify( vsCode, undefined
 const intelliJ = {
     "$schema": "http://json.schemastore.org/web-types",
     "name": "@epa-wg/custom-element",
-    "version": "0.0.18",
+    "version": "0.0.19",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/custom-element.js

@@ -7,9 +7,11 @@ const XSL_NS_URL  = 'http://www.w3.org/1999/XSL/Transform'
 
 const attr = (el, attr)=> el.getAttribute?.(attr)
 ,   isText = e => e.nodeType === 3
-,   create = ( tag, t = '', d=document ) => ( e => ((e.innerText = t||''),e) )((d.ownerDocument || d ).createElement( tag ))
+,   isString = s => typeof s === 'string'
+,   isNode = e => e && typeof e.nodeType === 'number'
+,   create = ( tag, t = '', d=document ) => ( e => ((t && e.append(createText(d.ownerDocument||d, t))),e) )((d.ownerDocument || d ).createElement( tag ))
 ,   createText = ( d, t) => (d.ownerDocument || d ).createTextNode( t )
-,   emptyNode = n=> { while(n.firstChild) n.firstChild.remove(); return n; }
+,   emptyNode = n => { while(n.firstChild) n.firstChild.remove(); n.getAttributeNames().map( a => n.removeAttribute(a) ); return n; }
 ,   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) )
@@ -90,6 +92,30 @@ Json2Xml( o, tag )
         ret.push("/>");
     return ret.join('\n');
 }
+
+    export function
+obj2node( o, tag, doc )
+{
+    if( typeof o === 'function'){debugger}
+    if( typeof o === 'string' )
+        return create(tag,o,doc);
+
+    if( o instanceof Array )
+    {   const ret = create('array');
+        o.map( ae => ret.append( obj2node(ae,tag,doc)) );
+        return ret
+    }
+    const ret = create(tag,'',doc);
+    for( let k in o )
+        if( isNode(o[k]) || typeof o[k] ==='function' || o[k] instanceof Window )
+            continue
+        else
+            if( typeof o[k] !== "object" )
+                ret.setAttribute(k, o[k] );
+            else
+                ret.append(obj2node(o[k], k, doc))
+    return ret;
+}
     export function
 tagUid( node )
 {   // {} to xsl:value-of
@@ -131,7 +157,7 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
 {
     if( templateNode.tagName === S || templateNode.documentElement?.tagName === S )
         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" >   
+    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 xmlns="${ HTML_NS_URL }"><xsl:apply-templates select="*"/></dce-root></xsl:template>
         <xsl:template match="*[name()='template']"><xsl:apply-templates mode="sanitize" select="*|text()"/></xsl:template>
@@ -212,25 +238,38 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
     if( !fr )
         return console.error("transformation error",{ xml:tc.outerHTML, xsl: xmlString( sanitizeXsl ) });
     const params = [];
-    [...fr.querySelectorAll('dce-root>attribute')].forEach(p=>
-    {   p = cloneAs(p,'xsl:param');
+    [...fr.querySelectorAll('dce-root>attribute')].forEach( a=>
+    {
+        const p = cloneAs(a,'xsl:param')
+        ,  name = attr(a,'name');
         payload.append(p);
         let select = attr(p,'select')?.split('??')
         if( !select)
-        {   select = ['//'+attr(p, 'name'), `'${p.textContent}'`];
+        {   select = ['//'+name, `'${p.textContent}'`];
             emptyNode(p);
+            p.setAttribute('name',name);
         }
+        let val;
         if( select?.length>1 ){
             p.removeAttribute('select');
             const c = $( xslDom, 'template[match="ignore"]>choose').cloneNode(true);
-            c.firstElementChild.setAttribute('test',select[0]);
             emptyNode(c.firstElementChild).append( createText(c,'{'+select[0]+'}'));
             emptyNode(c.lastElementChild ).append( createText(c,'{'+select[1]+'}'));
-            p.append(c)
-        }
+            c.firstElementChild.setAttribute('test',select[0]);
+            p.append(c);
+            val = c.cloneNode(true);
+        }else
+            val=cloneAs(a,'xsl:value-of');
+        val.removeAttribute('name');
+        a.append(val);
+        a.removeAttribute('select');
         params.push(p)
     });
-
+    [...fr.querySelectorAll('[value]')].filter(el=>el.getAttribute('value').match( /\{(.*)\?\?(.*)\}/g )).forEach(el=>
+    {   const v = attr(el,'value');
+        if(v)
+            el.setAttribute('value', evalCurly(v));
+    });
     for( const c of fr.childNodes )
         payload.append(xslDom.importNode(c,true))
 
@@ -287,18 +326,57 @@ deepEqual(a, b, O=false)
             return O
     return true;
 }
-
+    export const
+assureSlices = ( root, names) =>
+    names.split('|').map(n=>n.trim()).map( xp =>
+    {   if(xp.includes('/'))
+        {   const ret = [], r = root.ownerDocument.evaluate( xp, root );
+            for( let n; n = r.iterateNext(); )
+                ret.push( n )
+            return ret
+        }
+        return [...root.childNodes].find(n=>n.localName === xp) || create(xp);
+    }).flat();
+
+/**
+ *
+ * @param x slice node
+ * @param sliceNames slice name, xPath in /datadom/slice/
+ * @param ev Event obj
+ * @param dce
+ */
     export function
-injectSlice( x, s, data )
+event2slice( x, sliceNames, ev, dce )
 {
-    const isString = typeof data === 'string' ;
-    const createXmlNode = ( tag, t = '' ) => ( e => ((e.append( createText(x, t||''))),e) )(x.ownerDocument.createElement( tag ))
-    const el = isString
-        ? createXmlNode(s, data)
-        : document.adoptNode( xml2dom( Json2Xml( data, s ) ).documentElement);
-    [...x.children].filter( e=>e.localName === s ).map( el=>el.remove() );
-    el.data = data
-        x.append(el);
+    // evaluate slices[]
+    // inject @attributes
+    // inject event
+    // evaluate slice-value
+    // slice[i] = slice-value
+    assureSlices(x,sliceNames).map( s =>
+    {
+        const d = x.ownerDocument
+        ,    el = ev.sliceEventSource
+        ,   sel = ev.sliceElement
+        ,   cleanSliceValue = ()=>[...s.childNodes].filter(n=>n.nodeType===3 || n.localName==='value').map(n=>n.remove());
+        el.getAttributeNames().map( a => s.setAttribute( a, attr(el,a) ) );
+        [...s.childNodes].filter(n=>n.localName==='event').map(n=>n.remove());
+        ev.type==='init' && cleanSliceValue();
+        s.append( obj2node( ev, 'event', d ) );
+        if( sel.hasAttribute('slice-value') )
+        {   s.setAttribute('value', el.value );
+            const v = xPath( attr( sel, 'slice-value'),s );
+            cleanSliceValue();
+            s.append( createText( d, v ) );
+        }else
+        {   const v = el.value || attr( sel, 'value' ) ;
+            cleanSliceValue();
+            if( isString(v) )
+                s.append( createText( d, v) );
+            else
+                s.append( obj2node(v,'value',s.ownerDocument) )
+        }
+    })
 }
 
 function forEach$( el, css, cb){
@@ -339,7 +417,10 @@ export function mergeAttr( from, to )
         return
     }
     for( let a of from.attributes)
-        a.namespaceURI? to.setAttributeNS( a.namespaceURI, a.name, a.value ) : to.setAttribute( a.name, a.value )
+    {   a.namespaceURI? to.setAttributeNS( a.namespaceURI, a.name, a.value ) : to.setAttribute( a.name, a.value )
+        if( a.name === 'value')
+            to.value = a.value
+    }
 }
 export function assureUnique(n, id=0)
 {
@@ -381,7 +462,7 @@ export function merge( parent, fromArr )
             {   if( o.nodeValue !== e.nodeValue )
                     o.nodeValue = e.nodeValue;
             }else
-            {   mergeAttr(o,e)
+            {   mergeAttr(e,o)
                 if( o.childNodes.length || e.childNodes.length )
                     merge(o, e.childNodes)
             }
@@ -394,6 +475,34 @@ export function assureUID(n,attr)
         n.setAttribute(attr, crypto.randomUUID());
     return n.getAttribute(attr)
 }
+export const evalCurly = s =>
+{   const exp = [...s?.matchAll( /([^{}]*)(\{)([^}]+)}([^{}]*)/g ) ].map(l=>`${l[1]}{${ xPathDefaults(l[3] )}}${l[4]}`);
+    return exp.join('');
+}
+export const xPathDefaults = x=>
+{   if(!x.trim())
+        return x;
+    const xx = x.split('??')
+    ,      a = xx.shift()
+    ,      b = xPathDefaults(xx.join('??'));
+
+    return xx.length ? `concat( ${a} , substring( ${b} , (1+string-length( ${b} )) * string-length( ${a} ) ) )`: x
+    // return xx.length ? `${a}|(${xPathDefaults(xx.join('??'))})[not(${a})]`: a
+}
+export const xPath = (x,root)=>
+{   x = xPathDefaults(x);
+
+    const it = root.ownerDocument.evaluate(x, root);
+    switch( it.resultType )
+    {   case XPathResult.NUMBER_TYPE: return it.numberValue;
+        case XPathResult.STRING_TYPE: return it.stringValue;
+    }
+
+    let ret = '';
+    for( let n ;n=it.iterateNext(); )
+        ret += n.textContent;
+    return ret
+}
 export const xslTags = 'stylesheet,transform,import,include,strip-space,preserve-space,output,key,decimal-format,namespace-alias,template,value-of,copy-of,number,apply-templates,apply-imports,for-each,sort,if,choose,when,otherwise,attribute-set,call-template,with-param,variable,param,text,processing-instruction,element,attribute,comment,copy,message,fallback'.split(',');
 export const toXsl = (el, defParent) => {
     const x = create('xsl:'+el.localName);
@@ -436,19 +545,23 @@ CustomElement extends HTMLElement
 
         Object.defineProperty( this, "xsltString", { get: ()=>templateDocs.map( td => xmlString(td) ).join('\n') });
 
-        const dce = this;
-        const sliceNames = [...this.templateNode.querySelectorAll('[slice]')].map(e=>attr(e,'slice'));
+        const dce = this
+        , sliceNodes = [...this.templateNode.querySelectorAll('[slice]')]
+        , sliceNames = sliceNodes.map(e=>attr(e,'slice')).filter(n=>!n.includes('/')).filter((v, i, a)=>a.indexOf(v) === i)
+        , declaredAttributes = templateDocs.reduce( (ret,t) => { if( t.params ) ret.push( ...t.params ); return ret; }, [] );
+
         class DceElement extends HTMLElement
         {
-            static get observedAttributes()
-            {   return templateDocs.reduce( (ret,t) =>
-                {   if( t.params ) ret.push( ...t.params.map(e=>attr(e,'name')) );
-                    return ret;
-                }, [] );
-            }
+            static get observedAttributes(){ return declaredAttributes.map( a=>attr(a,'name')); }
+            #inTransform = 0;
             connectedCallback()
-            {   if( this.firstElementChild?.tagName === 'TEMPLATE' )
-                {   const t = this.firstElementChild;
+            {   let payload = this.childNodes;
+                if( this.firstElementChild?.tagName === 'TEMPLATE' )
+                {
+                    const t = this.firstElementChild;
+                    t.remove();
+                    payload = t.content.childNodes;
+
                     for( const n of [...t.content.childNodes] )
                         if( n.localName === 'style' ){
                             const id = assureUID(this,'data-dce-style')
@@ -459,9 +572,6 @@ CustomElement extends HTMLElement
                                 t.insertAdjacentElement('beforebegin',n);
                             else if(n.nodeType===3)
                                 t.insertAdjacentText('beforebegin',n.data);
-
-                    t.remove();
-
                 }
                 const x = xml2dom( '<datadom/>' ).documentElement;
                 const createXmlNode = ( tag, t = '' ) => ( e =>
@@ -469,11 +579,12 @@ CustomElement extends HTMLElement
                         e.append( createText( x, t ))
                     return e;
                 })(x.ownerDocument.createElement( tag ))
-                injectData( x, 'payload'    , this.childNodes, assureSlot );
+                injectData( x, 'payload'    , payload , assureSlot );
                 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, '' ) );
+                const sliceRoot = injectData( x, 'slice', sliceNames, k => createXmlNode( k, '' ) )
+                ,     sliceXPath = x => xPath(x, sliceRoot);
                 this.xml = x;
 
                 const sliceEvents=[];
@@ -481,10 +592,10 @@ CustomElement extends HTMLElement
                 {   const processed = {}
 
                     for(let ev; ev = sliceEvents.pop(); )
-                    {   const s = attr( ev.target, 'slice');
+                    {   const s = attr( ev.sliceElement, 'slice');
                         if( processed[s] )
                             continue;
-                        injectSlice( sliceRoot, s, 'object' === typeof ev.detail ? {...ev.detail}: ev.detail );
+                        event2slice( sliceRoot, s, ev, this );
                         processed[s] = ev;
                     }
                     Object.keys(processed).length !== 0 && transform();
@@ -493,10 +604,7 @@ CustomElement extends HTMLElement
 
                 this.onSlice = ev=>
                 {   ev.stopPropagation?.();
-                    const s = attr( ev.target, 'slice')
-                    if( deepEqual( ev.detail, [...sliceRoot.children].find( e=>e.localName === s )?.data ) )
-                        return
-
+                    ev.sliceEventSource = ev.currentTarget || ev.target;
                     sliceEvents.push(ev);
                     if( !timeoutID )
                         timeoutID = setTimeout(()=>
@@ -505,7 +613,9 @@ CustomElement extends HTMLElement
                         },10);
                 };
                 const transform = this.transform = ()=>
-                {
+                {   if(this.#inTransform){ debugger }
+                    this.#inTransform = 1;
+
                     const ff = xp.map( (p,i) =>
                     {   const f = p.transformToFragment(x.ownerDocument, document)
                         if( !f )
@@ -518,35 +628,55 @@ CustomElement extends HTMLElement
                         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;
+
+                    DceElement.observedAttributes.map( a =>
+                    {   let v = attr(this.firstElementChild,a);
+                        if( v !== attr(this,a) )
+                        {   this.setAttribute( a, v );
+                            this.#applyAttribute( a, v );
+                        }
+                    })
 
                     forEach$( this,'[slice]', el =>
                     {   if( !el.dceInitialized )
                         {   el.dceInitialized = 1;
-                            el.addEventListener( attr(el,'slice-update')|| 'change', ()=>changeCb(el) )
-                            if( hasInitValue(el) )
-                                changeCb(el)
+                            const evs = attr(el,'slice-event');
+                            (evs || 'change')
+                                .split(' ')
+                                .forEach( t=> (el.localName==='slice'? el.parentElement : el)
+                                                .addEventListener( t, ev=>
+                                                {   ev.sliceElement = el;
+                                                    this.onSlice(ev)
+                                                } ));
+                            if( !evs || evs.includes('init') )
+                            {   if( el.hasAttribute('slice-value') || el.hasAttribute('value') || el.value )
+                                    this.onSlice({type:'init', target: el, sliceElement:el })
+                                else
+                                    el.value = sliceXPath( attr(el,'slice') )
+                            }
                         }
-                    })
+                    });
+                    this.#inTransform = 0;
                 };
                 transform();
                 applySlices();
             }
-            attributeChangedCallback(name, oldValue, newValue)
-            {   if( !this.xml )
-                    return;
-                let a = this.xml.querySelector(`attributes>${name}`);
+            #applyAttribute(name, newValue)
+            {   let a = this.xml.querySelector(`attributes>${name}`);
                 if( a )
-                    emptyNode(a).append( createText(a,newValue));
+                    emptyNode(a).append( createText(a,newValue) );
                 else
                 {   a = create( name, newValue, this.xml );
-                    a.append( createText(a,newValue) );
                     this.xml.querySelector('attributes').append( a );
                 }
-
+            }
+            attributeChangedCallback(name, oldValue, newValue)
+            {   if( !this.xml || this.#inTransform )
+                    return;
+                this.#applyAttribute(name, newValue);
                 this.transform(); // needs throttling
             }
+
             get dce(){ return dce }
         }
         if(tag)

package/demo/a.html

@@ -4,30 +4,58 @@
 <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="./wc-square.svg" />
-    <script type="module" src="../location-element.js"></script>
+    <link rel="icon" href="./wc-square.svg"/>
+    <script type="module" src="../http-request.js"></script>
     <script type="module" src="../custom-element.js"></script>
 
     <style>
         @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; }
+        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>
 
-<custom-element tag="dce-link" hidden>
-    <param name="p1" >default_P1                </param>
-    <param name="p2" select="'always_p2'"       ></param>
-    <param name="p3" select="//p3 ?? 'def_P3' " ></param>
-    p1:{$p1} <br/> p2: {$p2} <br/> p3: {$p3}
-</custom-element>
-<dce-link id="dce1" ></dce-link>
+ <custom-element>
+            <template>
+                <button slice="clickcount"
+                        slice-event="click"
+                        slice-value="//clickcount + 1"   >
+                    +
+                </button>
+                <button slice="clickcount"
+                        slice-event="click"
+                        slice-value="//clickcount - 1"   >
+                    -
+                </button>
+                <input slice="clickcount" type="number" value="{//clickcount ?? 0}" />
+                {//clickcount}
+            </template>
+        </custom-element>
 
 </body>
 </html>

package/demo/data-slices.html

@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<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>Data slices - Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+
+    <script type="module" src="../http-request.js"></script>
+    <script type="module" src="../input-text.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+    </style>
+</head>
+<body>
+
+<nav>
+    <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
+    <h3>Data slices propagation by events.</h3>
+</nav>
+
+<html-demo-element legend="A. slice initialization, change on event"
+                   description="initial value should be 0; + and - should change the number in input field">
+    <template>
+        <custom-element>
+            <template>
+                <button slice="clickcount"
+                        slice-event="click"
+                        slice-value="//clickcount + 1"   >
+                    +
+                </button>
+                <button slice="clickcount"
+                        slice-event="click"
+                        slice-value="//clickcount - 1"   >
+                    -
+                </button>
+                <input slice="clickcount" type="number" value="{//clickcount ?? 0}" />
+                {//clickcount}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="B. slice event data."
+                   description="move the mouse over TEXTAREA and click to see slice and slice event changed">
+    <template>
+        <custom-element>
+            <template>
+                <textarea slice="s" slice-value="concat('x:', //@pageX)"
+                          slice-event="mousemove click"
+                          style="width:16rem;height:16rem;box-shadow: inset {//@offsetX}px {//@offsetY}px gold;" ></textarea><br/>
+                //slice/s : {//slice/s}   <br/>
+                //slice/s/event/@offsetY: {//slice/s/event/@offsetY}  <br/>
+                event type:{//slice/s/event/@type}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="1. slice change on event. 1:1 slice⮂value"
+                   description="initial value blank; type and unfocus to see slice changed">
+    <template>
+
+        <custom-element>
+            <input slice="typed" /> //slice/typed : {//slice/typed}
+        </custom-element>
+    </template>
+</html-demo-element>
+
+
+<html-demo-element legend="2. initial slice value, slice change on event. slice⮂value, w/ initial"
+                   description="initial value from input; type and unfocus to see slice changed">
+    <template>
+        <custom-element>
+            <input slice="s" value="{//s ?? 'B'}" /> //slice/s : {//slice/s}
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="3. initial slice value, slice change on event. slice⮂value, w/ initial"
+                   description="initial value from input; type to see slice changed">
+    <template>
+        <custom-element>
+            <input slice="s" value="{//s ?? 'B'}" slice-event="input"/> //slice/s : {//slice/s}
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="4. initial slice value from attribute, slice change on event."
+                   description="initial value from input; type to see slice changed">
+    <template>
+        <custom-element tag="dce-1">
+            <template>
+                <attribute name="a" >😁</attribute>
+                <input slice="s" value="{//s ?? $a}" slice-event="keyup" />
+                attribute 'a' : {$a}
+                //slice/s : {//slice/s}
+            </template>
+        </custom-element>
+        <dce-1></dce-1>
+        <dce-1 a="🤗"></dce-1>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="5. initial slice value from attribute, slice change on event."
+                   description="initial value from input as 'xB'; type and unfocus to see slice changed">
+    <template>
+        <custom-element>
+            <template>
+                <input slice="s" value="{substring(//s, 2) ?? 'B'}" slice-value="concat('x', @value )" />
+                //slice/s : {//slice/s}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+
+<html-demo-element legend="6. initial slice value from input, button ignored till change on click."
+                   description="initial value from input as 'anonymous'; on button click change to 'broccoli'">
+    <template>
+        <custom-element>
+            <template>
+            <input slice="nickname" value="anonymous" />
+            <button slice="nickname" slice-value="'broccoli'" slice-event="click">🥦</button>
+            {//nickname}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="7. initial slice value from SLICE element, button ignored till change on click."
+                   description="synthetic SLICE element serves as initial value holder">
+    <template>
+        <custom-element>
+            <template>
+                <button slice="clickcount" slice-event="click tap" slice-value="//clickcount + 1">
+                    <slice slice="clickcount" value="0" ></slice>
+                     click/tap
+                </button>
+                //clickcount : {//clickcount}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="8. multiple slices by SLICE element, button ignored till change on click."
+                   description="synthetic SLICE elements serve as initial value holder">
+    <template>
+        <custom-element>
+            <template>
+                <button>
+                    <slice slice="clicked" value="{0}" ></slice>
+                    <slice slice="focused" value="{0}" ></slice>
+                    <slice slice-event="click tap" slice="clicked" slice-value="//clicked+1" ></slice>
+                    <slice slice-event="focus"     slice="focused" slice-value="1" ></slice>
+                    <slice slice-event="blur"      slice="focused" slice-value="0" ></slice>
+                     click/tap, focus/blur
+                </button> <br/>
+                //clicked : {//clicked} <br/>
+                //focused : {//focused}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+
+<html-demo-element legend="9. slice in attribute"
+                   description="initial attribute value should be smile as emoji and :) on blur from input it should be updated from value">
+    <template>
+        <custom-element tag="emotional-element">
+            <template>
+                <attribute name="emotion" select="//emotion ?? '😃'"></attribute>
+                <input slice="/datadom/attributes/emotion"/>
+                Type and unfocus to update emotion attribute: {emotion}
+            </template>
+        </custom-element>
+        <emotional-element emotion=":)"></emotional-element>
+        <emotional-element></emotional-element>
+    </template>
+</html-demo-element>
+
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
+</body>
+</html>

package/demo/demo.css

@@ -6,6 +6,7 @@ body,nav{ display: flex; flex-wrap: wrap; align-content: stretch; gap: 1rem; }
 body>*{flex: auto;}
 nav{ flex-direction: column;}
 custom-element+*,
+custom-element+*+*,
 custom-element:not([tag]),
 dce-link,dce-1-slot,dce-2-slot,dce-3-slot,dce-4-slot,dce-2-slots,greet-element,pokemon-tile,
 dce-1,dce-2,dce-3,dce-4,dce-internal,dce-hash

package/demo/dom-merge.html

@@ -96,7 +96,7 @@
                     <input type="text"
                            value="Type time update"
                            slice="txt"
-                           slice-update="keyup"/>
+                           slice-event="keyup"/>
 
                     <span> Character count:
                         <b> {string-length(//slice/txt)} </b>

package/demo/external-template.html

@@ -78,6 +78,7 @@
 <html-demo-element legend="4. external XSLT file"
                    description="This external templates generated the tree for DCE data set"
     >
+    <a href="tree.xsl">tree.xsl</a>
     <template>
             <custom-element tag="dce-external-4" src="tree.xsl" >
                 <template><i>loading from XSLT ...</i></template>

package/demo/http-request.html

@@ -37,6 +37,7 @@
     <template>
 <custom-element>
     <template><!-- wrapping into template to prevent images loading within DCE declaration -->
+        <p>Pokemon buttons from API</p>
         <http-request
             url="https://pokeapi.co/api/v2/pokemon?limit=6&offset=0"
             slice="page"
@@ -45,7 +46,7 @@
             ></http-request>
         <variable name="slides-url"
             >https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world</variable>
-        <for-each select="//slice/page/data/results/*">
+        <for-each select="//results">
             <variable name="pokeid"
                 select="substring-before( substring-after( @url, 'https://pokeapi.co/api/v2/pokemon/'),'/')"
                 ></variable>
@@ -67,6 +68,7 @@
         <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 -->
+                <attribute name="url"></attribute>
                 <http-request
                         url="{url}"
                         slice="request_slice"
@@ -79,15 +81,15 @@
 
                 <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>
+                    <tr><th>  //slice/request_slice/value/request/@mode  </th>
+                        <td>{ //slice/request_slice/value/request/@mode }</td></tr>
+                    <tr><th>  //slice/request_slice/value/response/headers/@content-type  </th>
+                        <td>{ //slice/request_slice/value/response/headers/@content-type }</td></tr>
+                    <tr><th>  //slice/request_slice/value/response/@status  </th>
+                        <td>{ //slice/request_slice/value/response/@status }</td></tr>
                 </table>
-                <apply-templates mode="display" select="//slice/request_slice/*"></apply-templates>
-                <template mode="display" match="*">
+                <apply-templates mode="display" select="//slice/request_slice/value/*"></apply-templates>
+                <xsl:template mode="display" match="*">
                     <fieldset>
                         <legend> {local-name(.)} </legend>
                         <ul>
@@ -101,7 +103,7 @@
                         </ul>
                         <apply-templates mode="display" select="*"></apply-templates>
                     </fieldset>
-                </template>
+                </xsl:template>
             </template>
         </custom-element>
     </template>

package/demo/local-storage.html

@@ -45,7 +45,7 @@
                 <local-storage key="basket" slice="basket" live type="json"></local-storage>
                 <xhtml:table xmlns:xhtml="http://www.w3.org/1999/xhtml"  >
                     <xhtml:tbody>
-                        <for-each select="//basket/@*">
+                        <for-each select="//basket/value/@*">
                             <xhtml:tr>
                                 <xhtml:th> {name()} </xhtml:th>
                                 <xhtml:td> {.}      </xhtml:td>
@@ -55,7 +55,7 @@
                     <xhtml:tfoot>
                         <xhtml:tr>
                             <xhtml:td><slot>🤔</slot></xhtml:td>
-                            <xhtml:th> {sum(//slice/basket/@*)} </xhtml:th>
+                            <xhtml:th> {sum(//slice/basket/value/@*)} </xhtml:th>
                         </xhtml:tr>
                     </xhtml:tfoot>
                 </xhtml:table>

package/demo/location-element.html

@@ -51,19 +51,24 @@
                 <location-element slice="window-url" live></location-element>
 
                 <xhtml:table>
-                        <tr><th><h3> URL properties </h3></th></tr>
-                        <apply-templates mode="attrs"  select="//slice/window-url/@*"></apply-templates>
+                    <xhtml:tbody>
+                        <xhtml:tr>
+                            <xhtml:th><h3> URL properties </h3></xhtml:th>
+                            <xhtml:td>{count(//value/@*)}</xhtml:td>
+                        </xhtml:tr>
+                        <apply-templates mode="attrs"  select="//value/@*"></apply-templates>
+                    </xhtml:tbody>
                 </xhtml:table>
                 <xhtml:table>
                         <tr><th><h3> URL parameters </h3></th></tr>
-                        <apply-templates mode="attrs"  select="//slice/window-url/params/*"></apply-templates>
+                        <apply-templates mode="attrs"  select="//params/*/*"></apply-templates>
                 </xhtml:table>
-                <template mode="attrs" match="*|@*">
+                <xsl:template mode="attrs" match="*|@*">
                     <xhtml:tr>
                         <xhtml:th>{name()}</xhtml:th>
                         <xhtml:td>{.}</xhtml:td>
                     </xhtml:tr>
-                </template>
+                </xsl:template>
             </template>
         </custom-element>
         <dce-2>?</dce-2>
@@ -84,7 +89,7 @@
                 <xhtml:table>
                     <xhtml:tbody>
                         <xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
-                        <for-each select="//slice/window-url/@*">
+                        <for-each select="//slice/window-url/value/@*">
                             <xhtml:tr>
                                 <xhtml:th>{name()}</xhtml:th>
                                 <xhtml:td>{.}</xhtml:td>
@@ -93,7 +98,7 @@
                     </xhtml:tbody>
                     <xhtml:tbody>
                         <xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
-                        <for-each select="//slice/window-url/params/*">
+                        <for-each select="//slice/window-url/value/params/*">
                             <xhtml:tr>
                                 <xhtml:th>{name()}</xhtml:th>
                                 <xhtml:td>{.}</xhtml:td>
@@ -121,7 +126,7 @@
                 <xhtml:table>
                     <xhtml:tbody>
                         <xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
-                        <for-each select="//slice/src-url/@*">
+                        <for-each select="//slice/src-url/value/@*">
                             <xhtml:tr>
                                 <xhtml:th>{name()}</xhtml:th>
                                 <xhtml:td>{.}</xhtml:td>
@@ -130,7 +135,7 @@
                     </xhtml:tbody>
                     <xhtml:tbody>
                         <xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
-                        <for-each select="//slice/src-url/params/*">
+                        <for-each select="//slice/src-url/value/params/*">
                             <xhtml:tr>
                                 <xhtml:th>{name()}</xhtml:th>
                                 <xhtml:td>{.}</xhtml:td>

package/demo/parameters.html

@@ -44,6 +44,24 @@ params needed to declare DCE attributes and track the attributes changes. It als
     </template>
 </html-demo-element>
 
+<html-demo-element legend="slice propagates attribute" description="
+when slice value points to attribute, it would be populated on slice change
+">
+    Type in the input field to see the variable $title change. <br/>
+    Hover the mouse to see the title attribute text popup.<br/>
+    Inspect DCE node in dev tools to see `title` attribute updated while typing.
+
+    <template>
+        <custom-element>
+            <template>
+                <attribute name="title" select="//title ?? '😃'" ></attribute>
+                <input slice="/datadom/attributes/title" slice-event="keyup"/>
+                title attribute: {$title}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
 
 
 <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>

package/demo/s.xml

@@ -1 +1,6 @@
-<datadom><payload><i xmlns="http://www.w3.org/1999/xhtml" slot="">🍋</i></payload><attributes/><dataset/><slice/></datadom>
+<?xml version="1.0" encoding="UTF-8"?>
+<datadom><payload><span xmlns="http://www.w3.org/1999/xhtml" slot="">                </span><button xmlns="http://www.w3.org/1999/xhtml" slice="clickcount" slice-event="click" slice-value="//clickcount + 1" slot="">
+                    +
+                </button><span xmlns="http://www.w3.org/1999/xhtml" slot="">                </span><button xmlns="http://www.w3.org/1999/xhtml" slice="clickcount" slice-event="click" slice-value="//clickcount - 1" slot="">
+                    -
+                </button><span xmlns="http://www.w3.org/1999/xhtml" slot="">                </span><input xmlns="http://www.w3.org/1999/xhtml" slice="clickcount" type="number" value="{//clickcount ?? 0}" slot="" /><span xmlns="http://www.w3.org/1999/xhtml" slot="">                {//clickcount}            </span></payload><attributes><tag>dce-72e0d208-b3b4-4b0a-8798-a094beaf5fe1</tag></attributes><dataset/><slice><clickcount xmlns="" slice="clickcount" type="number" value="" data-dce-id="2" slice-event="click" slice-value="//clickcount + 1"><event isTrusted="true" pointerId="1" width="1" height="1" pressure="0" tiltX="0" tiltY="0" azimuthAngle="0" altitudeAngle="1.5707963267948966" tangentialPressure="0" twist="0" pointerType="mouse" isPrimary="false" screenX="19" screenY="99" clientX="19" clientY="12" ctrlKey="false" shiftKey="false" altKey="false" metaKey="false" button="0" buttons="0" pageX="19" pageY="12" x="19" y="12" offsetX="10" offsetY="0" movementX="0" movementY="0" layerX="19" layerY="12" detail="1" which="1" type="click" eventPhase="0" bubbles="true" cancelable="true" defaultPrevented="false" composed="true" timeStamp="5460750.8000000715" returnValue="true" cancelBubble="false" NONE="0" CAPTURING_PHASE="1" AT_TARGET="2" BUBBLING_PHASE="3"><relatedTarget/><fromElement/><toElement/><sourceCapabilities firesTouchEvents="false"/><currentTarget/></event>46</clickcount></slice></datadom>

package/demo/s.xslt

@@ -1,3 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce" xmlns:exsl="http://exslt.org/common" version="1.0" exclude-result-prefixes="exsl">
     <xsl:template match="ignore">
         <xsl:choose>
@@ -5,14 +6,13 @@
             <xsl:otherwise><xsl:value-of select="def"/></xsl:otherwise>
         </xsl:choose>
         <xsl:value-of select="."/></xsl:template>
-    <xsl:template mode="payload" match="attributes"><xsl:param xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="p1"><xsl:choose>
-        <xsl:when test="//p1 "><xsl:value-of select="//p1 "/></xsl:when>
-        <xsl:otherwise><xsl:value-of select=" 'def_p1' "/></xsl:otherwise>
-    </xsl:choose></xsl:param><xsl:param xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="p2" select="'always_p2'"/><xsl:param xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="p3"><xsl:choose>
-        <xsl:when test="//p3"><xsl:value-of select="//p3"/></xsl:when>
-        <xsl:otherwise><xsl:value-of select="'default_P3                &#10;                p1:{$p1"/>  p2:<xsl:value-of select="$p2"/>  p3:<xsl:value-of select="$p3"/>
-            '}</xsl:otherwise>
-    </xsl:choose></xsl:param><dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1"><xsl:attribute xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="p1" select="//p1 ?? 'def_p1' "/><xsl:attribute xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="p2" select="'always_p2'"/><xsl:attribute xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="p3"/></dce-root></xsl:template>
+    <xsl:template mode="payload" match="attributes"><dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1"><button xmlns="" slice="clickcount" slice-event="click" slice-value="//clickcount + 1" data-dce-id="2">
+                    +
+                </button><button xmlns="" slice="clickcount" slice-event="click" slice-value="//clickcount - 1" data-dce-id="3">
+                    -
+                </button><input xmlns="" slice="clickcount" type="number" value="{concat( //clickcount  , substring(  0 , (1+string-length(  0 )) * string-length( //clickcount  ) ) )}" data-dce-id="4"/><dce-text xmlns="" data-dce-id="5">
+                <xsl:value-of select="//clickcount"/>
+            </dce-text></dce-root></xsl:template>
     <xsl:template match="/">
         <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
     </xsl:template>
@@ -21,7 +21,7 @@
         <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"/>

package/demo/z.html

@@ -1,48 +1,62 @@
-<!DOCTYPE html>
-<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>CSS scoping - Declarative Custom Element implementation demo</title>
-    <link rel="icon" href="./wc-square.svg"/>
-
-    <script type="module" src="../http-request.js"></script>
-    <script type="module" src="../input-text.js"></script>
-    <script type="module" src="../custom-element.js"></script>
-    <style>
-        @import "./demo.css";
-
-        button {
-            display: inline-flex;
-            flex-direction: column;
-            align-items: center;
-            flex: auto;
-            box-shadow: inset silver 0 0 1rem;
-            min-width: 12rem;
-            padding: 1rem;
-            color: coral;
-            text-shadow: 1px 1px silver;
-            font-weight: bolder;
-        }
-
-        caption {
-            padding: 1rem;
-            font-weight: bolder;
-            font-family: sans-serif;
-        }
-
-        code {
-            text-align: right;
-            min-width: 3rem;
-        }
-
-    </style>
-</head>
-<body>
-
-<custom-element src="embed-1.html">
-    loading from embed-1.html ...
-</custom-element>
-
-
-</body>
-</html>
+<dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml"
+          xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1">
+    <location-element xmlns="" slice="window-url" live="" data-dce-id="2"></location-element>
+    <table xmlns="" data-dce-id="3">
+        <tbody data-dce-id="0-1">
+        <tr data-dce-id="4">
+            <th data-dce-id="5"><h3 data-dce-id="6"> URL properties </h3></th>
+            <td data-dce-id="7">9</td>
+        </tr>
+        <tr data-dce-id="10">
+            <th data-dce-id="11">href</th>
+            <td data-dce-id="12">http://localhost:63342/custom-element/demo/a.html?_ijt=dmv0p4go000q47lg48i5im92f7&amp;_ij_reload=RELOAD_ON_SAVE</td>
+        </tr>
+        <tr data-dce-id="10-1">
+            <th data-dce-id="11">origin</th>
+            <td data-dce-id="12">http://localhost:63342</td>
+        </tr>
+        <tr data-dce-id="10-2">
+            <th data-dce-id="11">protocol</th>
+            <td data-dce-id="12">http:</td>
+        </tr>
+        <tr data-dce-id="10-3">
+            <th data-dce-id="11">host</th>
+            <td data-dce-id="12">localhost:63342</td>
+        </tr>
+        <tr data-dce-id="10-4">
+            <th data-dce-id="11">hostname</th>
+            <td data-dce-id="12">localhost</td>
+        </tr>
+        <tr data-dce-id="10-5">
+            <th data-dce-id="11">port</th>
+            <td data-dce-id="12">63342</td>
+        </tr>
+        <tr data-dce-id="10-6">
+            <th data-dce-id="11">pathname</th>
+            <td data-dce-id="12">/custom-element/demo/a.html</td>
+        </tr>
+        <tr data-dce-id="10-7">
+            <th data-dce-id="11">search</th>
+            <td data-dce-id="12">?_ijt=dmv0p4go000q47lg48i5im92f7&amp;_ij_reload=RELOAD_ON_SAVE</td>
+        </tr>
+        <tr data-dce-id="10-8">
+            <th data-dce-id="11">hash</th>
+            <td data-dce-id="12"></td>
+        </tr>
+        </tbody>
+    </table>
+    <h3 data-dce-id="9"> URL parameters </h3>
+    <table xmlns="" data-dce-id="8">
+
+        <tbody data-dce-id="0-1">
+        <tr data-dce-id="10">
+            <th data-dce-id="11">_ijt</th>
+            <td data-dce-id="12">dmv0p4go000q47lg48i5im92f7</td>
+        </tr>
+        <tr data-dce-id="10-1">
+            <th data-dce-id="11">_ij_reload</th>
+            <td data-dce-id="12">RELOAD_ON_SAVE</td>
+        </tr>
+        </tbody>
+    </table>
+</dce-root>

package/http-request.js

@@ -18,7 +18,8 @@ export class HttpRequestElement extends HTMLElement
     }
     get requestProps()
     {   const ret = {};
-        [...this.attributes].filter(a=>!a.name.startsWith('header-')).map( a => ret[a.name] = a.value );
+        [...this.attributes].filter(a=>!a.name.startsWith('header-'))
+                            .filter(a=>!a.name.startsWith('slice')).map( a => ret[a.name] = a.value );
         return ret
     }
 

package/ide/customData-dce.json

@@ -5,7 +5,7 @@
       "name": "slice",
       "description": {
         "kind": "markdown",
-        "value": "Defines the name of data slice in DCE where the data from `value` will be propagated on `change` or by `slice-update` event\n\nOn: any component with `value` and associated change event"
+        "value": "Defines the name of data slice in DCE where the data from `value` will be propagated on `change` or by `slice-event` event\n\nOn: any component with `value` and associated change event"
       },
       "references": [
         {
@@ -15,7 +15,7 @@
       ]
     },
     {
-      "name": "slice-update",
+      "name": "slice-event",
       "description": {
         "kind": "markdown",
         "value": "Defines the event name on which `value` would be synchronized with DCE slice\n\nOn: any component with `value` and associated change event"
@@ -26,6 +26,19 @@
           "url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
         }
       ]
+    },
+    {
+      "name": "slice-value",
+      "description": {
+        "kind": "markdown",
+        "value": "XPath expression to populate into the slice"
+      },
+      "references": [
+        {
+          "name": "Demo",
+          "url": "https://unpkg.com/@epa-wg/custom-element/demo/data-slices.html"
+        }
+      ]
     }
   ],
   "tags": [
@@ -84,6 +97,16 @@
           "url": "https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each"
         }
       ]
+    },
+    {
+      "name": "slice",
+      "description": "Synthetic element for defining the slice-attributed when more then one slice/event/value associated with parent element",
+      "references": [
+        {
+          "name": "README",
+          "url": "https://github.com/EPA-WG/custom-element/tree/develop?tab=readme-ov-file#interactivity-via-data-slice-triggered-by-events"
+        }
+      ]
     }
   ]
 }

package/ide/web-types-dce.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/web-types",
   "name": "@epa-wg/custom-element",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {
@@ -9,13 +9,18 @@
       "attributes": [
         {
           "name": "slice",
-          "description": "Defines the name of data slice in DCE where the data from `value` will be propagated on `change` or by `slice-update` event\n\nOn: any component with `value` and associated change event",
+          "description": "Defines the name of data slice in DCE where the data from `value` will be propagated on `change` or by `slice-event` event\n\nOn: any component with `value` and associated change event",
           "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
         },
         {
-          "name": "slice-update",
+          "name": "slice-event",
           "description": "Defines the event name on which `value` would be synchronized with DCE slice\n\nOn: any component with `value` and associated change event",
           "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
+        },
+        {
+          "name": "slice-value",
+          "description": "XPath expression to populate into the slice",
+          "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/data-slices.html"
         }
       ],
       "elements": [
@@ -91,6 +96,14 @@
               }
             }
           ]
+        },
+        {
+          "name": "slice",
+          "description": "Synthetic element for defining the slice-attributed when more then one slice/event/value associated with parent element",
+          "doc-url": "https://github.com/EPA-WG/custom-element/tree/develop?tab=readme-ov-file#interactivity-via-data-slice-triggered-by-events",
+          "attributes": [
+
+          ]
         }
       ]
     }

package/ide/web-types-xsl.json

@@ -1,7 +1,7 @@
 {
     "$schema": "http://json.schemastore.org/web-types",
     "name": "@epa-wg/custom-element",
-    "version": "0.0.18",
+    "version": "0.0.19",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/index.html

@@ -9,7 +9,7 @@
         @import "demo/demo.css";
     </style>
 </head>
-<body>
+<body xmlns:xhtml="http://www.w3.org/1999/xhtml">
 <nav>
     <h3><code>custom-element</code> demo</h3>
     <div><a href="https://github.com/EPA-WG/custom-element"
@@ -34,6 +34,7 @@
         <a href="./demo/hex-grid.html"          >hex grid lib       </a> |
         <a href="./demo/scoped-css.html"        >scoped CSS         </a> |
         <a href="./demo/parameters.html"        >attributes         </a> |
+        <a href="./demo/data-slices.html"       >data slices/events </a> |
         <a href="./demo/dom-merge.html"         >DOM merge on dynamic update </a>
     </section>
 </nav>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@epa-wg/custom-element",
-    "version": "0.0.18",
+    "version": "0.0.19",
     "description": "Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating",
     "browser": "custom-element.js",
     "module": "custom-element.js",