@epa-wg/custom-element 0.0.7 → 0.0.8

package/.idea/custom-element.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/misc.xml

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

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/custom-element.iml" filepath="$PROJECT_DIR$/.idea/custom-element.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

package/README.md

@@ -8,6 +8,7 @@ It allows to define custom HTML tag with template filled from slots and attribut
 | Live demo: [custom-element][demo-url]
 | Try in [Sandbox][sandbox-url]
 | [tests project][git-test-url]
+| [Chrome devtools pugin][plugin-url]
 
 [![NPM version][npm-image]][npm-url] 
 [![coverage][coverage-image]][coverage-url] 
@@ -127,7 +128,50 @@ is available in `{}` in attributes, in `xsl:for-each`, `xsl:if`, `xsl:value-of`,
 
 XPath is a selector language to navigate over custom element instance data, attributes, and payload.
 
+## XSLT 1.0
+The in-browser native implementation as of now supports [XSLT 1.0](https://www.w3.org/TR/xslt-10/). 
+File the [change request](https://github.com/EPA-WG/custom-element/issues) for support of another XSLT version or 
+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.
+
+```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/@*)"/>
+</custom-element>
+```
+See [demo source](demo/local-storage.html) for detailed sample.
+
+## Chrome devtools plugin
+[@epa-wg/custom-element plugin][plugin-url] gives the view into
+
+* `current` selected in DOM inspector node
+* Parent `customElement`
+* Declarative Custom Element `dce` for custom element ^^
+
+* `datadom` for easier inspection
+* `xml` as a string
+* `xslt` as a string
+
+## template debugging
+`xml` and `xslt` can be saved to file via for "_copy string contents_" into clipboard.
+
+The XSLT debugger from your favorite IDE can set the breakpoints withing those files and 
+run transformation under debugger.
+
+
 ## `{}` does not give a value
 * 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
@@ -141,9 +185,10 @@ 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.7/coverage/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.7/coverage/lcov-report/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.7/storybook-static/index.html?path=/story/welcome--introduction
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.8/coverage/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.8/coverage/lcov-report/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.8/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
+[plugin-url]:     https://chrome.google.com/webstore/detail/epa-wgcustom-element/hiofgpmmkdembdogjpagmbbbmefefhbl

package/custom-element.js

@@ -1,34 +1,40 @@
 const XML_DECLARATION = '<?xml version="1.0" encoding="UTF-8"?>'
-    , XSL_NS_URL      = 'http://www.w3.org/1999/XSL/Transform';
+,     XSL_NS_URL      = 'http://www.w3.org/1999/XSL/Transform';
 
 // const log = x => console.debug( new XMLSerializer().serializeToString( x ) );
 
-const create = ( tag, t = '' ) =>
-{
-    const e = document.createElement( tag );
-    if( t ) e.innerText = t;
-    return e;
-}
+const attr = (el, attr)=> el.getAttribute(attr)
+,   create = ( tag, t = '' ) => ( e => ((e.innerText = t||''),e) )(document.createElement( tag ));
 
-function xml2dom( xmlString )
+    function
+xml2dom( xmlString )
 {
     return new DOMParser().parseFromString( XML_DECLARATION + xmlString, "application/xml" )
 }
 
-function bodyXml( dce )
+    function
+bodyXml( dce )
 {
+    const t = dce.firstElementChild
+    , sanitize = s => s.replaceAll("<html:","<")
+                       .replaceAll("</html:","</");
+    if( t?.tagName === 'TEMPLATE')
+        return sanitize( new XMLSerializer().serializeToString( t.content ) );
+
     const s = new XMLSerializer().serializeToString( dce );
-    return s.substring( s.indexOf( '>' ) + 1, s.lastIndexOf( '<' ) );
+    return sanitize( s.substring( s.indexOf( '>' ) + 1, s.lastIndexOf( '<' ) ) );
 }
 
-function slot2xsl( s )
+    function
+slot2xsl( s )
 {
     const v = document.createElementNS( XSL_NS_URL, 'value-of' );
     v.setAttribute( 'select', `//*[@slot="${ s.name }"]` );
     s.parentNode.replaceChild( v, s );
 }
 
-function injectData( root, sectionName, arr, cb )
+    function
+injectData( root, sectionName, arr, cb )
 {
     const inject = ( tag, parent, s ) =>
     {
@@ -37,9 +43,11 @@ function injectData( root, sectionName, arr, cb )
     };
     const l = inject( sectionName, root );
     [ ...arr ].forEach( e => l.append( cb( e ) ) );
+    return l;
 }
 
-function assureSlot( e )
+    function
+assureSlot( e )
 {
     if( !e.slot )
     {
@@ -50,17 +58,61 @@ function assureSlot( e )
     return e;
 }
 
-export class CustomElement extends HTMLElement
+    export function
+Json2Xml( o, tag )
+{
+    if( typeof o === 'string' )
+        return o;
+
+    const noTag = "string" != typeof tag;
+
+    if( o instanceof Array )
+    {   noTag &&  (tag = 'array');
+        return "<"+tag+">"+o.map(function(el){ return Json2Xml(el,tag); }).join()+"</"+tag+">";
+    }
+    noTag &&  (tag = 'r');
+    tag=tag.replace( /[^a-z0-9]/gi,'_' );
+    var oo  = {}
+        ,   ret = [ "<"+tag+" "];
+    for( var k in o )
+        if( typeof o[k] == "object" )
+            oo[k] = o[k];
+        else
+            ret.push( k.replace( /[^a-z0-9]/gi,'_' ) + '="'+o[k].toString().replace(/&/gi,'&#38;')+'"');
+    if( oo )
+    {   ret.push(">");
+        for( var k in oo )
+            ret.push( Json2Xml( oo[k], k ) );
+        ret.push("</"+tag+">");
+    }else
+        ret.push("/>");
+    return ret.join('\n');
+}
+
+    function
+injectSlice( x, s, data )
+{
+    const     el = create(s)
+    ,   isString = typeof data === 'string' ;
+    el.innerHTML = isString? data : Json2Xml( data, s );
+    const  slice = isString? el : el.firstChild;
+    [...x.children].filter( e=>e.localName === s ).map( el=>el.remove() );
+        x.append(slice);
+}
+
+    export class
+CustomElement extends HTMLElement
 {
     constructor()
     {
         super();
 
-        [ ...this.getElementsByTagName( 'slot' ) ].forEach( slot2xsl );
+        [ ...this.templateNode.querySelectorAll('slot') ].forEach( slot2xsl );
         const p = new XSLTProcessor();
         p.importStylesheet( this.xslt );
-        const tag = this.getAttribute( 'tag' );
+        const tag = attr( this, 'tag' );
         const dce = this;
+        const sliceNames = [...this.templateNode.querySelectorAll('[slice]')].map(e=>attr(e,'slice'));
         tag && window.customElements.define( tag, class extends HTMLElement
         {
             constructor()
@@ -70,18 +122,59 @@ export class CustomElement extends HTMLElement
                 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.xml = x;
-                const f = p.transformToFragment( x, document );
-                this.innerHTML = '';
-                [ ...f.childNodes ].forEach( e => this.appendChild( e ) );
+                const slices = {};
+
+
+                const sliceEvents=[];
+                const applySlices = ()=>
+                {   const processed = {}
+
+                    for(let ev; ev =  sliceEvents.pop(); )
+                    {   const s = attr( ev.target, 'slice');
+                        if( processed[s] )
+                            continue;
+                        injectSlice( sliceRoot, s, ev.detail );
+                        processed[s] = ev;
+                    }
+                    Object.keys(processed).length !== 0 && transform();
+                }
+                let timeoutID;
+
+                const onSlice = ev=>
+                {   ev.stopPropagation?.();
+                    sliceEvents.push(ev);
+                    if( !timeoutID )
+                        timeoutID = setTimeout(()=>
+                        {   applySlices();
+                            timeoutID =0;
+                        },10);
+                };
+                this.onSlice = onSlice;
+                const transform = ()=>
+                {
+                    const f = p.transformToFragment( x, document );
+                    this.innerHTML = '';
+                    [ ...f.childNodes ].forEach( e => this.appendChild( e ) );
+
+                    for( let el of this.querySelectorAll('[slice]') )
+                        if( 'function' === typeof el.sliceInit )
+                        {   const s = attr(el,'slice');
+                            slices[s] = el.sliceInit( slices[s] );
+                        }
+                };
+                transform();
+                applySlices();
             }
             get dce(){ return dce;}
         } );
     }
+    get templateNode(){ return this.firstElementChild?.tagName === 'TEMPLATE'? this.firstElementChild.content : this }
     get dce(){ return this;}
-    get xslt()
+    get xsltString()
     {
-        return xml2dom(
+        return (
 `<xsl:stylesheet version="1.0"
     xmlns:xsl="${ XSL_NS_URL }">
   <xsl:output method="html" />
@@ -95,7 +188,8 @@ export class CustomElement extends HTMLElement
 
 </xsl:stylesheet>` );
     }
+    get xslt(){ return xml2dom( this.xsltString ); }
 }
 
 window.customElements.define( 'custom-element', CustomElement );
-export default CustomElement;
+export default CustomElement;

package/datasource.md

@@ -0,0 +1,64 @@
+<h1>DRAFT</h1>
+
+# Data Sourse (DS) and transformation pipeline
+
+The DS is the data provider for template and DCE. It defines the way to retrieve the data, does the data fetch and 
+notifies the template owner on data availability. 
+# DS types
+The data samples which are needed for Declarative Web Application would include 
+* remote data available over HTTP from URL, request parameters, and HTTP headers
+* embedded into page data island(s) available over `#` anchors
+* variety of storages including localStorage/sesionStorage
+* web application properties like URI, app settings, import maps, etc.
+
+# DS Life cycle 
+## 1. Declaration
+resides within template with the parameters populated by expression from template owner data.
+```html
+<custom-element>
+    <local-storage key="{app/url/host}/key1" name="slice1"></local-storage>
+</custom-element>
+```
+
+## 2. DataRequest Rendering iterations
+DS initiated as DataRequest(**DR**) by [load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event)
+event. It starts its lifecycle as async process which emitted to itself as "process" event which bubbles uo to template holder. 
+
+The process event passes 3 parameters:
+* DS name
+* data
+* state 
+
+Initially the state is "initiated" with default or no data, then "progress" with partial data, and in the end "completed" with final data. 
+Process owner (template renderer) would populate the passed data slices into dataset and mark itself as "dirty" , i.e candidate for re-render upon finalizing the "pre-render" phase. 
+
+## 3. final transformation
+The DS can be instant routine which immediately return the final state. Sample of such is app settings. 
+
+DS with finite steps is any remote call.
+
+DS which is never ending samples are localStorage, application URL, clipboard, etc.
+
+The transformation owner (DCE, include, etc.) would track the Data Request state change and keep re-rendering on each 
+state change. This DR state change notification is the custom event which bubbles up to the transformation owner.
+
+# Browser events vs API
+In environments where the data sources custom elements and lifecycle events are not available, the transformation 'owner'
+would be able to track data sources and generate new stream for each data state change. The following sequence of 
+data loading and transformations would work even for PDF rendering.
+
+1. transformation process (TP) would start the XSLT processing
+2. on DS branch it would 
+   * check the DS state by unique id(XPath?) in the template state.
+   * if DS not yet initialized, 
+     * create the data request(DR) object
+     * DR is a process which continue to live in own thread and starts data retrieval.
+     * DR, provides its state and data to transformation via data slice
+     * DS data slice is set on the TP by the name with initial default value
+     * notify the TR to mark the DR `incomplete`
+     * finish transformation with blank data
+3. when DR receives data or state change, it would notify the TR to mark the DR `incomplete`
+4. TP would re-trigger the transformation on each DR state change. 
+5. the transformation with all DRs in final state(error or completed) is counted as last.
+It is up to implementation to break the current transformation when the any of DR status changes. 
+Depend of application, either final or the sequence of rendered transforms could be used. 

package/demo/demo.css

@@ -0,0 +1,19 @@
+html
+{   font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
+    font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased;
+}
+body,nav{ display: flex; flex-wrap: wrap; align-content: stretch; gap: 1rem; }
+body>*{flex: auto;}
+nav{ flex-direction: column;}
+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
+{ box-shadow: 0 0 0.5rem lime; padding: 1rem; display: inline-block; flex:1; }
+dd{ padding: 1rem;}
+p{ margin: 0;}
+
+
+html-demo-element h3
+{   text-shadow: 0 0 0.25em white;
+    letter-spacing: 0.1rem;
+}
+*[slot="demo"]{ display: flex; gap: 1rem; flex-wrap: wrap; }

package/demo/http-request.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:html="http://www.w3.org/1999/xhtml">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>http-request Declarative Custom Element implementation demo</title>
+    <script type="module" src="../http-request.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 0px 0px 1rem; min-width: 12rem; padding: 1rem;
+            color: coral; text-shadow: 1px 1px silver; font-weight: bolder;
+        }
+        button img{ max-height: 10vw; min-height: 4rem;}
+        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; }
+        dce-1{ padding: 0; display: flex; flex-wrap: wrap;}
+        code{ text-align: right; min-width: 3rem;}
+    </style>
+</head>
+<body>
+
+
+<html-demo-element legend="1. http-request simplest"
+                   description="load the list of pokemons">
+    <p>Should display 6 image buttons with pokemon name </p>
+    <template>
+<custom-element tag="dce-1" hidden>
+    <template><!-- wrapping into template to prevent images loading within DCE declaration -->
+        <http-request
+            url="https://pokeapi.co/api/v2/pokemon?limit=6&offset=0"
+            slice="page"
+            ></http-request>
+        <xsl:for-each select="//slice/page/data/results/*">
+            <xsl:variable name="slides-url"
+                >https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world</xsl:variable>
+            <xsl:variable name="pokeid"
+                select="substring-before( substring-after( @url, 'https://pokeapi.co/api/v2/pokemon/'),'/')"
+                ></xsl:variable>
+            <button>
+                <img src="{$slides-url}/{$pokeid}.svg"
+                     alt="{@name}"/>
+                <xsl:value-of select='@name'/>
+            </button>
+        </xsl:for-each>
+    </template>
+</custom-element>
+<dce-1></dce-1>
+    </template>
+</html-demo-element>
+
+
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
+</body>
+</html>

package/demo/local-storage.html

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 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>
+    <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; }
+    </style>
+</head>
+<body>
+
+
+<html-demo-element legend="1. localStorage simplest"
+                   description="local-storage read only during initial and only render, does not track the changes.">
+    <p>Has to produce 12🍒</p>
+    <template>
+        <custom-element tag="dce-1" hidden>
+            <xsl:value-of select="//slice/fruits/text()"></xsl:value-of>
+           <slot>🤔</slot>
+            <local-storage key="cherries" slice="fruits"></local-storage>
+        </custom-element>
+        <dce-1>🍒</dce-1>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="2. localStorage basket JSON "
+                   description="local-storage tracks changes">
+    <p>Click the fruits button to add into cart </p>
+    <template>
+        <custom-element tag="dce-2" hidden>
+            <local-storage key="basket" slice="basket" live type="json"></local-storage>
+            <html:table>
+                <xsl:for-each select="//slice/basket/@*">
+                    <html:tr>
+                        <html:th><xsl:value-of select="name()"/></html:th>
+                        <html:td><xsl:value-of select="."/></html:td>
+                    </html:tr>
+                </xsl:for-each>
+                <html:tfoot>
+                    <html:tr>
+                        <html:td><slot>🤔</slot></html:td>
+                        <html:th><xsl:value-of select="sum(//slice/basket/@*)"/></html:th>
+                    </html:tr>
+                </html:tfoot>
+            </html:table>
+        </custom-element>
+        <dce-2>🛒total</dce-2>
+    </template>
+</html-demo-element>
+
+<fieldset>
+    <legend>localStorage content</legend>
+    <p>The demo should display count 1🍋 and 12🍒 initially.
+        The value in <code>localStorage</code> is incremented
+        when clicked on matching button
+    </p>
+    <button name="lemons" value="1"     >🍋</button>
+    <button name="cherries" value="12"  >🍒</button>
+    <button name="apple"                >🍏</button>
+    <button name="banana"               >🍌</button>
+    <table>
+        <caption> Click to add the localStorage value </caption>
+        <thead><tr><th>key</th><th>value</th></tr></thead>
+        <tbody id="local-storage-values"></tbody>
+    </table>
+</fieldset>
+<script type="module">
+    import $ from 'https://unpkg.com/css-chain@1/CssChain.js';
+
+    const basket = {cherries: 12, lemons:1 };
+    localStorage.setItem( 'basket', JSON.stringify(basket) );
+
+    $('button[name]')
+        .forEach( b=> localStorage.setItem( b.name, b.value ) )
+        .addEventListener( 'click', e =>
+        {   const k = e.target.name;
+            basket[k] || (basket[k] = 1);
+            localStorage.setItem( k, basket[k] = 1+1*localStorage[k] )
+            localStorage.setItem( 'basket', JSON.stringify(basket) );
+        } );
+
+    const renderStorage = () =>
+        window[ 'local-storage-values' ].innerHTML = [...Array(localStorage.length).keys()]
+            .map( k => `<tr><th>${ localStorage.key(k) }</th><td>${ localStorage.getItem( localStorage.key(k) ) }</td>` ).join( '\n' );
+
+    window.addEventListener( 'storage', renderStorage );
+    window.addEventListener( 'local-storage', renderStorage );
+    renderStorage();
+</script>
+
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
+</body>
+</html>

