@epa-wg/custom-element 0.0.8 → 0.0.10

package/README.md

@@ -1,8 +1,11 @@
 # custom-element
-`Declarative Custom Element` proof of concept as a part of [WCCG in Declarative custom elements](https://github.com/w3c/webcomponents-cg/issues/32#issuecomment-1321037301) 
-discussion.
+`Declarative Custom Element` is a part of pure `Declarative Web Application` stack. A proof of concept as a part of 
+[WCCG in Declarative custom elements](https://github.com/w3c/webcomponents-cg/issues/32#issuecomment-1321037301) 
+discussion. The functionality of DCE and its data access does not require programming using JavaScript. 
 
-It allows to define custom HTML tag with template filled from slots and attributes.
+It allows to define custom HTML tag with template filled from slots, attributes and data `slice` as of now from  
+[local-storage][local-storage-demo],  [http-request][http-request-demo], [location][location-demo].
+UI is re-rendered on each data slice change.
 
 [![git][github-image] GitHub][git-url]
 | Live demo: [custom-element][demo-url]
@@ -182,12 +185,15 @@ within template
 [git-url]:        https://github.com/EPA-WG/custom-element
 [git-test-url]:   https://github.com/EPA-WG/custom-element-test
 [demo-url]:       https://unpkg.com/@epa-wg/custom-element@0.0/index.html
+[local-storage-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/local-storage.html
+[http-request-demo]:  https://unpkg.com/@epa-wg/custom-element@0.0/demo/http-request.html
+[location-demo]:  https://unpkg.com/@epa-wg/custom-element@0.0/demo/location.html
 [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.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
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.10/coverage/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.10/coverage/lcov-report/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.10/storybook-static/index.html?path=/story/welcome--introduction
 [sandbox-url]:    https://stackblitz.com/github/EPA-WG/custom-element?file=index.html
 [webcomponents-url]: https://www.webcomponents.org/element/@epa-wg/custom-element
 [webcomponents-img]: https://img.shields.io/badge/webcomponents.org-published-blue.svg

package/custom-element.js

@@ -17,7 +17,9 @@ bodyXml( dce )
 {
     const t = dce.firstElementChild
     , sanitize = s => s.replaceAll("<html:","<")
-                       .replaceAll("</html:","</");
+                       .replaceAll("</html:","</")
+                       .replaceAll( />\s*<\/xsl:value-of>/g ,"/>")
+                       .replaceAll( />\s*<\/(br|hr|img|area|base|col|embed|input|link|meta|param|source|track|wbr)>/g ,"/>");
     if( t?.tagName === 'TEMPLATE')
         return sanitize( new XMLSerializer().serializeToString( t.content ) );
 
@@ -71,17 +73,17 @@ Json2Xml( o, tag )
         return "<"+tag+">"+o.map(function(el){ return Json2Xml(el,tag); }).join()+"</"+tag+">";
     }
     noTag &&  (tag = 'r');
-    tag=tag.replace( /[^a-z0-9]/gi,'_' );
+    tag=tag.replace( /[^a-z0-9\-]/gi,'_' );
     var oo  = {}
         ,   ret = [ "<"+tag+" "];
-    for( var k in o )
+    for( let 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;')+'"');
+            ret.push( k.replace( /[^a-z0-9\-]/gi,'_' ) + '="'+o[k].toString().replace(/&/gi,'&#38;')+'"');
     if( oo )
     {   ret.push(">");
-        for( var k in oo )
+        for( let k in oo )
             ret.push( Json2Xml( oo[k], k ) );
         ret.push("</"+tag+">");
     }else
@@ -92,12 +94,13 @@ Json2Xml( o, tag )
     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;
+    const isString = typeof data === 'string' ;
+
+    const el = isString
+        ? create(s, data)
+        : document.adoptNode( xml2dom( Json2Xml( data, s ) ).documentElement);
     [...x.children].filter( e=>e.localName === s ).map( el=>el.remove() );
-        x.append(slice);
+        x.append(el);
 }
 
     export class
@@ -142,7 +145,7 @@ CustomElement extends HTMLElement
                 }
                 let timeoutID;
 
-                const onSlice = ev=>
+                this.onSlice = ev=>
                 {   ev.stopPropagation?.();
                     sliceEvents.push(ev);
                     if( !timeoutID )
@@ -151,7 +154,6 @@ CustomElement extends HTMLElement
                             timeoutID =0;
                         },10);
                 };
-                this.onSlice = onSlice;
                 const transform = ()=>
                 {
                     const f = p.transformToFragment( x, document );

package/demo/http-request.html

@@ -3,6 +3,8 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>http-request Declarative Custom Element implementation demo</title>
+        <link rel="icon" href="./wc-square.svg" />
+
     <script type="module" src="../http-request.js"></script>
     <script type="module" src="../custom-element.js"></script>
     <style>
@@ -25,6 +27,9 @@
 </head>
 <body>
 
+<nav>
+    <a href=".."><h3><code>custom-element</code> demo</h3></a>
+</nav>
 
 <html-demo-element legend="1. http-request simplest"
                    description="load the list of pokemons">
@@ -35,6 +40,8 @@
         <http-request
             url="https://pokeapi.co/api/v2/pokemon?limit=6&offset=0"
             slice="page"
+            method="GET"
+            header-accept="application/json"
             ></http-request>
         <xsl:for-each select="//slice/page/data/results/*">
             <xsl:variable name="slides-url"
@@ -54,6 +61,65 @@
     </template>
 </html-demo-element>
 
+<html-demo-element legend="1. http-request headers"
+                   description="request and response headers access demo">
+
+    <template>
+            <custom-element
+                tag="headers-demo"
+                hidden
+                >
+<http-request
+    url="https://pokeapi.co/api/v2/pokemon?offset=6&limit=6"
+    slice="request_slice"
+    type="text"
+    mode="cors"
+    header-x-test="testing"
+    ></http-request>
+Content of <code>//slice/request_slice</code> is filled by <b>request</b> and <b>response</b>
+from <code>${url}</code>
+
+<h3>Samples</h3>
+<table>
+<tr><th>//slice/request_slice/request/headers/@mode</th>
+    <td><xsl:value-of select="//slice/request_slice/request/@mode"/></td></tr>
+<tr><th>//slice/request_slice/response/headers/@content-type</th>
+    <td><xsl:value-of select="//slice/request_slice/response/headers/@content-type"/></td></tr>
+<tr><th>//slice/request_slice/response/@status</th>
+    <td><xsl:value-of select="//slice/request_slice/response/@status"/></td></tr>
+</table>
+<xsl:for-each select="//slice/request_slice/*">
+    <ul data-request-section="{name(.)}">
+        <b data-testid="request-section"><xsl:value-of select='name(.)'/></b>
+        <xsl:for-each select="@*">
+            <div>
+                <var data-testid="section-attribute">@<xsl:value-of select='local-name(.)'/></var>
+                =
+                <code><xsl:value-of select='.'/></code>
+            </div>
+        </xsl:for-each>
+        <xsl:for-each select="*">
+            <div>
+                <b data-testid="section-deep"><xsl:value-of select='local-name(.)'/></b>
+                <ul>
+                    <xsl:for-each select="@*">
+                        <li>
+                            <var data-testid="section-attribute">@<xsl:value-of select='local-name(.)'/></var>
+                            =
+                            <code><xsl:value-of select='.'/></code>
+                        </li>
+                    </xsl:for-each>
+                    <code><xsl:value-of select='.'/></code>
+                </ul>
+            </div>
+        </xsl:for-each>
+    </ul>
+</xsl:for-each>
+            </custom-element>
+            <headers-demo></headers-demo>
+    </template>
+</html-demo-element>
+
 
 <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
 

package/demo/local-storage.html

@@ -3,6 +3,7 @@
 <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="../local-storage.js"></script>
     <script type="module" src="../custom-element.js"></script>
     <style>
@@ -18,6 +19,9 @@
 </head>
 <body>
 
+<nav>
+    <a href=".."><h3><code>custom-element</code> demo</h3></a>
+</nav>
 
 <html-demo-element legend="1. localStorage simplest"
                    description="local-storage read only during initial and only render, does not track the changes.">

package/demo/location-element.html

@@ -0,0 +1,149 @@
+<!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>
+    <link rel="icon" href="./wc-square.svg" />
+    <script type="module" src="../location-element.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.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>
+<nav>
+    <a href=".."><h3><code>custom-element</code> demo</h3></a>
+</nav>
+<html-demo-element legend="Change window URL">
+    <template>
+        <a href="#dce2">#dce2</a>
+        <form >
+            <input name="p1" value="abc"/>
+            <input name="p2" value="def"/>
+            <input type="submit" value="params"/>
+        </form>
+        <button onclick="history.pushState( {},'', 'location.html?pushstate')"
+                >history.pushState</button>
+        <button onclick="history.replaceState( {},'', 'location.html?replaceState#dce1')"
+                >history.replaceState</button>
+
+    </template>
+</html-demo-element>
+
+
+<html-demo-element legend="2. window.location live update"
+                   description="In the page beginning change the window URL via link or by history change"
+                   id="dce2"
+    >
+    <p>Has to produce URL properties</p>
+    <template>
+        <custom-element tag="dce-2" hidden>
+            <template>
+
+                <location-element slice="window-url" live></location-element>
+
+                <html:table>
+                    <xsl:for-each select="//slice/window-url/@*">
+                        <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:tr>
+                        <html:th><u>params</u></html:th>
+                        <html:th></html:th>
+                    </html:tr>
+                    <xsl:for-each select="//slice/window-url/params/*">
+                        <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>
+            </template>
+        </custom-element>
+        <dce-2>?</dce-2>
+    </template>
+</html-demo-element>
+
+
+<html-demo-element legend="1. window.location simplest"
+                   description="location read only during initial and only render, does not track the changes."
+                   id="dce1">
+    <p>Has to produce URL properties</p>
+    <template>
+        <custom-element tag="dce-1" hidden>
+            <template>
+
+                <location-element slice="window-url"></location-element>
+
+                <html:table>
+                    <xsl:for-each select="//slice/window-url/@*">
+                        <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:tr>
+                        <html:th><u>params</u></html:th>
+                        <html:th></html:th>
+                    </html:tr>
+                    <xsl:for-each select="//slice/window-url/params/*">
+                        <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>
+            </template>
+        </custom-element>
+        <dce-1>?</dce-1>
+    </template>
+</html-demo-element>
+
+
+<html-demo-element legend="3. External URL as SRC attribute"
+                   description="url parsed and populated into slice."
+                   id="dce3">
+    <p>Has to produce URL properties</p>
+    <template>
+        <custom-element tag="dce-3" hidden>
+            <template>
+
+                <location-element slice="src-url" src="https://my.example?a=1&b=2#3"></location-element>
+
+                <html:table>
+                    <xsl:for-each select="//slice/src-url/@*">
+                        <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:tr>
+                        <html:th><u>params</u></html:th>
+                        <html:th></html:th>
+                    </html:tr>
+                    <xsl:for-each select="//slice/src-url/params/*">
+                        <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>
+            </template>
+        </custom-element>
+        <dce-3>?</dce-3>
+    </template>
+</html-demo-element>
+
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
+</body>
+</html>

package/demo/wc-square.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Artwork" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18"><defs><style>.cls-1{fill:#c2e6f1;}.cls-2{fill:#dcf1f7;}.cls-3{fill:#2d4554;}.cls-4{fill:#60cae5;}</style></defs><polygon class="cls-3" points="0 82.47 0 126.71 34.84 146.83 34.84 187.06 73.16 209.18 108 189.07 142.84 209.18 181.16 187.06 181.16 146.83 216 126.71 216 82.47 181.16 62.35 181.16 22.12 142.84 0 108 20.12 73.16 0 34.84 22.12 34.84 62.35 0 82.47"/><path class="cls-2" d="m114.33,56.69l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-2" d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/><path class="cls-2" d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/><path class="cls-2" d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/><path class="cls-4" d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/><path class="cls-4" d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/><path class="cls-2" d="m149.18,117.04l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-1" d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/><path class="cls-1" d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-2" d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-1" d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/></svg>

package/http-request.js

@@ -6,6 +6,16 @@ export class HttpRequestElement extends HTMLElement
     constructor() {
         super();
     }
+    get requestHeaders()
+    {   const ret = {};
+        [...this.attributes].filter(a=>a.name.startsWith('header-')).map( a => ret[a.name.substring(7)] = a.value );
+        return ret;
+    }
+    get requestProps()
+    {   const ret = {};
+        [...this.attributes].filter(a=>!a.name.startsWith('header-')).map( a => ret[a.name] = a.value );
+        return ret;
+    }
     sliceInit( s )
     {   if( !s )
             s = {};
@@ -18,7 +28,7 @@ export class HttpRequestElement extends HTMLElement
             controller.abort();
         };
         const     url = attr(this, 'url') || ''
-        ,     request = { url }
+        ,     request = { ...this.requestProps, headers: this.requestHeaders }
         ,       slice = { detail: { request }, target: this }
         , updateSlice = slice =>
         {   for( let parent = s.element.parentElement; parent; parent = parent.parentElement )
@@ -30,9 +40,14 @@ export class HttpRequestElement extends HTMLElement
 
         setTimeout( async ()=>
         {   updateSlice( slice );
-            slice.detail.response = await fetch(url,{ signal: controller.signal });
+            const response = await fetch(url,{ ...this.requestProps, signal: controller.signal, headers: this.requestHeaders })
+            ,      r= {headers: {}};
+            [...response.headers].map( ([k,v]) => r.headers[k]=v );
+            'ok,status,statusText,type,url,redirected'.split(',').map(k=>r[k]=response[k])
+
+            slice.detail.response = r;
             updateSlice( slice );
-            slice.detail.data = await slice.detail.response.json();
+            slice.detail.data = await response.json();
             updateSlice( slice );
         },0 );
 
@@ -41,4 +56,4 @@ export class HttpRequestElement extends HTMLElement
 }
 
 window.customElements.define( 'http-request', HttpRequestElement );
-export default HttpRequestElement;
+export default HttpRequestElement;

package/index.html

@@ -3,6 +3,7 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>custom-element Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="demo/wc-square.svg" />
     <script type="module" src="custom-element.js"></script>
     <style>
         @import "demo/demo.css";
@@ -26,7 +27,8 @@
     <section>
     <b>Data layer demo</b>
         <a href="./demo/local-storage.html">local-storage</a> |
-        <a href="./demo/http-request.html">http-request</a>
+        <a href="./demo/http-request.html">http-request</a> |
+        <a href="./demo/location-element.html">location-element</a>
     </section>
 </nav>
 <html-demo-element legend="1. simple payload"

package/location-element.js

@@ -0,0 +1,63 @@
+const     attr = (el, attr)=> el.getAttribute(attr);
+
+export class LocationElement extends HTMLElement
+{
+    // @attribute live - monitors localStorage change
+    // @attribute src - URL to be parsed, defaults to `window.location`
+
+    constructor()
+    {
+        super();
+        const      state = {}
+        ,       listener = e=> propagateSlice(e)
+        , propagateSlice = (e)=>
+        {   const urlStr = attr(this,'src')
+            const url = urlStr? new URL(urlStr) : window.location
+
+            const params= {}
+            const search = new URLSearchParams(url.search);
+            for (const key of search.keys())
+                params[key] = search.getAll(key)
+
+            const detail = {params}
+            for( const k in url )
+            {   if ('string' === typeof url[k])
+                    detail[k] = url[k]
+            }
+            for( let parent = this.parentElement; parent; parent = parent.parentElement)
+            {   if (parent.onSlice)
+                    return parent.onSlice(
+                        {   detail
+                            , 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( 'popstate', listener );
+                window.addEventListener( 'hashchange', listener );
+            }
+            propagateSlice();
+            return s || {}
+        }
+        this._destroy = ()=>
+        {
+            if( !state.listener )
+                return;
+            if(state.listener)
+            {   window.removeEventListener('popstate', listener);
+                window.removeEventListener('hashchange', listener);
+            }
+            delete state.listener;
+        };
+        this.sliceInit()
+    }
+    disconnectedCallback(){ this._destroy(); }
+}
+
+window.customElements.define( 'location-element', LocationElement );
+export default LocationElement;

package/package.json

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