@epa-wg/custom-element 0.0.19 → 0.0.21

package/.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+max_line_length = 120
+tab_width = 4
+trim_trailing_whitespace = true

package/README.md

@@ -1,9 +1,9 @@
 # custom-element
-`Declarative Custom Element` (DCE) is a part of pure `Declarative Web Application` stack. A proof of concept as a part of 
+`Declarative Custom Element` (DCE) 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) and [Declarative Web Application](https://github.com/EPA-WG/dwa#readme)
-discussion. **NO-JS** The functionality of DCE and its data access does not require programming using JavaScript. 
+discussion. **NO-JS** 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, attributes and data `slice` as of now from  
+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 triggered by initialization or DOM event.
 
@@ -13,16 +13,16 @@ UI is re-rendered on each data slice change triggered by initialization or DOM e
 | [tests project][git-test-url]
 | [Chrome devtools pugin][plugin-url]
 
-[![NPM version][npm-image]][npm-url] 
-[![coverage][coverage-image]][coverage-url] 
+[![NPM version][npm-image]][npm-url]
+[![coverage][coverage-image]][coverage-url]
 [![Published on webcomponents.org][webcomponents-img]][webcomponents-url]
 
 
 
 <details>
 <summary> What is DCE? </summary>
-DCE provides the next level of abstraction in HTML - native composition. With native implementation which is 
-streaming parser, streaming transformation, multithreading. native assumes the C/Rust compiled code. 
+DCE provides the next level of abstraction in HTML - native composition. With native implementation which is
+streaming parser, streaming transformation, multithreading. native assumes the C/Rust compiled code.
 There is no place for JavaScript except of polyfill and ability to extend DCE, which otherwise has to be native.
 
 The composition assumes the fully functional template and ability to call the template with parameters( custom tag + attributes) .
@@ -113,11 +113,11 @@ comes from XSLT and XPath. Which is natively implemented in all current browsers
         the seed grows in size as the Pokémon  does.</p>
 </pokemon-tile>
 
-<pokemon-tile title="ninetales" pokemon-id="38" ></pokemon-tile>        
+<pokemon-tile title="ninetales" pokemon-id="38" ></pokemon-tile>
 ```
 generates HTML
 ```html
-<pokemon-tile title="bulbasaur" data-smile="👼" 
+<pokemon-tile title="bulbasaur" data-smile="👼"
               image-src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/1.svg"
     >
     <h3>bulbasaur</h3>
@@ -126,7 +126,7 @@ generates HTML
     <p>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" 
+<pokemon-tile title="ninetales"
               image-src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/38.svg"
     >
     <h3>ninetales</h3>
@@ -146,16 +146,16 @@ generates HTML
 * creates a class for custom element extending HTMLElement
 * registers element by `tag` attribute
 
-NOTE: attempt to register custom element with already registered tag name would fail due to w3c standard limitations. 
+NOTE: attempt to register custom element with already registered tag name would fail due to w3c standard limitations.
 The scoped custom element registry is still a proposal.
 
 ### omitting `tag` leads to template instantiation
-Whether template is inline or given by `src` attribute, the `custom-element` would be instantiated inline if no `tag` 
+Whether template is inline or given by `src` attribute, the `custom-element` would be instantiated inline if no `tag`
 attribute is given.
 
 ### custom element instance
-constructor creates XML with 
-* root matching the tag 
+constructor creates XML with
+* root matching the tag
 * payload
   * dom nodes with `slot` attribute stay inside
 * attributes
@@ -180,7 +180,7 @@ See [demo](https://unpkg.com/@epa-wg/custom-element@0.0/demo/external-template.h
 ## types of template
 * HTML with DCE syntax ( slots, data slices, xslt operators, etc. )
 * SVG image, MathML, etc.
-* XSLT template. The `datadom` is the XML payload for transformation. In order to be embedded into external document, 
+* XSLT template. The `datadom` is the XML payload for transformation. In order to be embedded into external document,
 this document has to have XML syntax like XHTML. Attempt of including XSLT within HTML file would break the template
 integrity by parser.
 
@@ -198,7 +198,7 @@ allows to refer the template withing external document
 # template syntax
 [Scoped CSS][css-demo-url] live demo
 ## styles encapsulation
-DCE can have the own styles which would be scoped to the instances. 
+DCE can have the own styles which would be scoped to the instances.
 In order to prevent the style leaking, it has to be defined withing `template` tag:
 ```html
 <custom-element>
@@ -250,15 +250,15 @@ The curly braces `{}` in attributes implemented as [attribute value template](ht
 
 The names in curly braces are matching the instance attributes. I.e. in XML node `/my-component/attributes/`.
 
-To access payload XPath could start with `/*/payload/`. I.e. `{/*/payload//label}` refers to all `label` tags in payload. 
+To access payload XPath could start with `/*/payload/`. I.e. `{/*/payload//label}` refers to all `label` tags in payload.
 
 ## Slots
-`<slot name="xxx">` is replaced by payload top elements with `slot` attribute matching the name, 
+`<slot name="xxx">` is replaced by payload top elements with `slot` attribute matching the name,
 i.e.  slot `xxx` is matching `<i slot="xxx">...</i>` in payload.
 ```html
 <custom-element tag="with-description" >
     <slot name="description">description is not available</slot>
-    <!-- same as 
+    <!-- same as
         <value-of select='/*/payload/*[@slot="description"]'/>
     -->
 </custom-element>
@@ -270,7 +270,7 @@ i.e.  slot `xxx` is matching `<i slot="xxx">...</i>` in payload.
 ## loops, variables
 Loop implemented via [for-each](https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each)
 
-[Variables in XSLT](https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/variable) 
+[Variables in XSLT](https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/variable)
 
 ## [XPath](https://developer.mozilla.org/en-US/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference)
 is available in `{}` in attributes, in `for-each`, `if`, `value-of`, and other XSL tags.
@@ -278,13 +278,13 @@ is available in `{}` in attributes, in `for-each`, `if`, `value-of`, and other X
 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 
+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 mismatch to given 
+On many tags like `table`, or link `a` the attempt to use XSLT operations could lead to DOM order mismatch to given
 in template. In such cases the `xhtml:` prefix in front of troubled tag would solve the parsing.
 
 ```html
@@ -324,19 +324,19 @@ See [demo source](demo/local-storage.html) for detailed sample.
 ## 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 
+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 
+* 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
 ```xml
 <b title="{name(*)} : {text()}">xml tag name: <value-of select='name()'/></b>
 ```
 
 [git-url]:        https://github.com/EPA-WG/custom-element
-[git-test-url]:   https://github.com/EPA-WG/custom-element-test
+[git-test-url]:   https://github.com/EPA-WG/custom-element-dist
 [demo-url]:       https://unpkg.com/@epa-wg/custom-element@0.0/index.html
 [css-demo-url]:   https://unpkg.com/@epa-wg/custom-element@0.0/demo/scoped-css.html
 [slice-demo-url]:   https://unpkg.com/@epa-wg/custom-element@0.0/demo/data-slices.html
@@ -348,9 +348,9 @@ within template
 [github-image]:   https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
 [npm-image]:      https://img.shields.io/npm/v/@epa-wg/custom-element.svg
 [npm-url]:        https://npmjs.org/package/@epa-wg/custom-element
-[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.19/coverage/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.19/coverage/lcov-report/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.19/storybook-static/index.html?path=/story/welcome--introduction
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.21/coverage/src/custom-element/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.21/coverage/src/custom-element/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-dist@0.0.21/storybook-static/index.html?path=/story/welcome--introduction
 [sandbox-url]:    https://stackblitz.com/github/EPA-WG/custom-element?file=index.html
 [webcomponents-url]: https://www.webcomponents.org/element/@epa-wg/custom-element
 [webcomponents-img]: https://img.shields.io/badge/webcomponents.org-published-blue.svg

package/bin/xslDtd2Ide.mjs

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

package/custom-element.d.ts

@@ -1,4 +1,5 @@
 export function log(x: any): void;
+export function deepEqual(a: any, b:any): boolean|0;
 
 /**
  * @summary Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating

package/custom-element.js

@@ -11,7 +11,8 @@ const attr = (el, attr)=> el.getAttribute?.(attr)
 ,   isNode = e => e && typeof e.nodeType === 'number'
 ,   create = ( tag, t = '', d=document ) => ( e => ((t && e.append(createText(d.ownerDocument||d, t))),e) )((d.ownerDocument || d ).createElement( tag ))
 ,   createText = ( d, t) => (d.ownerDocument || d ).createTextNode( t )
-,   emptyNode = n => { while(n.firstChild) n.firstChild.remove(); n.getAttributeNames().map( a => n.removeAttribute(a) ); return n; }
+,   removeChildren = n => { while(n.firstChild) n.firstChild.remove(); return n; }
+,   emptyNode = n => {  n.getAttributeNames().map( a => n.removeAttribute(a) ); return removeChildren(n); }
 ,   createNS = ( ns, tag, t = '' ) => ( e => ((e.innerText = t||''),e) )(document.createElementNS( ns, tag ))
 ,   xslNs = x => ( x?.setAttribute('xmlns:xsl', XSL_NS_URL ), x )
 ,   xslHtmlNs = x => ( x?.setAttribute('xmlns:xhtml', HTML_NS_URL ), xslNs(x) )
@@ -62,43 +63,14 @@ assureSlot( e )
     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( 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;')+'"');
-    if( oo )
-    {   ret.push(">");
-        for( let k in oo )
-            ret.push( Json2Xml( oo[k], k ) );
-        ret.push("</"+tag+">");
-    }else
-        ret.push("/>");
-    return ret.join('\n');
-}
-
     export function
 obj2node( o, tag, doc )
-{
-    if( typeof o === 'function'){debugger}
-    if( typeof o === 'string' )
+{   const t = typeof o;
+    if( t === 'function'){debugger}
+    if( t === 'string' )
         return create(tag,o,doc);
+    if( t === 'number' )
+        return create(tag,''+o,doc);
 
     if( o instanceof Array )
     {   const ret = create('array');
@@ -163,8 +135,8 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
         <xsl:template match="*[name()='template']"><xsl:apply-templates mode="sanitize" select="*|text()"/></xsl:template>
         <xsl:template match="*"><xsl:apply-templates mode="sanitize" select="*|text()"/></xsl:template>
         <xsl:template match="*[name()='svg']|*[name()='math']"><xsl:apply-templates mode="sanitize" select="."/></xsl:template>
-        <xsl:template mode="sanitize" match="*[count(text())=1 and count(*)=0]"><xsl:copy><xsl:apply-templates mode="sanitize" select="@*"/><xsl:value-of select="text()"/></xsl:copy></xsl:template>
-        <xsl:template mode="sanitize" match="xhtml:*[count(text())=1 and count(*)=0]"><xsl:element name="{local-name()}"><xsl:apply-templates mode="sanitize" select="@*"/><xsl:value-of select="text()"/></xsl:element></xsl:template>
+        <xsl:template mode="sanitize" match="*[count(text())=1 and count(*)=0]"><xsl:copy><xsl:apply-templates mode="sanitize" select="@*"/><xsl:value-of select="text()"></xsl:value-of></xsl:copy></xsl:template>
+        <xsl:template mode="sanitize" match="xhtml:*[count(text())=1 and count(*)=0]"><xsl:element name="{local-name()}"><xsl:apply-templates mode="sanitize" select="@*"/><xsl:value-of select="text()"></xsl:value-of></xsl:element></xsl:template>
         <xsl:template mode="sanitize" match="*|@*"><xsl:copy><xsl:apply-templates mode="sanitize" select="*|@*|text()"/></xsl:copy></xsl:template>
         <xsl:template mode="sanitize" match="text()[normalize-space(.) = '']"/>
         <xsl:template mode="sanitize" match="text()"><dce-text><xsl:copy/></dce-text></xsl:template>
@@ -203,8 +175,7 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
         <xsl:choose>
             <xsl:when test="//attr">{//attr}</xsl:when>
             <xsl:otherwise>{def}</xsl:otherwise>
-        </xsl:choose>
-        <xsl:value-of select="."/></xsl:template>
+        </xsl:choose><xsl:value-of select="."></xsl:value-of></xsl:template>
     <xsl:template mode="payload"  match="attributes"></xsl:template>
     <xsl:template match="/">
         <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
@@ -364,17 +335,23 @@ event2slice( x, sliceNames, ev, dce )
         ev.type==='init' && cleanSliceValue();
         s.append( obj2node( ev, 'event', d ) );
         if( sel.hasAttribute('slice-value') )
-        {   s.setAttribute('value', el.value );
+        {   if( el.value === undefined)
+                s.removeAttribute('value')
+            else
+                s.setAttribute('value', el.value );
             const v = xPath( attr( sel, 'slice-value'),s );
             cleanSliceValue();
             s.append( createText( d, v ) );
         }else
-        {   const v = el.value || attr( sel, 'value' ) ;
+        {   const v = el.value ?? attr( sel, 'value' ) ;
             cleanSliceValue();
-            if( isString(v) )
-                s.append( createText( d, v) );
+            if( v === null || v === undefined )
+                [...s.childNodes].filter(n=>n.localName!=='event').map(n=>n.remove());
             else
-                s.append( obj2node(v,'value',s.ownerDocument) )
+                if( isString(v) )
+                    s.append( createText( d, v) );
+                else
+                    s.append( obj2node(v,'value',s.ownerDocument) )
         }
     })
 }
@@ -445,6 +422,8 @@ export function assureUnique(n, id=0)
 }
 export function merge( parent, fromArr )
 {
+    if(!fromArr.length)
+        return removeChildren(parent);
     const id2old = {};
     for( let c of parent.childNodes)
     {   ASSERT( !id2old[c.dceId] );
@@ -455,8 +434,8 @@ export function merge( parent, fromArr )
             id2old[attr(c, 'data-dce-id') || 0] = c;
     }
     for( let e of [...fromArr] )
-    {
-        const o = id2old[ attr(e, 'data-dce-id') || e.dceId ];
+    {   const k = attr(e, 'data-dce-id') || e.dceId;
+        const o = id2old[ k ];
         if( o )
         {   if( isText(e) )
             {   if( o.nodeValue !== e.nodeValue )
@@ -466,9 +445,12 @@ export function merge( parent, fromArr )
                 if( o.childNodes.length || e.childNodes.length )
                     merge(o, e.childNodes)
             }
+            delete id2old[ k ]
         }else
             parent.append( e )
     }
+    for( let v of Object.values(id2old) )
+        v.remove();
 }
 export function assureUID(n,attr)
 {   if( !n.hasAttribute(attr) )
@@ -679,12 +661,17 @@ CustomElement extends HTMLElement
 
             get dce(){ return dce }
         }
+        const registerTag = tag =>
+        {
+            if( window.customElements.get(tag) !== DceElement )
+                window.customElements.define( tag, DceElement);
+        };
         if(tag)
-            window.customElements.define( tag, DceElement);
+            registerTag(tag);
         else
         {   const t = tagName;
             this.setAttribute('tag', t );
-            window.customElements.define( t, DceElement);
+            registerTag(t);
             const el = document.createElement(t);
             this.getAttributeNames().forEach(a=>el.setAttribute(a,this.getAttribute(a)));
             el.append(...[...this.childNodes].filter( e => e.localName!=='style') );

package/demo/a.html

@@ -6,6 +6,7 @@
     <title>custom-element 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="../local-storage.js"></script>
     <script type="module" src="../custom-element.js"></script>
 
     <style>
@@ -40,22 +41,23 @@
 </head>
 <body>
 
- <custom-element>
-            <template>
-                <button slice="clickcount"
-                        slice-event="click"
-                        slice-value="//clickcount + 1"   >
-                    +
-                </button>
-                <button slice="clickcount"
-                        slice-event="click"
-                        slice-value="//clickcount - 1"   >
-                    -
-                </button>
-                <input slice="clickcount" type="number" value="{//clickcount ?? 0}" />
-                {//clickcount}
-            </template>
-        </custom-element>
 
+    <custom-element tag="dce-1">
+        <template >
+            <style >
+                color:red;
+            </style>
+
+            <u ><slot>red</slot></u>
+        </template>
+    </custom-element>
+<dce-1></dce-1> *
+<dce-1><template >
+            <style >
+                color:green;
+            </style>
+
+            <u >green</u>
+        </template></dce-1>
 </body>
 </html>

package/demo/data-slices.html

@@ -6,7 +6,6 @@
     <link rel="icon" href="./wc-square.svg"/>
 
     <script type="module" src="../http-request.js"></script>
-    <script type="module" src="../input-text.js"></script>
     <script type="module" src="../custom-element.js"></script>
     <style>
         @import "./demo.css";

package/demo/dom-merge.html

@@ -6,7 +6,6 @@
     <link rel="icon" href="./wc-square.svg"/>
 
     <script type="module" src="../http-request.js"></script>
-    <script type="module" src="../input-text.js"></script>
     <script type="module" src="../custom-element.js"></script>
     <style>
         @import "./demo.css";
@@ -94,9 +93,9 @@
             <form>
                 <label>
                     <input type="text"
-                           value="Type time update"
+                           value="{//txt ?? 'Type time update'}"
                            slice="txt"
-                           slice-event="keyup"/>
+                           slice-event="init input"/>
 
                     <span> Character count:
                         <b> {string-length(//slice/txt)} </b>

package/demo/http-request.html

@@ -31,6 +31,33 @@
     <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
 </nav>
 
+
+<html-demo-element legend="0. url from text to http-request "
+                   description="read data from arbitrary URL">
+    <template>
+        <custom-element>
+            <template>
+
+                <button slice="url-string" slice-value="''" slice-event="click">⬇️set blank</button>
+                <button slice="url-string" slice-value="'https://pokeapi.co/api/v2/pokemon?limit=6'" slice-event="click">⬇️https://pokeapi.co/api/v2/pokemon?limit=6</button>
+                <button slice="url-string" slice-value="'https://pokeapi.co/api/v2/pokemon?limit=3'" slice-event="click">⬇️https://pokeapi.co/api/v2/pokemon?limit=3</button>
+                <input slice="url-string" value="{ //url-string ?? '' }" style="width:100%"/>
+                <button slice="fetch-url" slice-event="click" slice-value="//url-string"> GET </button>
+                <http-request
+                    url="{//fetch-url}"
+                    slice="request_slice"
+                    type="text"
+                    mode="cors"
+                    ></http-request>
+                <code>//fetch-url</code> from <code>{//fetch-url}</code><br/>
+                <ul><for-each select="//results">
+                    <li>{@name}</li>
+                </for-each></ul>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
 <html-demo-element legend="1. http-request simplest"
                    description="load the list of pokemons">
     <p>Should display 6 image buttons with pokemon name </p>

package/demo/local-storage.html

@@ -16,14 +16,119 @@
         td,th{text-align: right; }
         caption{ padding: 1rem; font-weight: bolder; font-family: sans-serif; }
     </style>
+
+    <script>
+        window.JsonSample = {a:1,b:'B'};
+    </script>
 </head>
 <body>
 
 <nav>
     <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
 </nav>
+<main>
+    <code>local-storage</code> allows to read and write its value to the key in <code>localStorage</code>.
+    The <code>type</code> attribute allows to place the validation constrains to the value: when the value does not
+    match the expected type, it would not be assigned, keeping empty <code>value</code> instead.
+</main>
+<html-demo-element legend="0. read localStorage text value"
+                   description="click should set text-key slice via localStorage change.">
+    <template>
+        <custom-element>
+            <template>
+                <local-storage key="textKey" slice="text-key" type="text" live="live"></local-storage>
+                <button onclick="localStorage.setItem('textKey','text value')">text value</button>
+                <button onclick="localStorage.setItem('textKey','another value')">another value</button>
+                //text-key: <code>{//text-key}</code>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="1. always override "
+                   description="value in localStorage[] should be always reset to ABC. click should set text-key slice via localStorage change.">
+    <template>
+        <custom-element>
+            <template>
+                <!-- always reset -->
+                <local-storage slice="override-key"  key="overrideKey" type="text" value="ABC"></local-storage>
+                <button onclick="localStorage.setItem(   'overrideKey','text value')">text value</button>
+                <button onclick="localStorage.removeItem('overrideKey'             )">clear key</button>
+                //override-key: <code>{                 //override-key      }</code>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="2. from storage with default "
+                   description="default overridden by button, refresh should preserve updated value">
+    <template>
+        <custom-element>
+            <template>
+                <!-- initially set value to DEF and update by button. On reload the value picked from localStorage -->
+                <local-storage key="attr2Key" slice="attr2-key" type="text" live="live" slice-value="@value ?? 'DEF'"></local-storage>
+                <button onclick="localStorage.clear()">clear localStorage</button>
+                <button onclick="localStorage.removeItem('attr2Key')">clear key</button>
+                <button onclick="localStorage.setItem('attr2Key','text value')">updated value</button>
+                //attr2-key: <code>{//attr2-key}</code>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="3. localStorage type"
+                   description="type validation happy path. Invalid for type value in storage would be treated as null">
+    <template>
+        <custom-element>
+            <template>
+                <local-storage key="dateKey"            slice="date-key"        type="date"             live="live"></local-storage>
+                <local-storage key="timeKey"            slice="time-key"        type="time"             live="live"></local-storage>
+                <local-storage key="localDateTimeKey"   slice="local-date-time" type="datetime-local"   live="live"></local-storage>
+                <local-storage key="numberKey"          slice="number-key"      type="number"           live="live"></local-storage>
+                <local-storage key="jsonKey"            slice="json-key"        type="json"             live="live"></local-storage>
+                <input id="typesinput" placeholder="set value" /><button onclick="
+                        'dateKey,timeKey,localDateTimeKey,numberKey,jsonKey'.split(',')
+                            .map( k=> localStorage.setItem(k, typesinput.value) )
+                    "> set to all</button><br/>
+                <hr/>
+                date-key:
+                    <button onclick="localStorage.setItem('dateKey', '2024-04-20T03:58:42.131Z')"           >2024-04-21T03:58:42.131Z           </button>
+                    <button onclick="localStorage.setItem('dateKey', new Date(Date.now()).toISOString())"   >now                                </button>
+                    <button onclick="localStorage.setItem('dateKey', 'ABC'  )"                              >date ABC - invalid                 </button>
+                    <code>{//date-key       }</code><br/>
+                time-key:
+                    <button onclick="localStorage.setItem('timeKey', '13:30')"                              >13:30                              </button>
+                    <code>{//time-key       }</code><br/>
+                local-date-time:
+                    <button onclick="localStorage.setItem('localDateTimeKey', '1977-04-01T14:00:30')"       >21977-04-01T14:00:30 - local       </button>
+                    <code>{//local-date-time}</code><br/>
+                number-key:
+                    <button onclick="localStorage.setItem('numberKey', '2024'       )"                      >2024 - number                      </button>
+                    <button onclick="localStorage.setItem('numberKey', '24'         )"                      >24   - number                      </button>
+                    <button onclick="localStorage.setItem('numberKey', '1.23456e+5' )"                      >1.23456e+5                         </button>
+                    <button onclick="localStorage.setItem('numberKey', '0001'       )"                      >0001                               </button>
+                    <button onclick="localStorage.setItem('numberKey', '000'        )"                      >000                                </button>
+                    <button onclick="localStorage.setItem('numberKey', '0'          )"                      >0                                  </button>
+                    <button onclick="localStorage.setItem('numberKey', 'ABC'        )"                      >ABC - invalid, NaN                 </button>
+                    <code>{//number-key     }</code> <br/>
+                <fieldset>
+                    <legend>json-key: </legend>
+
+                    <button onclick="localStorage.setItem('jsonKey', JSON.stringify('ABC'))"                >'ABC'   - string  </button>
+                    <button onclick="localStorage.setItem('jsonKey', JSON.stringify(12.345))"               >12.345  - number  </button>
+                    <button onclick="localStorage.setItem('jsonKey', JSON.stringify(window.JsonSample) )"   >a:1,b:'B'  -json  </button>
+                    <button onclick="localStorage.setItem('jsonKey', 'ABC'  )"                              >ABC - invalid     </button><br/>
+                    json-key:<code><xsl:apply-templates select="//json-key/value/@*|//json-key/text()|//json-key/value/text()" mode="json"></xsl:apply-templates></code>
+                </fieldset>
+                <xsl:template mode="json" match="*|@*">
+                    <div>{name()} : {.}</div>
+            </xsl:template>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
 
-<html-demo-element legend="1. localStorage simplest"
+<html-demo-element legend="3. localStorage simplest"
                    description="local-storage read only during initial and only render, does not track the changes.">
     <p>Has to produce 12🍒</p>
     <template>

package/demo/location-element.html

@@ -30,9 +30,9 @@
             <input name="p2" value="def"/>
             <input type="submit" value="params"/>
         </form>
-        <button onclick="history.pushState( {},'', 'location.html?pushstate')"
+        <button onclick="history.pushState( {},'', 'location-element.html?pushstate')"
                 >history.pushState</button>
-        <button onclick="history.replaceState( {},'', 'location.html?replaceState#dce1')"
+        <button onclick="history.replaceState( {},'', 'location-element.html?replaceState#dce1')"
                 >history.replaceState</button>
 
     </template>
@@ -113,7 +113,7 @@
 </html-demo-element>
 
 
-<html-demo-element legend="3. External URL as SRC attribute"
+<html-demo-element legend="3. External URL as HREF attribute"
                    description="url parsed and populated into slice."
                    id="dce3">
     <p>Has to produce URL properties</p>
@@ -121,12 +121,12 @@
         <custom-element tag="dce-3" hidden>
             <template>
 
-                <location-element slice="src-url" src="https://my.example?a=1&b=2#3"></location-element>
+                <location-element slice="href-url" href="https://my.example?a=1&b=2#3"></location-element>
 
                 <xhtml:table>
                     <xhtml:tbody>
                         <xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
-                        <for-each select="//slice/src-url/value/@*">
+                        <for-each select="//slice/href-url/value/@*">
                             <xhtml:tr>
                                 <xhtml:th>{name()}</xhtml:th>
                                 <xhtml:td>{.}</xhtml:td>
@@ -135,7 +135,7 @@
                     </xhtml:tbody>
                     <xhtml:tbody>
                         <xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
-                        <for-each select="//slice/src-url/value/params/*">
+                        <for-each select="//slice/href-url/value/params/*">
                             <xhtml:tr>
                                 <xhtml:th>{name()}</xhtml:th>
                                 <xhtml:td>{.}</xhtml:td>

package/demo/s.xml

@@ -1,6 +1,14 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<datadom><payload><span xmlns="http://www.w3.org/1999/xhtml" slot="">                </span><button xmlns="http://www.w3.org/1999/xhtml" slice="clickcount" slice-event="click" slice-value="//clickcount + 1" slot="">
-                    +
-                </button><span xmlns="http://www.w3.org/1999/xhtml" slot="">                </span><button xmlns="http://www.w3.org/1999/xhtml" slice="clickcount" slice-event="click" slice-value="//clickcount - 1" slot="">
-                    -
-                </button><span xmlns="http://www.w3.org/1999/xhtml" slot="">                </span><input xmlns="http://www.w3.org/1999/xhtml" slice="clickcount" type="number" value="{//clickcount ?? 0}" slot="" /><span xmlns="http://www.w3.org/1999/xhtml" slot="">                {//clickcount}            </span></payload><attributes><tag>dce-72e0d208-b3b4-4b0a-8798-a094beaf5fe1</tag></attributes><dataset/><slice><clickcount xmlns="" slice="clickcount" type="number" value="" data-dce-id="2" slice-event="click" slice-value="//clickcount + 1"><event isTrusted="true" pointerId="1" width="1" height="1" pressure="0" tiltX="0" tiltY="0" azimuthAngle="0" altitudeAngle="1.5707963267948966" tangentialPressure="0" twist="0" pointerType="mouse" isPrimary="false" screenX="19" screenY="99" clientX="19" clientY="12" ctrlKey="false" shiftKey="false" altKey="false" metaKey="false" button="0" buttons="0" pageX="19" pageY="12" x="19" y="12" offsetX="10" offsetY="0" movementX="0" movementY="0" layerX="19" layerY="12" detail="1" which="1" type="click" eventPhase="0" bubbles="true" cancelable="true" defaultPrevented="false" composed="true" timeStamp="5460750.8000000715" returnValue="true" cancelBubble="false" NONE="0" CAPTURING_PHASE="1" AT_TARGET="2" BUBBLING_PHASE="3"><relatedTarget/><fromElement/><toElement/><sourceCapabilities firesTouchEvents="false"/><currentTarget/></event>46</clickcount></slice></datadom>
+<div xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><!-- wrapping into template to prevent images loading within DCE declaration -->
+    <local-storage key="undefined" slice="s" }=""></local-storage>
+
+    <input placeholder="value for localStorage" slice="s" value="{ //s ?? 'undefined' }" />
+    <button>set</button>
+    <button slice="sv" slice-value="''" slice-event="click">set blank</button>
+    <button slice="sv" slice-value="'/reflect'" slice-event="click">/reflect</button>
+    <button slice="sv" slice-value="'/pokemon?limit=6'" slice-event="click">/pokemon?limit=6</button>
+    <button slice="sv" slice-value="'/pokemon?limit=3'" slice-event="click">/pokemon?limit=3</button>
+    <br />
+    <var>undefined</var>:<code>{ //slice/s }</code>
+    <br />
+    undefined
+</div>

package/demo/s.xslt

@@ -1,18 +1,57 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce" xmlns:exsl="http://exslt.org/common" version="1.0" exclude-result-prefixes="exsl">
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
+                xmlns:dce="urn:schemas-epa-wg:dce" xmlns:exsl="http://exslt.org/common" version="1.0"
+                exclude-result-prefixes="exsl">
     <xsl:template match="ignore">
         <xsl:choose>
-            <xsl:when test="//attr"><xsl:value-of select="//attr"/></xsl:when>
-            <xsl:otherwise><xsl:value-of select="def"/></xsl:otherwise>
+            <xsl:when test="//attr">
+                <xsl:value-of select="//attr"/>
+            </xsl:when>
+            <xsl:otherwise>
+                <xsl:value-of select="def"/>
+            </xsl:otherwise>
         </xsl:choose>
-        <xsl:value-of select="."/></xsl:template>
-    <xsl:template mode="payload" match="attributes"><dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1"><button xmlns="" slice="clickcount" slice-event="click" slice-value="//clickcount + 1" data-dce-id="2">
-                    +
-                </button><button xmlns="" slice="clickcount" slice-event="click" slice-value="//clickcount - 1" data-dce-id="3">
-                    -
-                </button><input xmlns="" slice="clickcount" type="number" value="{concat( //clickcount  , substring(  0 , (1+string-length(  0 )) * string-length( //clickcount  ) ) )}" data-dce-id="4"/><dce-text xmlns="" data-dce-id="5">
-                <xsl:value-of select="//clickcount"/>
-            </dce-text></dce-root></xsl:template>
+        <xsl:value-of select="."/>
+    </xsl:template>
+    <xsl:template mode="payload" match="attributes">
+        <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
+            <http-request xmlns="" url="{concat(//s , '') }" slice="s" data-dce-id="2"/>
+            <p xmlns="" data-dce-id="3">Pokemon Count:
+                <xsl:value-of select="count(/datadom/slice/s//results)"/>
+            </p>
+            <xsl:if xmlns:xsl="http://www.w3.org/1999/XSL/Transform" test="count(/datadom/slice/s//results) &lt; 0">
+                <h3 xmlns="" data-dce-id="4">loading...</h3>
+            </xsl:if>
+            <xsl:for-each xmlns:xsl="http://www.w3.org/1999/XSL/Transform" select="/datadom/slice/s//results">
+                <xsl:variable name="pokeid"
+                              select="substring-before( substring-after( @url, 'https://pokeapi.co/api/v2/pokemon/'),'/')"/>
+                <button xmlns="" data-dce-id="5">
+                    <xsl:value-of select="@name">
+                    </xsl:value-of>
+                </button>
+            </xsl:for-each>
+            <xsl:for-each xmlns:xsl="http://www.w3.org/1999/XSL/Transform" select="//slice/s/value/*">
+                <ul xmlns="" data-dce-id="6">
+                    <var data-testid="request-section" data-dce-id="7">
+                        <dce-text data-dce-id="8">
+                            <xsl:value-of select="name(.)"/>
+                        </dce-text>
+                    </var>
+                    <xsl:for-each select="@*">
+                        <div data-dce-id="9">
+                            <var data-dce-id="10">@<xsl:value-of select="local-name(.)"/>
+                            </var>
+                            <dce-text data-dce-id="11">
+                                =
+                            </dce-text>
+                            <code data-testid="attr-{local-name(.)}" data-dce-id="12">
+                                <xsl:value-of select="."/>
+                            </code>
+                        </div>
+                    </xsl:for-each>
+                </ul>
+            </xsl:for-each>
+        </dce-root>
+    </xsl:template>
     <xsl:template match="/">
         <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
     </xsl:template>
@@ -21,7 +60,7 @@
         <xsl:param name="defaultvalue"/>
         <xsl:choose>
             <xsl:when test="//payload/*[@slot=$slotname]">
-               <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
+                <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
             </xsl:when>
             <xsl:otherwise>
                 <xsl:copy-of select="$defaultvalue"/>

package/demo/scoped-css.html

@@ -6,7 +6,6 @@
     <link rel="icon" href="./wc-square.svg"/>
 
     <script type="module" src="../http-request.js"></script>
-    <script type="module" src="../input-text.js"></script>
     <script type="module" src="../custom-element.js"></script>
     <style>
         @import "./demo.css";

package/demo/ss.html

@@ -1,32 +1,57 @@
-<!DOCTYPE html>
-<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-    <title>CSS scoping - Declarative Custom Element implementation demo</title>
-    <link rel="icon" href="./wc-square.svg"/>
-
-    <script type="module" src="../http-request.js"></script>
-    <script type="module" src="../input-text.js"></script>
-    <script type="module" src="../custom-element.js"></script>
-    <style>
-        @import "./demo.css";
-    </style>
-</head>
-<body>
-
-
-        <custom-element src="hex-grid-dce.html#hex-grid-template">
-            <template>
-                <style>nav{--hex-grid-size: 4rem;}</style>
-                <img src="wc-square.svg" alt="DCE" href="https://github.com/EPA-WG/custom-element"/>
-                <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React" href="https://react.dev/"/>
-                <img src="https://angularjs.org/favicon.ico" alt="Angular" href="https://angularjs.org/"/>
-                <img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
-                <img src="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" alt="Flutter" href="https://flutter.dev/"/>
-                <img src="https://lit.dev/images/logo.svg#flame" alt="Lit"/>
-                <img src="https://redux.js.org/img/redux.svg" alt="Redux"/>
-            </template>
-        </custom-element>
-
-</body>
-</html>
+<dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1"><http-request xmlns="" url="/reflect" slice="page" data-dce-id="2"></http-request><p xmlns="" data-dce-id="3">Pokemon Count: 6</p>
+<ul xmlns="" data-dce-id="6">
+<var data-testid="request-section" data-dce-id="7"><dce-text data-dce-id="8">request</dce-text></var><div data-dce-id="9">
+<var data-dce-id="10">@url</var><dce-text data-dce-id="11">
+                    =
+                    </dce-text><code data-testid="attr-url" data-dce-id="12">/reflect</code>
+</div>
+<div data-dce-id="9-1">
+<var data-dce-id="10">@data-dce-id</var><dce-text data-dce-id="11">
+                    =
+                    </dce-text><code data-testid="attr-data-dce-id" data-dce-id="12">2</code>
+</div>
+</ul>
+<ul xmlns="" data-dce-id="6-1">
+<var data-testid="request-section" data-dce-id="7"><dce-text data-dce-id="8">response</dce-text></var><div data-dce-id="9">
+<var data-dce-id="10">@ok</var><dce-text data-dce-id="11">
+                    =
+                    </dce-text><code data-testid="attr-ok" data-dce-id="12">true</code>
+</div>
+<div data-dce-id="9-1">
+<var data-dce-id="10">@status</var><dce-text data-dce-id="11">
+                    =
+                    </dce-text><code data-testid="attr-status" data-dce-id="12">200</code>
+</div>
+<div data-dce-id="9-2">
+<var data-dce-id="10">@statusText</var><dce-text data-dce-id="11">
+                    =
+                    </dce-text><code data-testid="attr-statusText" data-dce-id="12">OK</code>
+</div>
+<div data-dce-id="9-3">
+<var data-dce-id="10">@type</var><dce-text data-dce-id="11">
+                    =
+                    </dce-text><code data-testid="attr-type" data-dce-id="12">basic</code>
+</div>
+<div data-dce-id="9-4">
+<var data-dce-id="10">@url</var><dce-text data-dce-id="11">
+                    =
+                    </dce-text><code data-testid="attr-url" data-dce-id="12">http://localhost:5173/reflect</code>
+</div>
+<div data-dce-id="9-5">
+<var data-dce-id="10">@redirected</var><dce-text data-dce-id="11">
+                    =
+                    </dce-text><code data-testid="attr-redirected" data-dce-id="12">false</code>
+</div>
+</ul><button xmlns="" data-dce-id="5">bulbasaur</button><button xmlns="" data-dce-id="5-1">ivysaur</button><button xmlns="" data-dce-id="5-2">venusaur</button><button xmlns="" data-dce-id="5-3">charmander</button><button xmlns="" data-dce-id="5-4">charmeleon</button><button xmlns="" data-dce-id="5-5">charizard</button>
+<ul xmlns="" data-dce-id="6-2">
+<var data-testid="request-section" data-dce-id="7"><dce-text data-dce-id="8">data</dce-text></var><div data-dce-id="9">
+<var data-dce-id="10">@count</var><dce-text data-dce-id="11">
+                    =
+                    </dce-text><code data-testid="attr-count" data-dce-id="12">1279</code>
+</div>
+<div data-dce-id="9-1">
+<var data-dce-id="10">@next</var><dce-text data-dce-id="11">
+                    =
+                    </dce-text><code data-testid="attr-next" data-dce-id="12">https://pokeapi.co/api/v2/pokemon?offset=6&amp;limit=6</code>
+</div>
+</ul></dce-root>

package/http-request.js

@@ -2,14 +2,13 @@ const     attr = (el, attr)=> el.getAttribute(attr);
 
 export class HttpRequestElement extends HTMLElement
 {
-    static get observedAttributes() {
-        return  [   'value' // populated from localStorage, if defined initially, sets the value in storage
-                ,   'slice'
-                ,   'url'
-                ,   'method'
-                ,   'header-accept'
-                ]
-    }
+    static observedAttributes =
+    [   'value' // populated from localStorage, if defined initially, sets the value in storage
+    ,   'slice'
+    ,   'url'
+    ,   'method'
+    ,   'header-accept'
+    ];
 
     get requestHeaders()
     {   const ret = {};
@@ -23,30 +22,67 @@ export class HttpRequestElement extends HTMLElement
         return ret
     }
 
-    disconnectedCallback(){ this._destroy?.(); }
+    disconnectedCallback(){ this.#destroy?.(); }
 
     connectedCallback()
-    {   const controller = new AbortController();
-        this._destroy = ()=> controller.abort(this.localName+' disconnected');
+    {
+        setTimeout(()=>this.fetch(),0)
+    }
+    #inProgressUrl = ''
+    #destroy = ()=>{}
+
+    async fetch()
+    {
+        if( !this.closest('body') )
+            return;
+        const url = attr(this, 'url') || '';
+        if( !url )
+        {   this.#destroy?.();
+            return this.value = {};
+        }
+
+        if( this.#inProgressUrl === url )
+            return ;
+
+        this.#inProgressUrl = url;
+        const controller = new AbortController();
+        this.#destroy = ()=> { controller.abort(this.localName+' disconnected'); this.#inProgressUrl = ''; }
 
-        const     url = attr(this, 'url') || ''
-        ,     request = { ...this.requestProps, headers: this.requestHeaders }
+        const request = { ...this.requestProps, headers: this.requestHeaders }
         ,       slice = { request }
         ,      update = () => this.dispatchEvent( new Event('change') );
         this.value = slice;
-        setTimeout( async ()=>
-        {   update();
-            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.response = r;
-            update();
-            slice.data = await response.json();
-            update();
-        },0 );
+
+        update();
+        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.response = r;
+        update();
+        if( r.headers['content-type']?.includes('json'))
+            try
+            {   slice.data = await response.json();
+                update();
+            }catch(_e){}
     }
+
+    attributeChangedCallback(name, oldValue, newValue)
+    {   if( name === 'url' )
+        {   if( oldValue !== newValue)
+            {
+                oldValue && this.#destroy?.();
+                if( newValue )
+                    setTimeout(()=>this.fetch(),10)
+                else
+                {   this.value = {}
+                    setTimeout(()=>this.dispatchEvent( new Event('change') ),10)
+                }
+            }
+        }
+    }
+
 }
 
 window.customElements.define( 'http-request', HttpRequestElement );

package/ide/web-types-dce.json

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

package/ide/web-types-xsl.json

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

package/index.js

@@ -0,0 +1,7 @@
+import CustomElement from "./custom-element.js";
+export default CustomElement;
+
+export * from "./custom-element.js";
+export * from "./http-request.js";
+export * from "./local-storage.js";
+export * from "./location-element.js";

package/local-storage.js

@@ -2,44 +2,81 @@ const     string2value = (type, v) =>
 {   if( type === 'text')
         return v;
     if( type === 'json')
-        return JSON.parse( v );
+        try{ return JSON.parse( v );}
+        catch(err){ return null }
     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;
+    if( 'number' === type )
+    {   el.value = v;
+        return el.valueAsNumber;
+    }
+    if( 'date' === type )
+    {   if(!v) return null;
+        el.valueAsDate = new Date( v );
+        return el.value;
+    }
+    el.value = v;
+    return el.value;
 };
 
+let originalSetItem,originalRemoveItem,originalClear;
+
+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}}) );
+        };
+    originalRemoveItem = localStorage.removeItem;
+    localStorage.removeItem = function( key, ...rest )
+        {   originalRemoveItem.apply(this, [ key, ...rest ]);
+            window.dispatchEvent( new CustomEvent('local-storage',{detail:{key}}) );
+        };
+    originalClear = localStorage.clear;
+    localStorage.clear = function( ...rest )
+        {   originalClear.apply(this, [ ...rest ]);
+            window.dispatchEvent( new CustomEvent('local-storage',{detail:{}}) );
+        };
+}
+
 export function localStorageSetItem(key, value)
 {   localStorage.setItem(key, value);
     window.dispatchEvent( new CustomEvent('local-storage',{detail:{key,value}}) );
 }
 export class LocalStorageElement extends HTMLElement
 {
-    static get observedAttributes() {
-        return  [   'value' // populated from localStorage, if defined initially, sets the value in storage
+    static observedAttributes=
+                [   'value' // populated from localStorage, if defined initially, sets the value in storage
                 ,   'slice'
                 ,   'key'
                 ,   'type' // `text|json`, defaults to text, other types are compatible with INPUT field
                 ,   'live' // monitors localStorage change
                 ];
-    }
+
+    #value;
+    get value(){ return this.#value ===null ? undefined: this.#value }
+    set value(o){ return this.#value = o; }
 
     async connectedCallback()
     {
         const    attr = attr => this.getAttribute(attr)
-            , fromStorage = ()=>
-        {   this.value = string2value( attr('type'), localStorage.getItem( attr( 'key' ) ) );
+        , fromStorage = ()=>
+        {   this.#value = string2value( attr('type'), localStorage.getItem( attr( 'key' ) ) );
             this.dispatchEvent( new Event('change') )
         }
-        // todo apply type
+        this.#value = string2value( attr('type'), localStorage.getItem( attr( 'key' ) ) );
+
         if( this.hasAttribute('value'))
-            localStorageSetItem( attr( this, 'key' ) )
+            localStorageSetItem( attr( 'key' ), this.#value = attr( 'value' )  )
         else
             fromStorage()
 
         if( this.hasAttribute('live') )
-        {   const listener = (e => e.detail.key === attr( 'key' ) && fromStorage());
+        {   const listener = (e => (e.detail.key === attr( 'key' ) || !e.detail.key ) && fromStorage());
             window.addEventListener( 'local-storage', listener );
+            ensureTrackLocalStorage();
             this._destroy = ()=> window.removeEventListener('local-storage', listener );
         }
     }
@@ -47,4 +84,4 @@ export class LocalStorageElement extends HTMLElement
 }
 
 window.customElements.define( 'local-storage', LocalStorageElement );
-export default LocalStorageElement;
+export default LocalStorageElement;

package/location-element.js

@@ -1,23 +1,42 @@
-const     attr = (el, attr)=> el.getAttribute(attr);
+const attr = ( el, attr )=> el.getAttribute( attr );
+
+let originalHistory;
+
+function ensureTrackLocationChange()
+{   if( originalHistory )
+        return;
+    originalHistory = {};
+    'back,forward,go,pushState,replaceState'.split(',').forEach( k =>
+    {
+        originalHistory[ k ] = history[ k ];
+        history[ k ] = function(...rest )
+        {
+            originalHistory[k].apply( history, rest );
+            window.dispatchEvent( new CustomEvent('dce-location',{detail:{ k }}) );
+        }
+    });
+}
 
 export class LocationElement extends HTMLElement
 {
-    static get observedAttributes()
-    {   return  [   'value' // populated from localStorage, if defined initially, sets the value in storage
-                ,   'slice'
-                ,   'live' // monitors location change
-                ,   'src'  // URL to be parsed, defaults to `window.location`
-                ];
-    }
+    static observedAttributes=
+            [   'value' // populated from url
+            ,   'slice'
+            ,   'href'  // url to be parsed. When omitted window.location is used.
+            ,   'type' // `text|json`, defaults to text, other types are compatible with INPUT field
+            ,   'live' // monitors history change, applicable only when href is omitted.
+            ];
 
     constructor()
     {
         super();
         const      state = {}
-        ,       listener = e=> propagateSlice(e)
+        ,       listener = () => setTimeout( propagateSlice,1 )
         , propagateSlice = ()=>
-        {   const urlStr = attr(this,'src')
-            const url = urlStr? new URL(urlStr) : window.location
+        {   const urlStr = attr(this,'href')
+            if(!urlStr)
+                ensureTrackLocationChange();
+            const url = urlStr? new URL(urlStr, window.location) : window.location;
 
             const params= {}
             const search = new URLSearchParams(url.search);
@@ -36,24 +55,30 @@ export class LocationElement extends HTMLElement
         {
             if( !state.listener && this.hasAttribute('live') )
             {   state.listener = 1;
-                window.addEventListener( 'popstate'  , listener );
-                window.addEventListener( 'hashchange', listener );
+                window.navigation?.addEventListener("navigate", listener );
+                window.addEventListener( 'popstate'      , listener );
+                window.addEventListener( 'hashchange'    , listener );
+                window.addEventListener( 'dce-location'  , listener );
             }
             propagateSlice();
             return s || {}
         }
         this._destroy = ()=>
         {
-            if( !state.listener )
-                return;
-            if(state.listener)
-            {   window.removeEventListener('popstate'  , listener);
-                window.removeEventListener('hashchange', listener);
-            }
+            window.removeEventListener('popstate'    , listener);
+            window.removeEventListener('hashchange'  , listener);
+            window.removeEventListener('dce-location', listener);
             delete state.listener;
         };
 
     }
+    attributeChangedCallback(name, oldValue, newValue)
+    {
+        if('href'!== name)
+            return;
+        this.sliceInit && this.sliceInit();
+    }
+
     connectedCallback(){ this.sliceInit() }
     disconnectedCallback(){ this._destroy() }
 }

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "@epa-wg/custom-element",
-    "version": "0.0.19",
+    "version": "0.0.21",
     "description": "Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating",
     "browser": "custom-element.js",
     "module": "custom-element.js",
     "exports": {
-        ".": "./custom-element.js",
+        ".": "./index.js",
         "./package.json": "./package.json",
         "./CustomElement": "./custom-element.js"
     },
@@ -16,7 +16,7 @@
         "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",
+        "test": "echo \"test would reside in https://github.com/EPA-WG/custom-element-dist\" && exit 0",
         "typings": "npx -p typescript tsc custom-element.js --declaration --allowJs --emitDeclarationOnly "
     },
     "type": "module",

package/input-text.js

@@ -1,17 +0,0 @@
-export class InputTextElement extends HTMLElement
-{
-    constructor()
-    {
-        super();
-        const i = this.ownerDocument.createElement('input');
-        for(let a of this.attributes)
-            a.namespaceURI ? i.setAttributeNS(a.namespaceURI,a.name,a.value) : i.setAttribute(a.name,a.value)
-        this.append(i)
-    }
-    get value(){ return this.firstChild.value }
-    set value(v){ return this.firstChild.value = v }
-    disconnectedCallback(){ }
-}
-
-window.customElements.define( 'input-text', InputTextElement );
-export default InputTextElement;