package/http-request.js

@@ -0,0 +1,44 @@
+const     attr = (el, attr)=> el.getAttribute(attr);
+
+export class HttpRequestElement extends HTMLElement
+{
+    // @attribute url
+    constructor() {
+        super();
+    }
+    sliceInit( s )
+    {   if( !s )
+            s = {};
+        s.element = this;
+        if( s.destroy )
+            return s;
+        const controller = new AbortController();
+        s.destroy = ()=>
+        {   // todo destroy slices in custom-element
+            controller.abort();
+        };
+        const     url = attr(this, 'url') || ''
+        ,     request = { url }
+        ,       slice = { detail: { request }, target: this }
+        , updateSlice = slice =>
+        {   for( let parent = s.element.parentElement; parent; parent = parent.parentElement )
+                if ( parent.onSlice )
+                    return parent.onSlice(slice);
+            console.error(`${this.localName} used outside of custom-element`)
+            debugger;
+        };
+
+        setTimeout( async ()=>
+        {   updateSlice( slice );
+            slice.detail.response = await fetch(url,{ signal: controller.signal });
+            updateSlice( slice );
+            slice.detail.data = await slice.detail.response.json();
+            updateSlice( slice );
+        },0 );
+
+        return s;
+    }
+}
+
+window.customElements.define( 'http-request', HttpRequestElement );
+export default HttpRequestElement;

