@epa-wg/custom-element 0.0.18 → 0.0.20

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.20/coverage/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.20/coverage/lcov-report/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.20/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.20",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/custom-element.js

@@ -7,9 +7,12 @@ 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; }
+,   removeChildren = n => { while(n.firstChild) n.firstChild.remove(); return n; }
+,   emptyNode = n => {  n.getAttributeNames().map( a => n.removeAttribute(a) ); return removeChildren(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 +93,32 @@ Json2Xml( o, tag )
         ret.push("/>");
     return ret.join('\n');
 }
+
+    export function
+obj2node( o, tag, doc )
+{   const t = typeof o;
+    if( t === 'function'){debugger}
+    if( t === 'string' )
+        return create(tag,o,doc);
+    if( t === 'number' )
+        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 +160,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 +241,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 +329,63 @@ 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') )
+        {   if( el.value === undefined)
+                s.removeAttribute('value')
+            else
+                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( v === null || v === undefined )
+                [...s.childNodes].filter(n=>n.localName!=='event').map(n=>n.remove());
+            else
+                if( isString(v) )
+                    s.append( createText( d, v) );
+                else
+                    s.append( obj2node(v,'value',s.ownerDocument) )
+        }
+    })
 }
 
 function forEach$( el, css, cb){
@@ -339,7 +426,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)
 {
@@ -364,6 +454,8 @@ export function assureUnique(n, id=0)
 }
 export function merge( parent, fromArr )
 {
+    if(!fromArr.length)
+        return removeChildren(parent);
     const id2old = {};
     for( let c of parent.childNodes)
     {   ASSERT( !id2old[c.dceId] );
@@ -374,26 +466,57 @@ export function merge( parent, fromArr )
             id2old[attr(c, 'data-dce-id') || 0] = c;
     }
     for( let e of [...fromArr] )
-    {
-        const o = id2old[ attr(e, 'data-dce-id') || e.dceId ];
+    {   const k = attr(e, 'data-dce-id') || e.dceId;
+        const o = id2old[ k ];
         if( o )
         {   if( isText(e) )
             {   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)
             }
+            delete id2old[ k ]
         }else
             parent.append( e )
     }
+    for( let v of Object.values(id2old) )
+        v.remove();
 }
 export function assureUID(n,attr)
 {   if( !n.hasAttribute(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 +559,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 +586,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 +593,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 +606,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 +618,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 +627,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 +642,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,70 @@
 <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="../local-storage.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="url-string" slice-value="'https://pokeapi.co/api/v2/pokemon?limit=6'" slice-event="click"
+                >⬇️https://pokeapi.co/api/v2/pokemon?limit=6</button>
+            <input slice="url-string" value="{ //url-string ?? '' }" style="width:100%"/>
+            <button slice="fetch-url" slice-event="click" slice-value="//url-string"> GET </button>
+            <http-request
+                url="{//fetch-url}"
+                slice="request_slice"
+                type="text"
+                mode="cors"
+                ></http-request>
+            //fetch-url : <code>{//fetch-url}</code>
+<!--            <for-each select="//slice/request_slice/value/*">-->
+<!--                <ul>-->
+<!--                    <var data-testid="request-section"><value-of select='name(.)'/></var>-->
+<!--                    <for-each select="@*">-->
+<!--                        <div>-->
+<!--                            <var data-testid="section-attribute">@<value-of select='local-name(.)'/></var>-->
+<!--                            =-->
+<!--                            <code><value-of select='.'/></code>-->
+<!--                        </div>-->
+<!--                    </for-each>-->
+<!--                </ul>-->
+<!--            </for-each>-->
+        </template>
+    </custom-element>
 
 </body>
 </html>