@epa-wg/custom-element 0.0.6 → 0.0.8

package/README.md

@@ -8,7 +8,11 @@ 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]
-[![NPM version][npm-image]][npm-url] [![coverage][coverage-image]][coverage-url]
+| [Chrome devtools pugin][plugin-url]
+
+[![NPM version][npm-image]][npm-url] 
+[![coverage][coverage-image]][coverage-url] 
+[![Published on webcomponents.org][webcomponents-img]][webcomponents-url]
 
 # use
 ## install
@@ -16,16 +20,13 @@ use via CDN
 ```html
 <script type="module" src="https://unpkg.com/@epa-wg/custom-element@0.0/custom-element.js"></script>
 ```
-NPM
+NPM, yarn
 ```shell
 npm i -P @epa-wg/custom-element
-```
-yarn
-```shell
 yarn add @epa-wg/custom-element
 ```
 
-## [Live demo][demo-url]
+## [Live demo 🔗][demo-url]
 ```html
 <custom-element tag="pokemon-tile" hidden>
     <h3><xsl:value-of select="title"/></h3> <!-- title is an attribute in instance
@@ -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,7 +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.6/coverage/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.6/coverage/lcov-report/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.6/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.d.ts

@@ -1,4 +1,4 @@
-export function log(x: any): void;
-export class CustomElement extends HTMLElement {
-}
-export default CustomElement;
+export function log(x: any): void;
+export class CustomElement extends HTMLElement {
+}
+export default CustomElement;

package/custom-element.js

@@ -1,81 +1,195 @@
-const XML_DECLARATION = '<?xml version="1.0" encoding="UTF-8"?>'
-, 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;
-}
-function xml2dom( xmlString )
-{
-    return new DOMParser().parseFromString( XML_DECLARATION + xmlString, "application/xml" )
-}
-function bodyXml( dce )
-{   const s = new XMLSerializer().serializeToString( dce );
-    return s.substring( s.indexOf( '>' ) + 1, s.lastIndexOf( '<' ) );
-}
-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  )
-{
-    const inject = ( tag, parent, s ) =>
-                {
-                    parent.append( s = create( tag ) );
-                    return s;
-                };
-    const l = inject( sectionName, root );
-    [ ...arr ].forEach( e => l.append( cb(e) ) );
-}
-function assureSlot( e )
-{   if( !e.slot )
-    {   if( !e.setAttribute )
-            e = create( 'span', e.textContent.replaceAll('\n','') );
-        e.setAttribute( 'slot', '' )
-    }
-    return e;
-}
-export class CustomElement extends HTMLElement
-{
-    constructor()
-    {   super();
-
-        [ ...this.getElementsByTagName( 'slot' ) ].forEach( slot2xsl );
-        const p = new XSLTProcessor();
-        p.importStylesheet( xml2dom( `<xsl:stylesheet version="1.0"
-    xmlns:xsl="${XSL_NS_URL}">
-  <xsl:output method="html" />
-
-  <xsl:template match="/">
-    <xsl:apply-templates select="//attributes"/>
-  </xsl:template>
-  <xsl:template match="attributes">
-    ${ bodyXml(this) }
-  </xsl:template>
-
-</xsl:stylesheet>` ) );
-        const tag =  this.getAttribute( 'tag' );
-        tag && window.customElements.define( tag, class extends HTMLElement
-        {
-            constructor()
-            {
-                super();
-                const x = create( 'div' );
-                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 f = p.transformToFragment( x, document );
-                this.innerHTML = '';
-                [...f.childNodes].forEach(e=>this.appendChild(e));
-            }
-        });
-    }
-}
-
-window.customElements.define( 'custom-element', CustomElement );
-export default CustomElement;
+const XML_DECLARATION = '<?xml version="1.0" encoding="UTF-8"?>'
+,     XSL_NS_URL      = 'http://www.w3.org/1999/XSL/Transform';
+
+// const log = x => console.debug( new XMLSerializer().serializeToString( x ) );
+
+const attr = (el, attr)=> el.getAttribute(attr)
+,   create = ( tag, t = '' ) => ( e => ((e.innerText = t||''),e) )(document.createElement( tag ));
+
+    function
+xml2dom( xmlString )
+{
+    return new DOMParser().parseFromString( XML_DECLARATION + xmlString, "application/xml" )
+}
+
+    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 sanitize( s.substring( s.indexOf( '>' ) + 1, s.lastIndexOf( '<' ) ) );
+}
+
+    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 )
+{
+    const inject = ( tag, parent, s ) =>
+    {
+        parent.append( s = create( tag ) );
+        return s;
+    };
+    const l = inject( sectionName, root );
+    [ ...arr ].forEach( e => l.append( cb( e ) ) );
+    return l;
+}
+
+    function
+assureSlot( e )
+{
+    if( !e.slot )
+    {
+        if( !e.setAttribute )
+            e = create( 'span', e.textContent.replaceAll( '\n', '' ) );
+        e.setAttribute( 'slot', '' )
+    }
+    return e;
+}
+
+    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.templateNode.querySelectorAll('slot') ].forEach( slot2xsl );
+        const p = new XSLTProcessor();
+        p.importStylesheet( this.xslt );
+        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()
+            {
+                super();
+                const x = create( 'div' );
+                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 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 xsltString()
+    {
+        return (
+`<xsl:stylesheet version="1.0"
+    xmlns:xsl="${ XSL_NS_URL }">
+  <xsl:output method="html" />
+
+  <xsl:template match="/">
+    <xsl:apply-templates select="//attributes"/>
+  </xsl:template>
+  <xsl:template match="attributes">
+    ${ bodyXml( this ) }
+  </xsl:template>
+
+</xsl:stylesheet>` );
+    }
+    get xslt(){ return xml2dom( this.xsltString ); }
+}
+
+window.customElements.define( 'custom-element', 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

@@ -1,150 +1,152 @@
-<!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>
-<nav>
-    <h3><code>custom-element</code> demo</h3>
-    <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>
-    </div>
-    <p>
-        This <em>Declarative Custom Element</em> allows to define<br/>
-        custom HTML tag with template filled from slots, attributes, dataset. </p>
-    <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>
-</nav>
-<html-demo-element legend="1. simple payload"
-                   description="payload is ignored as in DCE definition there is no default slot">
-    <template>
-        <custom-element tag="dce-link" hidden>
-          <a href="#">link 😃</a>
-        </custom-element>
-        <dce-link><i>🍋</i></dce-link>
-    </template>
-</html-demo-element>
-
-<html-demo-element legend="2. payload with slot definition and slot value"
-                   description="slots are filled as in template+shadow root">
-    <template>
-        <custom-element tag="dce-1-slot" hidden>
-           <slot name="slot1"> 😃</slot>
-        </custom-element>
-        <dce-1-slot><i slot="slot1">🥕</i></dce-1-slot>
-    </template>
-</html-demo-element>
-
-<html-demo-element legend="2a. payload with slot definition and slot value"
-                   description="same slot can be used multiple times unlike in TEMPLATE">
-    <template>
-        <custom-element tag="dce-2-slots" hidden>
-           <slot name="slot2"> 😃</slot> and again:
-           <slot name="slot2"> 😃</slot>
-        </custom-element>
-        <dce-2-slots><i slot="slot2">🥕</i></dce-2-slots>
-    </template>
-</html-demo-element>
-
-<html-demo-element legend="2b. named default slot"
-                   description="slot without `name` attribute or with blank value `name=''` use whole payload">
-    <template>
-        <custom-element tag="dce-3-slot" hidden>
-           #1
-            <slot name=""> 😃</slot>
-           and
-           <slot> 😃</slot>
-        </custom-element>
-        <dce-3-slot><i slot="">🥕</i></dce-3-slot>
-    </template>
-</html-demo-element>
-
-<html-demo-element legend="2c. named default slot"
-                   description="slot without `name` attribute or with blank value `name=''` use whole payload">
-    <template>
-        <custom-element tag="dce-4-slot" hidden>
-           #2
-            <slot name=""> 😃</slot>
-           and
-           <slot> 😃</slot>
-        </custom-element>
-        <dce-4-slot>🥕</dce-4-slot>
-    </template>
-</html-demo-element>
-<html-demo-element legend="2d. default slot"
-                   description="slot without `name` attribute use whole payload">
-    <template>
-
-        <custom-element tag="greet-element" hidden>
-          <slot> Hello </slot> World!
-        </custom-element>
-        <greet-element>👋</greet-element>
-    </template>
-</html-demo-element>
-
-<html-demo-element legend="3. 💪 DCE template "
-                   description="Complex case with slots, attributes, dataset, conditional render">
-    <template>
-
-        <custom-element tag="pokemon-tile" hidden>
-            <h3><xsl:value-of select="title"/></h3> <!-- title is an attribute in instance
-                                                         mapped into /*/attributes/title -->
-            <xsl:if test="//smile">                 <!-- data-smile DCE instance attribute,
-                                                         mapped into /*/dataset/smile
-                                                         used in condition -->
-                                                    <!-- data-smile DCE instance attribute, used as HTML -->
-                <div>Smile as: <xsl:value-of select='//smile'/></div>
-            </xsl:if>
-            <!-- image would not be visible in sandbox, see live demo -->
-            <img src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{pokemon-id}.svg"
-                 alt="{title} image"/>
-                                                    <!-- image-src and title are DCE instance attributes,
-                                                         mapped into /*/attributes/
-                                                         used within output attribute via curly brackets -->
-
-                                                    <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
-            <p><slot name="description"><i>description is not available</i></slot></p>
-            <xsl:for-each select="//*[@pokemon-id]">
-                                                    <!-- loop over payload elements with `pokemon-id` attribute -->
-                <button>
-                    <img height="32"
-                        src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg"
-                        alt="{text()}"/>
-                    <br/>
-                    <xsl:value-of select='text()'/>
-                </button>
-
-            </xsl:for-each>
-        </custom-element>
-
-        <pokemon-tile title="bulbasaur" data-smile="👼" pokemon-id="1" >
-            <p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
-                the seed grows in size as the Pokémon  does.</p>
-            <ul>
-                <li pokemon-id="2">ivysaur</li>
-                <li pokemon-id="3">venusaur</li>
-            </ul>
-        </pokemon-tile>
-
-        <pokemon-tile title="ninetales" pokemon-id="38" >
-                <li pokemon-id="37">vulpix</li>
-        </pokemon-tile>
-    </template>
-</html-demo-element>
-
-<script type="module" src="https://unpkg.com/html-demo-element@1.0/html-demo-element.js"></script>
-
-</body>
-</html>
+<!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>
+        @import "demo/demo.css";
+    </style>
+</head>
+<body>
+<nav>
+    <h3><code>custom-element</code> demo</h3>
+    <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/>
+        custom HTML tag with template filled from slots, attributes, dataset. </p>
+    <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">
+    <template>
+        <custom-element tag="dce-link" hidden>
+          <a href="#">link 😃</a>
+        </custom-element>
+        <dce-link><i>🍋</i></dce-link>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="2. payload with slot definition and slot value"
+                   description="slots are filled as in template+shadow root">
+    <template>
+        <custom-element tag="dce-1-slot" hidden>
+           <slot name="slot1"> 😃</slot>
+        </custom-element>
+        <dce-1-slot><i slot="slot1">🥕</i></dce-1-slot>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="2a. payload with slot definition and slot value"
+                   description="same slot can be used multiple times unlike in TEMPLATE">
+    <template>
+        <custom-element tag="dce-2-slots" hidden>
+           <slot name="slot2"> 😃</slot> and again:
+           <slot name="slot2"> 😃</slot>
+        </custom-element>
+        <dce-2-slots><i slot="slot2">🥕</i></dce-2-slots>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="2b. named default slot"
+                   description="slot without `name` attribute or with blank value `name=''` use whole payload">
+    <template>
+        <custom-element tag="dce-3-slot" hidden>
+           #1
+            <slot name=""> 😃</slot>
+           and
+           <slot> 😃</slot>
+        </custom-element>
+        <dce-3-slot><i slot="">🥕</i></dce-3-slot>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="2c. named default slot"
+                   description="slot without `name` attribute or with blank value `name=''` use whole payload">
+    <template>
+        <custom-element tag="dce-4-slot" hidden>
+           #2
+            <slot name=""> 😃</slot>
+           and
+           <slot> 😃</slot>
+        </custom-element>
+        <dce-4-slot>🥕</dce-4-slot>
+    </template>
+</html-demo-element>
+<html-demo-element legend="2d. default slot"
+                   description="slot without `name` attribute use whole payload">
+    <template>
+
+        <custom-element tag="greet-element" hidden>
+          <slot> Hello </slot> World!
+        </custom-element>
+        <greet-element>👋</greet-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="3. 💪 DCE template "
+                   description="Complex case with slots, attributes, dataset, conditional render">
+    <template>
+
+        <custom-element tag="pokemon-tile" hidden>
+            <h3><xsl:value-of select="title"/></h3> <!-- title is an attribute in instance
+                                                         mapped into /*/attributes/title -->
+            <xsl:if test="//smile">                 <!-- data-smile DCE instance attribute,
+                                                         mapped into /*/dataset/smile
+                                                         used in condition -->
+                                                    <!-- data-smile DCE instance attribute, used as HTML -->
+                <div>Smile as: <xsl:value-of select='//smile'/></div>
+            </xsl:if>
+            <!-- image would not be visible in sandbox, see live demo -->
+            <img src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{pokemon-id}.svg"
+                 alt="{title} image"/>
+                                                    <!-- image-src and title are DCE instance attributes,
+                                                         mapped into /*/attributes/
+                                                         used within output attribute via curly brackets -->
+
+                                                    <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
+            <p><slot name="description"><i>description is not available</i></slot></p>
+            <xsl:for-each select="//*[@pokemon-id]">
+                                                    <!-- loop over payload elements with `pokemon-id` attribute -->
+                <button>
+                    <img height="32"
+                        src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg"
+                        alt="{text()}"/>
+                    <br/>
+                    <xsl:value-of select='text()'/>
+                </button>
+
+            </xsl:for-each>
+        </custom-element>
+
+        <pokemon-tile title="bulbasaur" data-smile="👼" pokemon-id="1" >
+            <p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
+                the seed grows in size as the Pokémon  does.</p>
+            <ul>
+                <li pokemon-id="2">ivysaur</li>
+                <li pokemon-id="3">venusaur</li>
+            </ul>
+        </pokemon-tile>
+
+        <pokemon-tile title="ninetales" pokemon-id="38" >
+                <li pokemon-id="37">vulpix</li>
+        </pokemon-tile>
+    </template>
+</html-demo-element>
+
+<script type="module" src="https://unpkg.com/html-demo-element@1.0/html-demo-element.js"></script>
+
+</body>
+</html>

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.6",
+    "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>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,28 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="myValues">
-        <value>
-          <list size="14">
-            <item index="0" class="java.lang.String" itemvalue="nobr" />
-            <item index="1" class="java.lang.String" itemvalue="noembed" />
-            <item index="2" class="java.lang.String" itemvalue="comment" />
-            <item index="3" class="java.lang.String" itemvalue="noscript" />
-            <item index="4" class="java.lang.String" itemvalue="embed" />
-            <item index="5" class="java.lang.String" itemvalue="script" />
-            <item index="6" class="java.lang.String" itemvalue="dce-link" />
-            <item index="7" class="java.lang.String" itemvalue="dce-1-slot" />
-            <item index="8" class="java.lang.String" itemvalue="dce-2-slots" />
-            <item index="9" class="java.lang.String" itemvalue="greet-element" />
-            <item index="10" class="java.lang.String" itemvalue="pokemon-tile" />
-            <item index="11" class="java.lang.String" itemvalue="html-demo-element" />
-            <item index="12" class="java.lang.String" itemvalue="custom-element" />
-            <item index="13" class="java.lang.String" itemvalue="slot" />
-          </list>
-        </value>
-      </option>
-      <option name="myCustomValuesEnabled" value="true" />
-    </inspection_tool>
-  </profile>
-</component>

package/.idea/php.xml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="MessDetectorOptionsConfiguration">
-    <option name="transferred" value="true" />
-  </component>
-  <component name="PHPCSFixerOptionsConfiguration">
-    <option name="transferred" value="true" />
-  </component>
-  <component name="PHPCodeSnifferOptionsConfiguration">
-    <option name="transferred" value="true" />
-  </component>
-</project>

package/0/1.xml

@@ -1,23 +0,0 @@
-<div>
-    <payload>
-        <span slot="">
-            <br>
-            <br>
-        </span>
-        <p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;\n the seed
-            grows in size as the Pokémon does.
-        </p>
-        <span slot="">
-            <br>
-            <br>
-        </span>
-    </payload>
-    <attributes>
-        <title>bulbasaur</title>
-        <data-smile>👼</data-smile>
-        <image-src>https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/1.svg</image-src>
-    </attributes>
-    <dataset>
-        <smile>👼</smile>
-    </dataset>
-</div>

package/0/1.xsl

@@ -1,26 +0,0 @@
-<xsl:stylesheet version="1.0"
-    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
-  <xsl:output method="html" />
-
-  <xsl:template match="/">
-    <xsl:apply-templates select="//attributes"/>
-  </xsl:template>
-  <xsl:template match="attributes">
-
-            <h3><xsl:value-of select="title"></xsl:value-of></h3> <!-- title is an attribute in instance
-                                                         mapped into /*/attributes/title -->
-            <xsl:if test="//smile">                 <!-- data-smile DCE instance attribute,
-                                                         mapped into /*/dataset/smile
-                                                         used in condition -->
-                                                    <!-- data-smile DCE instance attribute, used as HTML -->
-                <div>Smile as: <xsl:value-of select="//smile"></xsl:value-of></div>
-            </xsl:if>
-            <img src="{image-src}" alt="{title}" />  <!-- image-src and title are DCE instance attributes,
-                                                         mapped into /*/attributes/
-                                                         used within output attribute via curly brackets -->
-                                                    <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
-            <p><value-of xmlns="http://www.w3.org/1999/XSL/Transform" select="//*[@slot=&quot;description&quot;]"/></p>
-
-  </xsl:template>
-
-</xsl:stylesheet>

package/0/a.html

@@ -1,42 +0,0 @@
-<!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{ display: flex; flex-wrap: wrap; align-content: stretch; gap: 1rem; }
-        dce-link,dce-1-slot,dce-2-slots,greet-element,pokemon-tile
-            { box-shadow: 0 0 0.5rem lime; padding: 1rem; display: inline-block;}
-    </style>
-</head>
-<body>
-        <custom-element tag="pokemon-tile" hidden>
-            <h3><xsl:value-of select="title"/></h3> <!-- title is an attribute in instance
-                                                         mapped into /*/attributes/title -->
-            <xsl:if test="//smile">                 <!-- data-smile DCE instance attribute,
-                                                         mapped into /*/dataset/smile
-                                                         used in condition -->
-                                                    <!-- data-smile DCE instance attribute, used as HTML -->
-                <div>Smile as: <xsl:value-of select='//smile'/></div>
-            </xsl:if>
-            <img src="{image-src}" alt="{title}"/>  <!-- image-src and title are DCE instance attributes,
-                                                         mapped into /*/attributes/
-                                                         used within output attribute via curly brackets -->
-                                                    <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
-            <p><slot name="description"><i>description is not available</i></slot></p>
-        </custom-element>
-        <pokemon-tile title="bulbasaur"
-                    data-smile="👼"
-                    image-src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/1.svg">
-
-            <p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
-                the seed grows in size as the Pokémon  does.</p>
-
-        </pokemon-tile>
-
-        <pokemon-tile title="ninetales"
-                    image-src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/38.svg">
-        </pokemon-tile>
-</body>
-</html>