package/index.html

@@ -5,12 +5,7 @@
     <title>custom-element Declarative Custom Element implementation demo</title>
     <script type="module" src="custom-element.js"></script>
     <style>
-        body,nav{ display: flex; flex-wrap: wrap; align-content: stretch; gap: 1rem; }
-        nav{ flex-direction: column;}
-        dce-link,dce-1-slot,dce-2-slot,dce-3-slot,dce-4-slot,dce-2-slots,greet-element,pokemon-tile
-            { box-shadow: 0 0 0.5rem lime; padding: 1rem; display: inline-block;}
-        dd{ padding: 1rem;}
-        p{ margin: 0;}
+        @import "demo/demo.css";
     </style>
 </head>
 <body>
@@ -19,6 +14,8 @@
     <div><a href="https://github.com/EPA-WG/custom-element"
         ><img src="https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg" alt="icon">GIT</a>
         | <a href="https://stackblitz.com/github/EPA-WG/custom-element?file=index.html">Sandbox</a>
+        | <a href="https://chrome.google.com/webstore/detail/epa-wgcustom-element/hiofgpmmkdembdogjpagmbbbmefefhbl"
+            >Chrome devtools plugin</a>
     </div>
     <p>
         This <em>Declarative Custom Element</em> allows to define<br/>
