@epa-wg/custom-element 0.0.13 → 0.0.15

package/README.md

@@ -1,11 +1,11 @@
 # custom-element
-`Declarative Custom Element` 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. 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  
 [local-storage][local-storage-demo],  [http-request][http-request-demo], [location][location-demo].
-UI is re-rendered on each data slice change.
+UI is re-rendered on each data slice change triggered by initialization or DOM event.
 
 [![git][github-image] GitHub][git-url]
 | Live demo: [custom-element][demo-url]
@@ -17,6 +17,33 @@ UI is re-rendered on each data slice change.
 [![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. There is no place for JavaScript except of polyfill and ability to extend DCE, which otherwise has to be native.
+
+The composition assumes the fully functional template and ability to call the template with parameters( custom tag + attributes) .
+
+As the next to HTML abstraction layer - composition, it needs and provide:
+* ability to use dependencies as from withing the page as from external file/lib via src attribute and # in URL
+* ability to treat external content via content-type like html, SVG, images, video with own template rendering
+* provide styles and embedded DCE declarations in own and named(lib) scope, sharing the scoped registry.
+
+As the next to composition layer of **functional component** it provides
+* data layer with access to attributes/payload(+slots), dataset, data bound slice
+* means in template to use the data selector for condition/enumeration/text injection into attributes and DOM
+* Set of native primitives to support browser APIs declaratively: location,storage, http request which bonded to slice and as result to reactive UI.
+* support the data change trigger over events
+
+While DCE is no-JS concept, DCE provides the basic declarative constructs to build most of simple apps. Assuming the extending via custom elements and JS.  The evolution goal is to adopt most demanded APIs/construct natively into DCE stack over time.
+
+DCE is compatible with closed/open/named root. Enabling as site-scoped styling and registry as encapsulated anonymous scopes in shadow root.
+
+This project is a POC( Proof of Concept ) targeting to become a base for native DCE implementation polyfill.
+</details>
+
 # use
 ## install
 use via CDN
@@ -138,7 +165,7 @@ In order to prevent the style leaking, it has to be defined withing `template` t
 <custom-element>
   <template>
     <style>
-        color:green;
+        color: green;
         button{ color: blue; }
     </style>
     <label> green <button>blue</button> </label>
@@ -169,7 +196,18 @@ In same way as in DCE itself:
         </dce-2>
 ```
 ## Attributes
-curly braces `{}` in attributes implemented as [attribute value template](https://www.w3.org/TR/xslt20/#attribute-value-templates)
+To be served by IDE and to track the attributes changes, they have to be declared via `xsl:param` syntax:
+```html
+    <custom-element tag="dce-with-attrs" hidden>
+        <xsl:param name="p1" >default_P1</xsl:param>
+        <xsl:param name="p2" select="'always_p2'"  ></xsl:param>
+        <xsl:param name="p3" select="//p3 ?? 'def_P3' "  ></xsl:param>
+        p1: {$p1} <br/> p2: {$p2} <br/> p3: {$p3}
+    </custom-element>
+    <dce-with-attrs p1="123" p3="qwe"></dce-with-attrs>
+```
+
+The curly braces `{}` in attributes implemented as [attribute value template](https://www.w3.org/TR/xslt20/#attribute-value-templates)
 
 The names in curly braces are matching the instance attributes. I.e. in XML node `/my-component/attributes/`.
 
@@ -270,9 +308,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.13/coverage/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.13/coverage/lcov-report/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.13/storybook-static/index.html?path=/story/welcome--introduction
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.15/coverage/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.15/coverage/lcov-report/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.15/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

@@ -7,8 +7,9 @@ const XSL_NS_URL  = 'http://www.w3.org/1999/XSL/Transform'
 
 const attr = (el, attr)=> el.getAttribute?.(attr)
 ,   isText = e => e.nodeType === 3
-,   create = ( tag, t = '' ) => ( e => ((e.innerText = t||''),e) )(document.createElement( tag ))
+,   create = ( tag, t = '', d=document ) => ( e => ((e.innerText = t||''),e) )((d.ownerDocument || d ).createElement( tag ))
 ,   createText = ( d, t) => (d.ownerDocument || d ).createTextNode( t )
+,   emptyNode = n=> { while(n.firstChild) n.firstChild.remove(); return n; }
 ,   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) );
@@ -19,12 +20,12 @@ ASSERT(x)
     // if(!x)
     //     debugger
 }
-    function
+    export function
 xml2dom( xmlString )
 {
     return new DOMParser().parseFromString( xmlString, "application/xml" )
 }
-    function
+    export function
 xmlString(doc){ return new XMLSerializer().serializeToString( doc ) }
 
     function
@@ -95,7 +96,7 @@ tagUid( node )
             [...m].forEach(t=>
             {   if( t.index > l )
                     tt.push( txt( t.input.substring( l, t.index ) ))
-                const v = e.ownerDocument.createElement('xsl:value-of');
+                const v = node.querySelector('value-of').cloneNode();
                 v.setAttribute('select', t[1] );
                 tt.push(v);
                 l = t.index+t[0].length;
@@ -124,7 +125,7 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
         return tagUid(templateNode)
     const sanitizeXsl = xml2dom(`<xsl:stylesheet version="1.0" xmlns:xsl="${ XSL_NS_URL }" xmlns:xhtml="${ HTML_NS_URL }" xmlns:exsl="${EXSL_NS_URL}" exclude-result-prefixes="exsl" >   
         <xsl:output method="xml" />
-        <xsl:template match="/"><dce-root><xsl:apply-templates select="*"/></dce-root></xsl:template>
+        <xsl:template match="/"><dce-root xmlns="${ HTML_NS_URL }"><xsl:apply-templates select="*"/></dce-root></xsl:template>
         <xsl:template match="*[name()='template']"><xsl:apply-templates mode="sanitize" select="*|text()"/></xsl:template>
         <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>
@@ -141,7 +142,12 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
         {
             forEach$(n,'script', s=> s.remove() );
             const e = n.firstElementChild?.content || n.content
-            , asXmlNode = r => xslHtmlNs(xml2dom( '<xhtml/>' ).importNode(r, true));
+            , asXmlNode = r => {
+                const d = xml2dom( '<xhtml/>' )
+                ,     n = d.importNode(r, true);
+                d.replaceChild(n,d.documentElement);
+                return xslHtmlNs(n);
+            };
             if( e )
             {   const t = create('div');
                 [ ...e.childNodes ].map( c => t.append(c.cloneNode(true)) )
@@ -152,10 +158,17 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
     ,   xslDom = xml2dom(
         `<xsl:stylesheet version="1.0"
         xmlns:xsl="${ XSL_NS_URL }"
+        xmlns:xhtml="${ HTML_NS_URL }"
         xmlns:dce="urn:schemas-epa-wg:dce"
         xmlns:exsl="http://exslt.org/common"
         exclude-result-prefixes="exsl"
     >
+    <xsl:template match="ignore">
+        <xsl:choose>
+            <xsl:when test="//attr">{//attr}</xsl:when>
+            <xsl:otherwise>{def}</xsl:otherwise>
+        </xsl:choose>
+        <xsl:value-of select="."/></xsl:template>
     <xsl:template mode="payload"  match="attributes"></xsl:template>
     <xsl:template match="/">
         <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
@@ -188,6 +201,24 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
     ,   payload = $( xslDom, 'template[mode="payload"]');
     if( !fr )
         return console.error("transformation error",{ xml:tc.outerHTML, xsl: xmlString( sanitizeXsl ) });
+    const params = [];
+    [...fr.querySelectorAll('dce-root>param')].forEach(p=>
+    {   payload.append(p);
+        let select = attr(p,'select')?.split('??')
+        if( !select)
+        {   select = ['//'+attr(p, 'name'), `'${p.textContent}'`];
+            emptyNode(p);
+        }
+        if( select?.length>1){
+            p.removeAttribute('select');
+            const c = $( xslDom, 'template[match="ignore"]>choose').cloneNode(true);
+            c.firstElementChild.setAttribute('test',select[0]);
+            emptyNode(c.firstElementChild).append( createText(c,'{'+select[0]+'}'));
+            emptyNode(c.lastElementChild ).append( createText(c,'{'+select[1]+'}'));
+            p.append(c)
+        }
+        params.push(p)
+    });
 
     for( const c of fr.childNodes )
         payload.append(xslDom.importNode(c,true))
@@ -207,7 +238,9 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
 
     forEach$( payload,'slot', s => s.parentNode.replaceChild( slot2xsl(s), s ) )
 
-    return tagUid(xslDom)
+    const ret = tagUid(xslDom)
+    ret.params = params;
+    return ret;
 }
     export async function
 xhrTemplate(src)
@@ -375,6 +408,10 @@ CustomElement extends HTMLElement
         const sliceNames = [...this.templateNode.querySelectorAll('[slice]')].map(e=>attr(e,'slice'));
         class DceElement extends HTMLElement
         {
+            static get observedAttributes()
+            {
+                return templateDocs.reduce( (ret,t) =>{ ret.push( ...t.params.map(e=>attr(e,'name')) ); return ret; }, [] );
+            }
             connectedCallback()
             {   if( this.firstElementChild?.tagName === 'TEMPLATE' )
                 {   const t = this.firstElementChild;
@@ -409,7 +446,7 @@ CustomElement extends HTMLElement
                 const applySlices = ()=>
                 {   const processed = {}
 
-                    for(let ev; ev =  sliceEvents.pop(); )
+                    for(let ev; ev = sliceEvents.pop(); )
                     {   const s = attr( ev.target, 'slice');
                         if( processed[s] )
                             continue;
@@ -433,10 +470,10 @@ CustomElement extends HTMLElement
                             timeoutID =0;
                         },10);
                 };
-                const transform = ()=>
+                const transform = this.transform = ()=>
                 {
                     const ff = xp.map( (p,i) =>
-                    {   const f = p.transformToFragment(x, document)
+                    {   const f = p.transformToFragment(x.ownerDocument, document)
                         if( !f )
                             console.error( "XSLT transformation error. xsl:\n", xmlString(templateDocs[i]), '\nxml:\n', xmlString(x) );
                         return f
@@ -462,6 +499,20 @@ CustomElement extends HTMLElement
                 transform();
                 applySlices();
             }
+            attributeChangedCallback(name, oldValue, newValue)
+            {   if( !this.xml )
+                    return;
+                let a = this.xml.querySelector(`attributes>${name}`);
+                if( a )
+                    emptyNode(a).append( createText(a,newValue));
+                else
+                {   a = create( name, newValue, this.xml );
+                    a.append( createText(a,newValue) );
+                    this.xml.querySelector('attributes').append( a );
+                }
+
+                this.transform(); // needs throttling
+            }
             get dce(){ return dce }
         }
         if(tag)

package/demo/local-storage.html

@@ -82,18 +82,19 @@
     </table>
 </fieldset>
 <script type="module">
+    import { localStorageSetItem } from '../local-storage.js';
     import $ from 'https://unpkg.com/css-chain@1/CssChain.js';
 
     const basket = {cherries: 12, lemons:1 };
-    localStorage.setItem( 'basket', JSON.stringify(basket) );
+    localStorageSetItem( '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) );
+            localStorageSetItem( k, basket[k] = 1+1*localStorage[k] )
+            localStorageSetItem( 'basket', JSON.stringify(basket) );
             renderStorage();
         } );
 

package/demo/parameters.html

@@ -0,0 +1,52 @@
+<!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>parameters - 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="../index.html"><h3><code>custom-element</code> demo</h3></a>
+</nav>
+<html-demo-element legend="param as attributes definition" description="
+params needed to declare DCE attributes and track the attributes changes. It also be used by IDE and validation.
+">
+    <template>
+        <custom-element tag="dce-link" hidden>
+            <xsl:param name="p1" >default_P1</xsl:param>
+            <xsl:param name="p2" select="'always_p2'"  ></xsl:param>
+            <xsl:param name="p3" select="//p3 ?? 'def_P3' "  ></xsl:param>
+            p1:{$p1} <br/> p2: {$p2} <br/> p3: {$p3}
+        </custom-element>
+        <dce-link id="dce1"></dce-link>
+        <section>
+            <dce-link id="dce2" p1="123" p2="override ignored as select is defined"></dce-link> <br/>
+            <div><input id="i1" value="p1" />  <button onclick="dce2.setAttribute('p1',i1.value)"> set p1</button> </div>
+            <div><input id="i2" value="p2" />  <button onclick="dce2.setAttribute('p2',i2.value)"> set p2</button> </div>
+            <div><input id="i3" value="p3" />  <button onclick="dce2.setAttribute('p3',i3.value)"> set p3</button> </div>
+        </section>
+        <dce-link id="dce3" p1="123" p3="qwe"></dce-link> |
+
+    </template>
+</html-demo-element>
+
+
+
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
+</body>
+</html>

package/demo/s.xml

@@ -1 +1 @@
-<datadom><payload><i xmlns="http://www.w3.org/1999/xhtml" slot="">loading from HTML file ...</i></payload><attributes><src>/src/demo/html-template.html</src><tag/><data-smile>👼</data-smile><attr-1>a1</attr-1><attr-2>a2</attr-2></attributes><dataset><smile>👼</smile></dataset><slice/></datadom>
+<datadom><payload><i xmlns="http://www.w3.org/1999/xhtml" slot="">🍋</i></payload><attributes/><dataset/><slice/></datadom>

package/demo/s.xslt

@@ -1,140 +1,20 @@
-<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:dce="urn:schemas-epa-wg:dce"
-                xmlns:exsl="http://exslt.org/common" version="1.0" exclude-result-prefixes="exsl">
-    <xsl:template mode="payload" match="attributes">
-        <dce-root xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
-            <head data-dce-id="2">
-
-                <title data-dce-id="4">template based on HTML file</title>
-            </head>
-            <body data-dce-id="5">
-                <b id="wave" data-dce-id="6">👋</b>
-                <b id="ok" data-dce-id="7">👌</b>
-                <svg xmlns="http://www.w3.org/2000/svg" id="dwc-logo" viewBox="0 0 216 209.18" data-dce-id="8">
-                    <defs data-dce-id="9">
-                        <style data-dce-id="10">
-                            .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"
-                             data-dce-id="11"/>
-                    <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"
-                          data-dce-id="12"/>
-                    <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"
-                          data-dce-id="13"/>
-                    <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"
-                          data-dce-id="14"/>
-                    <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"
-                          data-dce-id="15"/>
-                    <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"
-                          data-dce-id="16"/>
-                    <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"
-                          data-dce-id="17"/>
-                    <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"
-                          data-dce-id="18"/>
-                    <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"
-                          data-dce-id="19"/>
-                    <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"
-                          data-dce-id="20"/>
-                    <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"
-                          data-dce-id="21"/>
-                    <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"
-                          data-dce-id="22"/>
-                    <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"
-                          data-dce-id="23"/>
-                    <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"
-                          data-dce-id="24"/>
-                    <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"
-                          data-dce-id="25"/>
-                    <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"
-                          data-dce-id="26"/>
-                    <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"
-                          data-dce-id="27"/>
-                    <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"
-                          data-dce-id="28"/>
-                    <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"
-                          data-dce-id="29"/>
-                    <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"
-                          data-dce-id="30"/>
-                    <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"
-                          data-dce-id="31"/>
-                    <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"
-                          data-dce-id="32"/>
-                </svg>
-                <math xmlns="http://www.w3.org/1998/Math/MathML" id="sophomores-dream" display="block" data-dce-id="33">
-                    <mrow data-dce-id="34">
-                        <msubsup data-dce-id="35">
-                            <mo data-dce-id="36">∫</mo>
-                            <mn data-dce-id="37">0</mn>
-                            <mn data-dce-id="38">1</mn>
-                        </msubsup>
-                        <msup data-dce-id="39">
-                            <mi data-dce-id="40">x</mi>
-                            <mi data-dce-id="41">x</mi>
-                        </msup>
-                        <mo rspace="0.22em" data-dce-id="42">⁢</mo>
-                        <mo rspace="0" data-dce-id="43">ⅆ</mo>
-                        <mi data-dce-id="44">x</mi>
-                        <mo data-dce-id="45">=</mo>
-                        <munderover data-dce-id="46">
-                            <mo data-dce-id="47">∑</mo>
-                            <mrow data-dce-id="48">
-                                <mi data-dce-id="49">n</mi>
-                                <mo data-dce-id="50">=</mo>
-                                <mn data-dce-id="51">1</mn>
-                            </mrow>
-                            <mn data-dce-id="52">∞</mn>
-                        </munderover>
-                        <msup data-dce-id="53">
-                            <mrow data-dce-id="54">
-                                <mo data-dce-id="55">(</mo>
-                                <mrow data-dce-id="56">
-                                    <mo form="prefix" data-dce-id="57">−</mo>
-                                    <mn data-dce-id="58">1</mn>
-                                </mrow>
-                                <mo data-dce-id="59">)</mo>
-                            </mrow>
-                            <mrow data-dce-id="60">
-                                <mi data-dce-id="61">n</mi>
-                                <mo data-dce-id="62">+</mo>
-                                <mn data-dce-id="63">1</mn>
-                            </mrow>
-                        </msup>
-                        <mo data-dce-id="64">⁢</mo>
-                        <msup data-dce-id="65">
-                            <mi data-dce-id="66">n</mi>
-                            <mrow data-dce-id="67">
-                                <mo form="prefix" data-dce-id="68">−</mo>
-                                <mi data-dce-id="69">n</mi>
-                            </mrow>
-                        </msup>
-                    </mrow>
-                </math>
-                <script type="module" src="/__web-dev-server__web-socket.js?wds-import-map=0" data-dce-id="70"/>
-            </body>
-        </dce-root>
-    </xsl:template>
+<?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: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:choose>
+        <xsl:value-of select="."/></xsl:template>
+    <xsl:template mode="payload" match="attributes"><xsl:param xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="p1"><xsl:choose>
+        <xsl:when test="//p1 "><xsl:value-of select="//p1 "/></xsl:when>
+        <xsl:otherwise><xsl:value-of select=" 'def_p1' "/></xsl:otherwise>
+    </xsl:choose></xsl:param><xsl:param xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="p2" select="'always_p2'"/><xsl:param xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="p3"><xsl:choose>
+        <xsl:when test="p3"><xsl:value-of select="p3"/></xsl:when>
+        <xsl:otherwise><xsl:value-of select="default_P3"/></xsl:otherwise>
+    </xsl:choose></xsl:param><dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1"><dce-text xmlns="" data-dce-id="2">
+        p1:<xsl:value-of select="$p1"/> </dce-text><br xmlns="" data-dce-id="3"/><dce-text xmlns="" data-dce-id="4"> p2: <xsl:value-of select="$p2"/> </dce-text><br xmlns="" data-dce-id="5"/><dce-text xmlns="" data-dce-id="6"> p3: <xsl:value-of select="$p3"/>
+    </dce-text></dce-root></xsl:template>
     <xsl:template match="/">
         <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
     </xsl:template>

package/demo/z.html

@@ -1,42 +1,59 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<dce-root data-dce-id="1" xmlns:dce="urn:schemas-epa-wg:dce" xmlns:xhtml="http://www.w3.org/1999/xhtml">
-    <table data-dce-id="2">
-        <tr data-dce-id="3">
-            <xhtml:th data-dce-id="4">href</xhtml:th>
-            <xhtml:td data-dce-id="5">http://localhost:63342/custom-element/demo/a.html?_ijt=qca6trk5kne6eo4s4tomq4egmm&amp;_ij_reload=RELOAD_ON_SAVE</xhtml:td>
-        </tr>
-        <tr data-dce-id="3">
-            <xhtml:th data-dce-id="4">origin</xhtml:th>
-            <xhtml:td data-dce-id="5">http://localhost:63342</xhtml:td>
-        </tr>
-        <tr data-dce-id="3">
-            <xhtml:th data-dce-id="4">protocol</xhtml:th>
-            <xhtml:td data-dce-id="5">http:</xhtml:td>
-        </tr>
-        <tr data-dce-id="3">
-            <xhtml:th data-dce-id="4">host</xhtml:th>
-            <xhtml:td data-dce-id="5">localhost:63342</xhtml:td>
-        </tr>
-        <tr data-dce-id="3">
-            <xhtml:th data-dce-id="4">hostname</xhtml:th>
-            <xhtml:td data-dce-id="5">localhost</xhtml:td>
-        </tr>
-        <tr data-dce-id="3">
-            <xhtml:th data-dce-id="4">port</xhtml:th>
-            <xhtml:td data-dce-id="5">63342</xhtml:td>
-        </tr>
-        <tr data-dce-id="3">
-            <xhtml:th data-dce-id="4">pathname</xhtml:th>
-            <xhtml:td data-dce-id="5">/custom-element/demo/a.html</xhtml:td>
-        </tr>
-        <tr data-dce-id="3">
-            <xhtml:th data-dce-id="4">search</xhtml:th>
-            <xhtml:td data-dce-id="5">?_ijt=qca6trk5kne6eo4s4tomq4egmm&amp;_ij_reload=RELOAD_ON_SAVE</xhtml:td>
-        </tr>
-        <tr data-dce-id="3">
-            <xhtml:th data-dce-id="4">hash</xhtml:th>
-            <xhtml:td data-dce-id="5"/>
-        </tr>
-    </table>
-    <location-element slice="window-url" data-dce-id="6"/>
-</dce-root>
+<!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";
+
+        button {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            flex: auto;
+            box-shadow: inset silver 0 0 1rem;
+            min-width: 12rem;
+            padding: 1rem;
+            color: coral;
+            text-shadow: 1px 1px silver;
+            font-weight: bolder;
+        }
+
+        caption {
+            padding: 1rem;
+            font-weight: bolder;
+            font-family: sans-serif;
+        }
+
+        code {
+            text-align: right;
+            min-width: 3rem;
+        }
+
+    </style>
+</head>
+<body>
+
+
+<custom-element tag="dce-link" hidden>
+    <xsl:param name="p1" select="//p1 ?? 'def_p1' "  ></xsl:param>
+    <xsl:param name="p2" select="'always_p2'"  ></xsl:param>
+    <xsl:param name="p3" >default_P3</xsl:param>
+    p1:{$p1} <br/> p2: {$p2} <br/> p3: {$p3}
+</custom-element>
+<section>
+    <dce-link id="dce1"></dce-link>
+    <div><input id="i1" value="p1" />  <button onclick="debugger; dce2.setAttribute('p1',i1.value)"> set p1</button> </div>
+    <div><input id="i2" value="p2" />  <button onclick="dce2.setAttribute('p2',i2.value)"> set p2</button> </div>
+    <div><input id="i3" value="p3" />  <button onclick="dce2.setAttribute('p3',i3.value)"> set p3</button> </div>
+</section>
+<dce-link id="dce2" p1="123" p2="override ignored as select is defined"></dce-link> |
+<dce-link id="dce3" p1="123" p3="qwe"></dce-link> |
+
+</body>
+</html>

package/index.html

@@ -14,6 +14,7 @@
     <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://github.com/EPA-WG/custom-element/blob/main/README.md">README</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>
@@ -25,13 +26,14 @@
         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>
-    <h4>Data layer demo</h4>
+    <h4>Features demo</h4>
         <a href="./demo/local-storage.html"     >local-storage      </a> |
         <a href="./demo/http-request.html"      >http-request       </a> |
         <a href="./demo/location-element.html"  >location-element   </a> |
         <a href="./demo/external-template.html" >external template  </a> <br/>
         <a href="./demo/hex-grid.html"          >hex grid lib       </a> |
         <a href="./demo/scoped-css.html"        >scoped CSS         </a> |
+        <a href="./demo/parameters.html"        >attributes         </a> |
         <a href="./demo/dom-merge.html"         >DOM merge on dynamic update </a>
     </section>
 </nav>

package/local-storage.js

@@ -9,22 +9,14 @@ const     string2value = (type, 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 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 valiue in storage
+        return  [   '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
@@ -41,14 +33,13 @@ export class LocalStorageElement extends HTMLElement
         }
         // todo apply type
         if( this.hasAttribute('value'))
-            localStorage.setItem( attr( this, 'key' ) )
+            localStorageSetItem( attr( this, 'key' ) )
         else
             fromStorage()
 
         if( this.hasAttribute('live') )
         {   const listener = (e => e.detail.key === attr( 'key' ) && fromStorage());
             window.addEventListener( 'local-storage', listener );
-            ensureTrackLocalStorage();
             this._destroy = ()=> window.removeEventListener('local-storage', listener );
         }
     }

package/location-element.js

@@ -3,7 +3,7 @@ const     attr = (el, attr)=> el.getAttribute(attr);
 export class LocationElement extends HTMLElement
 {
     static get observedAttributes()
-    {   return  [   'value' // populated from localStorage, if defined initially, sets the valiue in storage
+    {   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`

package/package.json

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