@@ -26,6 +23,11 @@
     <p>The template is fully loaded with variables, conditions, loops, etc. <br/>
         The data query is powered by XPath. </p>
     <p>Try in <a href="https://stackblitz.com/github/EPA-WG/custom-element?file=index.html" >Sandbox</a> </p>
+    <section>
+    <b>Data layer demo</b>
+        <a href="./demo/local-storage.html">local-storage</a> |
+        <a href="./demo/http-request.html">http-request</a>
+    </section>
 </nav>
 <html-demo-element legend="1. simple payload"
                    description="payload is ignored as in DCE definition there is no default slot">

package/local-storage.js

@@ -0,0 +1,66 @@
+const     attr = (el, attr)=> el.getAttribute(attr)
+, string2value = (type, v) =>
+{   if( type === 'text')
+        return v;
+    if( type === 'json')
+        return JSON.parse( v );
+    const el = document.createElement('input');
+    el.setAttribute('type',type);
+    el.setAttribute('value', v );
+    return type==='number'? el.valueAsNumber : 'date|time|dateTimeLocal'.includes(type)? el.valueAsDate: el.value;
+};
+
+let originalSetItem;
+
+function ensureTrackLocalStorage()
+{   if( originalSetItem )
+        return;
+    originalSetItem = localStorage.setItem;
+    localStorage.setItem = function( key, value, ...rest )
+        {   originalSetItem.apply(this, [ key, value, ...rest ]);
+            window.dispatchEvent( new CustomEvent('local-storage',{detail:{key,value}}) );
+        };
+}
+
+export class LocalStorageElement extends HTMLElement
+{
+    // @attribute live - monitors localStorage change
+    // @attribute type - `text|json`, defaults to text, other types are compatible with INPUT field
+    constructor()
+    {
+        super();
+        const      state = {}
+        ,           type = attr(this, 'type') || 'text'
+        ,       listener = e=> e.detail.key === attr( this,'key' ) && propagateSlice()
+        , propagateSlice = ()=>
+        {   for( let parent = this.parentElement; parent; parent = parent.parentElement)
+                if( parent.onSlice )
+                    return parent.onSlice(
+                        {     detail: string2value( type, localStorage.getItem( attr( this, 'key' ) ) )
+                        ,     target: this
+                        } );
+                console.error(`${this.localName} used outside of custom-element`)
+                debugger;
+        };
+        this.sliceInit = s =>
+        {   if( !state.listener && this.hasAttribute('live') )
+            {   state.listener = 1;
+                window.addEventListener( 'local-storage', listener );
+                ensureTrackLocalStorage();
+            }
+            propagateSlice();
+            return s || {}
+        }
+        this._destroy = ()=>
+        {
+            if( !state.listener )
+                return;
+            state.listener && window.removeEventListener('local-storage', listener );
+            delete state.listener;
+        };
+    }
+    disconnectedCallback(){ this._destroy(); }
+}
+
+window.customElements.define( 'local-storage', LocalStorageElement );
+export default LocalStorageElement;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@epa-wg/custom-element",
-    "version": "0.0.7",
+    "version": "0.0.8",
     "description": "Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating",
     "browser": "custom-element.js",
     "module": "custom-element.js",
@@ -15,6 +15,7 @@
     "type": "module",
     "types": "./custom-element.d.ts",
     "scripts": {
+        "dev:help": "echo \"needed for sandbox demo\"",
         "dev": "bash bin/stackblitz.sh",
         "start": "npm i --no-save @web/dev-server && web-dev-server --node-resolve",
         "test": "echo \"test would reside in https://github.com/EPA-WG/custom-element-test\" && exit 0",

package/request.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>custom-element Declarative Custom Element implementation demo</title>
+    <script type="module" src="custom-element.js"></script>
+    <style>
+        body,nav{ display: flex; flex-wrap: wrap; align-content: stretch; gap: 1rem; }
+        nav{ flex-direction: column;}
+        dce-link,dce-1-slot,dce-2-slot,dce-3-slot,dce-4-slot,dce-2-slots,greet-element,pokemon-tile
+            { box-shadow: 0 0 0.5rem lime; padding: 1rem; display: inline-block;}
+        dd{ padding: 1rem;}
+        p{ margin: 0;}
+    </style>
+</head>
+<body>
+
+<html-demo-element legend="1. simple payload"
+                   description="payload is ignored as in DCE definition there is no default slot">
+    <template>
+        <custom-element tag="poke-image-request" hidden>
+          <img src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{//poke-id}.svg"/>
+        </custom-element>
+        <poke-image-request poke-id="1"></poke-image-request>
+
+        <custom-element tag="poke-list-request" hidden>
+            <a href="https://pokeapi.co/api/v2/pokemon?offset={//offset}&limit=10">list json</a>
+        </custom-element>
+
+        <custom-element tag="poke-list-page" hidden>
+            <a href="https://pokeapi.co/api/v2/pokemon?offset={//offset}&limit=10">list json</a>
+            <http-request-json
+                target="poke-list"
+                src="https://pokeapi.co/api/v2/pokemon?offset={//offset}&limit=10"
+                ></http-request-json>
+            <ol>
+                <xsl:for-each select="">
+
+                </xsl:for-each>
+            </ol>
+        </custom-element>
+        <poke-list-page>
+            <poke-list-request offset="0"></poke-list-request>
+        </poke-list-page>
+
+    </template>
+</html-demo-element>
+
+
+<script type="module" src="https://unpkg.com/html-demo-element@1.0/html-demo-element.js"></script>
+
+</body>
+</html>