@epa-wg/custom-element 0.0.26 → 0.0.28

package/README.md

@@ -341,16 +341,16 @@ within template
 [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
 [hex-grid-url]:   https://unpkg.com/@epa-wg/custom-element@0.0/demo/hex-grid.html
-[hex-grid-image]: demo/hex-grid-transform.png
+[hex-grid-image]: https://unpkg.com/@epa-wg/custom-element@0.0.28/demo/hex-grid-transform.png
 [local-storage-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/local-storage.html
 [http-request-demo]:  https://unpkg.com/@epa-wg/custom-element@0.0/demo/http-request.html
 [location-demo]:  https://unpkg.com/@epa-wg/custom-element@0.0/demo/location.html
 [github-image]:   https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
 [npm-image]:      https://img.shields.io/npm/v/@epa-wg/custom-element.svg
 [npm-url]:        https://npmjs.org/package/@epa-wg/custom-element
-[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.26/coverage/src/custom-element/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.26/coverage/src/custom-element/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-dist@0.0.26/storybook-static/index.html?path=/story/welcome--introduction
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.28/coverage/src/custom-element/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.28/coverage/src/custom-element/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-dist@0.0.28/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.26",
+    "version": "0.0.28",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/custom-element.js

@@ -47,6 +47,7 @@ xml2dom( xmlString )
 }
     export function
 xmlString(doc){ return new XMLSerializer().serializeToString( doc ) }
+function x(doc) { return xmlString(doc) }
 
     function
 injectData( root, sectionName, arr, cb )
@@ -71,6 +72,12 @@ assureSlot( e )
     }
     return e;
 }
+    function
+keepAttributes(e, aNames)
+    {   e.getAttributeNames().forEach( n=> aNames.includes(n) || e.removeAttribute(n) ); }
+
+    export const
+sanitizeBlankText = payload=> [...payload].filter(e=>!(e.nodeType===3 && e.data.trim() ==='' ));
 
     export function
 obj2node( o, tag, doc )
@@ -145,22 +152,72 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
     if( templateNode.tagName === S || templateNode.documentElement?.tagName === S )
         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 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>
-        <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>
-        <xsl:template mode="sanitize" match="xsl:value-of|*[name()='slot']"><dce-text><xsl:copy><xsl:apply-templates mode="sanitize" select="*|@*|text()"/></xsl:copy></dce-text></xsl:template>
-        <xsl:template mode="sanitize" match="xhtml:*"><xsl:element name="{local-name()}"><xsl:apply-templates mode="sanitize" select="*|@*|text()"/></xsl:element></xsl:template>
-    </xsl:stylesheet>`)
+    <xsl:output method="xml"/>
+        <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>
+    <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>
+    <xsl:template mode="sanitize" match="xsl:value-of|*[name()='slot']">
+        <xsl:copy>
+            <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+        </xsl:copy>
+    </xsl:template>
+    <xsl:template mode="sanitize" match="xhtml:*">
+        <xsl:element name="{local-name()}">
+            <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+        </xsl:element>
+    </xsl:template>
+    <xsl:template mode="sanitize" match="xhtml:input">
+        <xsl:element name="{local-name()}">
+            <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+        </xsl:element>
+        <xsl:for-each select="*">
+            <xsl:copy>
+                <xsl:attribute name="for" >^</xsl:attribute>
+                <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+            </xsl:copy>
+        </xsl:for-each>
+    </xsl:template>
+</xsl:stylesheet>`)
     const sanitizeProcessor = new XSLTProcessor()
     ,   tc = (n =>
         {
+            forEach$(n,'custom-element', ce=>{
+                if( 'template' === ce.firstElementChild.localName )
+                {
+                    [...ce.firstElementChild.content.childNodes].forEach(n=>ce.append(n));
+                    ce.firstElementChild.remove();
+                }
+            })
             forEach$(n,'script', s=> s.remove() );
             const xslRoot = n.content ?? n.firstElementChild?.content ?? n.body ?? n;
             xslTags.forEach( tag => forEach$( xslRoot, tag, el=>toXsl(el,xslRoot) ) );
@@ -223,12 +280,19 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
     ,   payload = $( xslDom, 'template[mode="payload"]');
     if( !fr )
         return console.error("transformation error",{ xml:tc.outerHTML, xsl: xmlString( sanitizeXsl ) });
+    if( 'dce-root'!==fr.firstElementChild.localName )
+    {   const r = fr.ownerDocument.createElement('dce-root');
+        [...fr.childNodes].forEach(n=>r.append(n));
+        fr.append(r)
+    }
     const params = [];
     [...fr.querySelectorAll('dce-root>attribute')].forEach( a=>
     {
+        keepAttributes(a,'namespace,name,select');
         const p = cloneAs(a,'xsl:param')
         ,  name = attr(a,'name');
         payload.append(p);
+        keepAttributes(p,'select,name');
         let select = attr(p,'select')?.split('??')
         if( !select)
         {   select = ['//'+name, `'${p.textContent}'`];
@@ -236,8 +300,8 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
             p.setAttribute('name',name);
         }
         let val;
-        if( select?.length>1 ){
-            p.removeAttribute('select');
+        if( select?.length>1 )
+        {   p.removeAttribute('select');
             const c = $( xslDom, 'template[match="ignore"]>choose').cloneNode(true);
             emptyNode(c.firstElementChild).append( createText(c,'{'+select[0]+'}'));
             emptyNode(c.lastElementChild ).append( createText(c,'{'+select[1]+'}'));
@@ -270,7 +334,7 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
         for( let c of s.childNodes)
             v.lastElementChild.append(c)
         return v
-    }
+    };
 
     forEach$( payload,'slot', s => s.parentNode.replaceChild( slot2xsl(s), s ) )
 
@@ -419,7 +483,8 @@ const loadTemplateRoots = async ( src, dce )=>
         if( hash )
         {   const ret = dom.querySelectorAll('#'+hash);
             if( ret.length )
-                return [...ret]
+                return [...ret];
+            console.error('template not found',src+'#'+hash);
             return [dce]
         }
         return [dom]
@@ -562,6 +627,8 @@ CustomElement extends HTMLElement
     static observedAttributes = ['src','tag','hidden'];
     async connectedCallback()
     {
+        if(this.firstElementChild && this.firstElementChild.localName !== 'template')
+            console.warn('custom-element used without template wrapping content\n', this.outerHTML);
         const templateRoots = await loadTemplateRoots( attr( this, 'src' ), this )
         ,               tag = attr( this, 'tag' )
         ,           tagName = tag ? tag : 'dce-'+crypto.randomUUID();
@@ -574,7 +641,13 @@ CustomElement extends HTMLElement
                 this.append(s);
             })
         const templateDocs = templateRoots.map( n => createXsltFromDom( n ) )
-        , xp = templateDocs.map( (td, p) =>{ p = new XSLTProcessor(); p.importStylesheet( td ); return p })
+        , xp = templateDocs.map( (td, p) =>
+        {   p = new XSLTProcessor();
+            try{ p.importStylesheet( td ) }
+            catch( e )
+                {   console.error(e, xmlString(td)) }
+            return p
+        })
 
         Object.defineProperty( this, "xsltString", { get: ()=>templateDocs.map( td => xmlString(td) ).join('\n') });
 
@@ -591,16 +664,16 @@ CustomElement extends HTMLElement
             static get observedAttributes(){ return declaredAttributes.map( a=>attr(a,'name')); }
             #inTransform = 0;
             connectedCallback()
-            {   let payload = this.childNodes;
+            {   let payload = sanitizeBlankText(this.childNodes);
                 if( this.firstElementChild?.tagName === 'TEMPLATE' )
                 {
                     if( this.firstElementChild !== this.lastElementChild )
                         { console.error('payload should have TEMPLATE as only child', this.outerHTML ) }
                     const t = this.firstElementChild;
                     t.remove();
-                    payload = t.content.childNodes;
+                    payload = sanitizeBlankText(t.content.childNodes);
 
-                    for( const n of [...t.content.childNodes] )
+                    for( const n of payload )
                         if( n.localName === 'style' ){
                             const id = assureUID(this,'data-dce-style')
                             n.innerHTML= `${tagName}[data-dce-style="${id}"]{${n.innerHTML}}`;
@@ -675,18 +748,39 @@ CustomElement extends HTMLElement
                         }
                     })
 
+                    function getSliceTarget(el)
+                    {   let r = el;
+                        if( el.localName === 'slice')
+                        {   const ref= attr(el,'for');
+                            if( !ref )
+                                r = el.parentElement;
+                            if( '^' === ref )
+                            {   do r = r.previousElementSibling;
+                                while( r.localName === 'slice' )
+                            } else
+                                r = this.querySelector(ref)
+
+                            if( !r )
+                                return console.warn(`can not find selector in "slice for=${ref}" `, el.outerHTML);
+                            attr(el,'slice') || el.setAttribute('slice', attr(el,'name'))
+                        }
+                        return r;
+                    }
                     forEach$( this,'[slice],[slice-event]', el =>
-                    {   if( !el.dceInitialized )
+                    {   let evs = attr(el,'slice-event');
+                        const sVal = el.hasAttribute('slice-value') || el.hasAttribute('value') || el.value;
+                        const tgt = getSliceTarget(el);
+                        if( !el.dceInitialized )
                         {   el.dceInitialized = 1;
-                            let evs = attr(el,'slice-event');
-                            if( el.hasAttribute('custom-validity') )
+                            if( tgt.hasAttribute('custom-validity') )
                                 evs += ' change submit';
 
                             [...new Set((evs || 'change') .split(' '))]
-                                .forEach( t=> (el.localName==='slice'? el.parentElement : el)
-                                    .addEventListener( t, ev=>
+                                .forEach( t=>
+                                    tgt.addEventListener( t, ev=>
                                     {   ev.sliceElement = el;
                                         ev.sliceEventSource = ev.currentTarget || ev.target;
+                                        ev.sliceProcessed = 0;
                                         const slices = event2slice( sliceRoot, attr( ev.sliceElement, 'slice'), ev, this );
 
                                         forEach$(this,'[custom-validity]',el =>
@@ -699,7 +793,7 @@ CustomElement extends HTMLElement
                                             }catch(err)
                                                 { console.error(err, 'xPath', x) }
                                         })
-                                        const x = attr(el,'custom-validity')
+                                        const x = attr(tgt,'custom-validity')
                                         ,     v = x && xPath( x, attrsRoot )
                                         ,   msg = v === true? '' : v;
 
@@ -725,8 +819,8 @@ CustomElement extends HTMLElement
                                         this.onSlice(ev);
                                     } ));
                             if( !evs || evs.includes('init') )
-                            {   if( el.hasAttribute('slice-value') || el.hasAttribute('value') || el.value )
-                                    this.onSlice({type:'init', target: el, sliceElement:el, sliceEventSource:el })
+                            {   if( sVal )
+                                    this.onSlice({type:'init', target: tgt, sliceElement:el, sliceEventSource:tgt })
                                 else
                                     el.value = sliceXPath( attr(el,'slice') )
                             }

package/demo/demo.css

@@ -4,13 +4,12 @@ html
 }
 body,nav{ display: flex; flex-wrap: wrap; align-content: stretch; gap: 1rem; }
 body>*{flex: auto;}
-nav{ flex-direction: column;}
-custom-element+*,
-custom-element+*+*,
-custom-element:not([tag]),
-dce-link,dce-1-slot,dce-2-slot,dce-3-slot,dce-4-slot,dce-2-slots,greet-element,pokemon-tile,
-dce-1,dce-2,dce-3,dce-4,dce-internal,dce-hash
-{ box-shadow: 0 0 0.5rem lime; padding: 1rem; display: inline-block; flex:1; }
+nav
+{   flex-direction: column;
+    dce-root{ box-shadow:none; padding: 0;}
+}
+
+html-demo-element *:has(>dce-root){ box-shadow: 0 0 0.5rem lime; padding: 1rem;  flex:1; display: block; }
 script{ display:none !important; }
 dd{ padding: 1rem;}
 p{ margin: 0;}

package/demo/external-template.html

@@ -141,13 +141,13 @@
 <html-demo-element legend="6. HTML, SVG by ID within external file" description="Should render 👋, svg, formula">
     <a href="html-template.html">html-template.html</a>
     <template>
-        <custom-element src="html-template.html#wave">
+        <custom-element src="./html-template.html#wave">
             <template><i>loading HTML from templates file ...</i></template>
         </custom-element>
-        <custom-element src="html-template.html#dwc-logo">
+        <custom-element src="./html-template.html#dwc-logo">
             <template><i>loading SVG from templates file ...</i></template>
         </custom-element>
-        <custom-element src="html-template.html#sophomores-dream">
+        <custom-element src="./html-template.html#sophomores-dream">
             <template><i>loading MathML from HTML file ...</i></template>
         </custom-element>
     </template>

package/demo/npm-versions-demo.html

@@ -4,8 +4,16 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>DOM merge - Declarative Custom Element implementation demo</title>
     <link rel="icon" href="./wc-square.svg"/>
-
+    <script type="importmap">
+        {
+          "imports": {
+            "@epa-wg/custom-element/": "../",
+            "@epa-wg/custom-element-dist/": "../"
+          }
+        }
+    </script>
     <script type="module" src="../http-request.js"></script>
+    <script type="module" src="../location-element.js"></script>
     <script type="module" src="../custom-element.js"></script>
     <style>
         @import "./demo.css";
@@ -40,16 +48,20 @@
 <html-demo-element legend="1. NPM package version picker"
                    description="defaults, last version should be preselected">
     <template>
-        <custom-element tag="npm-version" src="./npm-versions.html#npm-version"></custom-element>
-        <npm-version package-name="@epa-wg/custom-element-dist"></npm-version>
+        <custom-element src="./npm-versions.html#npm-version"
+                        package-name="@epa-wg/custom-element-dist"></custom-element>
     </template>
 </html-demo-element>
 
 <html-demo-element legend="2. preselected NPM package version picker"
-                   description="version 22 should be selected">
+                   description="version 22 should be selected and date shown">
     <template>
         <custom-element tag="custom-element-version" src="./npm-versions.html#npm-version"></custom-element>
-        <custom-element-version current-version="0.0.22" package-name="@epa-wg/custom-element"></custom-element-version>
+        <custom-element-version
+                package-name="@epa-wg/custom-element"
+                current-version="0.0.22"
+                show-date="true"
+        ></custom-element-version>
     </template>
 </html-demo-element>
 
@@ -90,11 +102,12 @@
 
 <html-demo-element legend="5. control version in URL"
                    description="">
-    1. <button onclick="window.location.hash = `#@epa-wg/custom-element-dist@0.0.26/storybook-static/index.html`">set in page URL</button>
-        (can be skipped when run from unpkg.com)<br/>
+    1. <button onclick="window.location.hash = `#@epa-wg/custom-element-dist@0.0.25/storybook-static/index.html`">set in page URL to version 0.0.25</button><br/>
     2. switch the package version in select and observe the URL change.
     <template>
-        <custom-element src="./npm-versions.html#npm-version-to-url" package-name="custom-element-dist" current-version="0.0.26"></custom-element>
+        <custom-element src="@epa-wg/custom-element-dist/demo/npm-versions.html#npm-version-to-url"
+                package-name="@epa-wg/custom-element-dist"
+                ></custom-element>
     </template>
 </html-demo-element>
 

package/demo/npm-versions.html

@@ -4,6 +4,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>npm-version template</title>
     <link rel="icon" href="./wc-square.svg"/>
+
 </head>
 <body>
 
@@ -11,28 +12,29 @@
 <a href="./npm-versions-demo.html">docs</a>
 <template id="npm-version">
     <attribute name="package-name"></attribute>
-    <attribute name="current-version"></attribute>
+    <attribute name="current-version" aria-description="version to select"></attribute>
+    <attribute name="show-date" aria-description="set to 'true' to append the date to the version"></attribute>
     <attribute name="value" select="//selected-version"></attribute>
-
     <http-request
-            url="https://registry.npmjs.org/@epa-wg/custom-element-dist"
+            url="https://registry.npmjs.org/{$package-name}"
             method="GET"
             header-accept="application/json"
             slice="versions-ajax"></http-request>
 
-    <label><slot name="label">{$package-name} version:</slot>
+    <label>
+        <slot name="label"><var>{$package-name}</var> version:</slot>
         <xhtml:select slice="selected-version" autocomplete="off" name="version">
             <for-each select="//versions/*">
                 <option value="{./@version}">
                     <variable name="item-version">{./@version}</variable>
-                    { $item-version } - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}
+                    { $item-version }<if test="$show-date = 'true' "> - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}</if>
                 </option>
             </for-each>
             <for-each select="//versions/*">
                 <if test="./@version = $current-version">
                     <option selected value="{./@version}">
                         <variable name="item-version">{./@version}</variable>
-                        { $item-version } - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}
+                        { $item-version }<if test="$show-date = 'true' "> - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}</if>
                     </option>
                 </if>
             </for-each>
@@ -41,25 +43,52 @@
 </template>
 
 <template id="npm-version-to-url">
-            <variable name="url" select="//window-location/value/@href"></variable>
-            <variable name="current-version" >0{
-                substring-before(substring-after(substring($url, string-length(substring-before($url, '/')) - string-length(substring-before(substring-before($url, '/'), '@0')) + 2), '@0'), '/')
-            }</variable>
-            <location-element slice="window-location" live>
-                <if test=" not(//selected-version = $current-version ) and not(//selected-version = '')  ">
-                    <attribute name="src">{ concat( substring-before($url, $current-version),
-                                                    //selected-version,
-                                                    substring-after($url, $current-version) ) }</attribute>
-                    <attribute name="method">location.href</attribute>
-                </if>
-            </location-element>
-            <http-request
-                url="https://registry.npmjs.org/@epa-wg/custom-element-dist"
-                method="GET"
-                header-accept="application/json"
-                slice="versions-ajax" ></http-request>
+    <attribute name="package-name"></attribute>
+    <attribute name="value" select="//selected-version"></attribute>
+    <variable name="url" select="//window-location/value/@href"></variable>
+
+    <variable name="url-version">0{
+            substring-before(substring-after(substring($url, string-length(substring-before($url, '/')) -
+            string-length(substring-before(substring-before($url, '/'), '@0')) + 2), '@0'), '/')
+        }</variable>
 
-            <custom-element src="#npm-version" slice="selected-version"></custom-element>
-        </template>
+    <location-element slice="window-location" live>
+        <if test="//selected-version">
+            <if test=" not(//url-version = //selected-version ) ">
+                <attribute name="src">{ concat( substring-before($url, $url-version),
+                    //selected-version,
+                    substring-after($url, $url-version) ) }
+                </attribute>
+                <attribute name="method">location.href</attribute>
+            </if>
+        </if>
+    </location-element>
+
+    <http-request
+            url="https://registry.npmjs.org/{$package-name}"
+            method="GET"
+            header-accept="application/json"
+            slice="versions-ajax"></http-request>
+
+    <label>
+        <slot name="label">{$package-name} version:</slot>
+        <xhtml:select slice="selected-version" autocomplete="off" name="version">
+            <for-each select="//versions/*">
+                <option value="{./@version}">
+                    <variable name="item-version">{./@version}</variable>
+                    { $item-version } - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}
+                </option>
+            </for-each>
+            <for-each select="//versions/*">
+                <if test="./@version = $url-version">
+                    <option selected value="{./@version}">
+                        <variable name="item-version">{./@version}</variable>
+                        { $item-version } - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}
+                    </option>
+                </if>
+            </for-each>
+        </xhtml:select>
+    </label>
+</template>
 </body>
 </html>

package/demo/s.xml

@@ -1,28 +1,18 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <datadom>
     <payload xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
-        <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
-        <npm-version xmlns="http://www.w3.org/1999/xhtml" slice="selected-version" package-name="@epa-wg/custom-element"
-                     slot=""></npm-version>
-        <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
-        <p xmlns="http://www.w3.org/1999/xhtml" slot="">
-            <code>selected-version</code>
-            slice: {//selected-version}
-        </p>
-        <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
+        <a xmlns="http://www.w3.org/1999/xhtml" href="#" data-dce-id="4" slot="">link 1</a>
+        <a xmlns="http://www.w3.org/1999/xhtml" href="#" data-dce-id="5" slot="">link 2</a>
+        <a xmlns="http://www.w3.org/1999/xhtml" href="#" data-dce-id="6" slot="">link 3</a>
     </payload>
     <attributes>
-        <tag>dce-bbc8e8b4-575f-40d3-9880-2f1d56d85d80</tag>
+        <xmlns/>
+        <justify>end</justify>
+        <data-dce-id>2</data-dce-id>
+        <direction>row</direction>
     </attributes>
-    <dataset/>
-    <slice>
-        <selected-version xmlns="" slice="selected-version" package-name="@epa-wg/custom-element" data-dce-id="2"
-                          current-version="" value="0.0.21">
-            <event isTrusted="false" sliceProcessed="1" type="change" eventPhase="2" bubbles="true" cancelable="false"
-                   defaultPrevented="false" composed="false" timeStamp="2225577.4000000954" returnValue="true"
-                   cancelBubble="false" NONE="0" CAPTURING_PHASE="1" AT_TARGET="2" BUBBLING_PHASE="3">
-                <detail package-name="@epa-wg/custom-element"/>
-            </event>
-        </selected-version>
-    </slice>
+    <dataset>
+        <dceId>2</dceId>
+    </dataset>
+    <slice/>
 </datadom>

package/demo/s.xslt

@@ -1,78 +1,20 @@
-<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">
+<?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">
-        <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
-            <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="methods">
-                <a xmlns="" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/href" data-dce-id="2">
-                    location.href
-                </a>
-                <a xmlns="" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hash" data-dce-id="3">
-                    location.hash
-                </a>
-                <a xmlns="" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/assign" data-dce-id="4">
-                    location.assign
-                </a>
-            </xsl:variable>
-            <fieldset xmlns="" data-dce-id="5">
-                <legend data-dce-id="6">
-                    <b data-dce-id="7">set-by</b>
-                </legend>
-                <xsl:for-each xmlns:xsl="http://www.w3.org/1999/XSL/Transform" select="$methods">
-                    <p data-dce-id="8">
-                        <label data-dce-id="9">
-                            <input type="radio" name="method" value="{.}" data-dce-id="10"/>
-                            <dce-text data-dce-id="11">
-                                <xsl:value-of select="."/>
-                            </dce-text>
-                        </label>
-                        <a class="infolink" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/assign"
-                           data-dce-id="12">mdn
-                        </a>
-                    </p>
-                </xsl:for-each>
-                <label data-dce-id="13">
-                    <input type="radio" name="method" value="location.href" data-dce-id="14"/>
-                    <dce-text data-dce-id="15">location.href</dce-text>
-                </label>
-                <label data-dce-id="16">
-                    <input type="radio" name="method" value="location" data-dce-id="17"/>
-                    <dce-text data-dce-id="18">location</dce-text>
-                </label>
-                <label data-dce-id="19">
-                    <input type="radio" name="method" value="location.replace" data-dce-id="20"/>
-                    <dce-text data-dce-id="21">location.replace</dce-text>
-                </label>
-                <label data-dce-id="22">
-                    <input type="radio" name="method" value="location.assign" data-dce-id="23"/>
-                    <dce-text data-dce-id="24">location.assign</dce-text>
-                </label>
-                <label data-dce-id="25">
-                    <input type="radio" name="method" value="location.hash" data-dce-id="26"/>
-                    <dce-text data-dce-id="27">location.hash</dce-text>
-                </label>
-                <label data-dce-id="28">
-                    <input type="radio" name="method" value="history.pushState" data-dce-id="29"/>
-                    <dce-text data-dce-id="30">history.pushState</dce-text>
-                </label>
-                <label data-dce-id="31">
-                    <input type="radio" name="method" value="history.replaceState" data-dce-id="32"/>
-                    <dce-text data-dce-id="33">history.replaceState</dce-text>
-                </label>
-            </fieldset>
-        </dce-root>
-    </xsl:template>
+            <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 name="direction"><xsl:choose>
+            <xsl:when test="//direction"><xsl:value-of select="//direction"/></xsl:when>
+            <xsl:otherwise><xsl:value-of select="'row'"/></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"><xsl:attribute name="direction"><xsl:choose>
+            <xsl:when test="//direction"><xsl:value-of select="//direction"/></xsl:when>
+            <xsl:otherwise><xsl:value-of select="'row'"/></xsl:otherwise>
+        </xsl:choose></xsl:attribute><xsl:call-template name="slot">
+            <xsl:with-param name="slotname" select="''"/>
+            <xsl:with-param name="defaultvalue"/>
+        </xsl:call-template></dce-root></xsl:template>
     <xsl:template match="/">
         <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
     </xsl:template>
@@ -81,7 +23,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/ss.html

@@ -1,57 +1,24 @@
-<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>
+<?xml version="1.0" encoding="UTF-8"?>
+<dce-root data-dce-id="1" label="Number" name="" placeholder="Enter the numeric value" type="text" value=""
+          xmlns="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce"
+          xmlns:xhtml="http://www.w3.org/1999/xhtml"><pre data-dce-id="2" xmlns="">                //focused
+                //suggest
+                //selected
+                $selected-value </pre>
+    <label data-dce-id="3">
+        <dce-text data-dce-id="4">Number</dce-text>
+        <input data-dce-id="5" name="" placeholder="Enter the numeric value" type="text" value="">
+        <slice data-dce-id="6" name="focused" slice-event="focus" slice-value="1"/>
+        <slice data-dce-id="7" name="selected" slice-event="input"/>
+        </input></label>
+    <fieldset data-dce-id="8" form="cem-autocomplete-form" xmlns=""><label data-dce-id="9" value="one"><input
+            data-dce-id="10" name="cem-autocomplete" slice="suggest" slice-event="input" type="radio" value="one"/>
+        <dce-text data-dce-id="11">One</dce-text>
+    </label><label data-dce-id="9" value="two"><input data-dce-id="10" name="cem-autocomplete" slice="suggest" slice-event="input"
+                                                      type="radio" value="two"/>
+        <dce-text data-dce-id="11">Two</dce-text>
+    </label><label data-dce-id="9" value="three"><input data-dce-id="10" name="cem-autocomplete" slice="suggest"
+                                                        slice-event="input" type="radio" value="three"/>
+        <dce-text data-dce-id="11">Three</dce-text>
+    </label></fieldset>
+</dce-root>

package/docs/remdering.md

@@ -0,0 +1,7 @@
+# transformation lifecycle
+
+# embedded CE rendering
+
+* render outer CE
+* render inner CE
+* 

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.26",
+    "version": "0.0.28",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

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.26",
+    "version": "0.0.28",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/index.html

@@ -4,7 +4,17 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>custom-element Declarative Custom Element implementation demo</title>
     <link rel="icon" href="demo/wc-square.svg" />
-    <script type="module" src="custom-element.js"></script>
+    <script type="importmap">
+        {
+          "imports": {
+            "@epa-wg/custom-element/": "./",
+            "@epa-wg/custom-element-dist/": "./"
+          }
+        }
+    </script>
+    <script type="module" src="./http-request.js"></script>
+    <script type="module" src="./location-element.js"></script>
+    <script type="module" src="./custom-element.js"></script>
     <style>
         @import "demo/demo.css";
     </style>
@@ -18,6 +28,12 @@
         | <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>
+        |   <custom-element src="@epa-wg/custom-element/demo/npm-versions.html#npm-version-to-url"
+                            slice="selected" package-name="@epa-wg/custom-element">
+                <i slot="label">version:</i>
+            </custom-element>
+
+
     </div>
     <p>
         This <em>Declarative Custom Element</em> allows to define<br/>
@@ -38,7 +54,8 @@
         <a href="./demo/parameters.html"        >attributes         </a> |
         <a href="./demo/data-slices.html"       >data slices/events </a> |
         <a href="./demo/form.html"              >Form validation    </a> |
-        <a href="./demo/dom-merge.html"         >DOM merge on dynamic update </a>
+        <a href="./demo/dom-merge.html"         >DOM merge on dynamic update </a><br/>
+        <a href="./demo/npm-versions-demo.html">npm version         </a>
     </section>
 </nav>
 <html-demo-element legend="1. simple payload"

package/local-storage.js

@@ -21,29 +21,34 @@ const     string2value = (type, v) =>
 
 let originalSetItem,originalRemoveItem,originalClear;
 
+export function localStorage_setItem( key, value )
+{   originalSetItem.call(localStorage, key, value);
+    window.dispatchEvent( new CustomEvent('local-storage',{detail:{key,value}}) );
+}
+export function localStorage_removeItem( key )
+{   originalRemoveItem.call(localStorage, key);
+    window.dispatchEvent( new CustomEvent('local-storage',{detail:{key}}) );
+}
+
+export function localStorage_clear()
+{   originalClear.call(localStorage);
+    window.dispatchEvent( new CustomEvent('local-storage',{detail:{}}) );
+}
+
 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}}) );
-        };
+    localStorage.setItem = localStorage_setItem;
     originalRemoveItem = localStorage.removeItem;
-    localStorage.removeItem = function( key, ...rest )
-        {   originalRemoveItem.apply(this, [ key, ...rest ]);
-            window.dispatchEvent( new CustomEvent('local-storage',{detail:{key}}) );
-        };
+    localStorage.removeItem = localStorage_removeItem;
     originalClear = localStorage.clear;
-    localStorage.clear = function( ...rest )
-        {   originalClear.apply(this, [ ...rest ]);
-            window.dispatchEvent( new CustomEvent('local-storage',{detail:{}}) );
-        };
+    localStorage.clear = localStorage_clear;
 }
+ensureTrackLocalStorage();
 
 export function localStorageSetItem(key, value)
-{   localStorage.setItem(key, value);
-    window.dispatchEvent( new CustomEvent('local-storage',{detail:{key,value}}) );
+{   localStorage_setItem(key, value);
 }
 export class LocalStorageElement extends HTMLElement
 {

package/module-url.js

@@ -10,9 +10,10 @@ export class ModuleUrl extends HTMLElement
 
     sliceInit()
     {   let path = attr(this,'src');
+
         try
         {   const url =  '.' === path.charAt(0)
-                ? new URL(path, this.closest('[base]')?.getAttribute('base') ).href
+                ? new URL(path, this.closest('[base]')?.getAttribute('base') || location.href).href
                 : import.meta.resolve(path);
             this.setAttribute('value',this.value = url );
         }catch( er )
@@ -30,4 +31,4 @@ export class ModuleUrl extends HTMLElement
 }
 
 window.customElements.define( 'module-url', ModuleUrl );
-export default ModuleUrl;
+export default ModuleUrl;

package/package.json

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

package/demo/a.html

@@ -1,60 +0,0 @@
-<!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>Data slices - Declarative Custom Element implementation demo</title>
-    <link rel="icon" href="./wc-square.svg"/>
-
-    <script type="module" src="../http-request.js"></script>
-    <script type="module" src="../custom-element.js"></script>
-    <style>
-        @import "./demo.css";
-
-        label {
-            display: flex;
-        }
-
-        label:has(input[type="text"],input[type="password"],input:not([type]) ) {
-            flex-direction: column;
-        }
-
-        nav {
-            max-width: 32em;
-        }
-    </style>
-    <!-- https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html
-         todo: apply setCustomValidity( warningStr )
-    -->
-
-</head>
-<body>
-
-<fieldset>
-    <legend><b style="color:green">green</b> in instance style can be overridden in payload as <i
-            style="color:red">red</i> in 1st instance
-    </legend>
-    <custom-element tag="dce-3">
-        <template>
-            <u>
-                <slot>is green</slot>
-            </u>
-        </template>
-        <style>dce-3 {
-            color: green
-        }</style>
-    </custom-element>
-   <u>should be</u> <i style="color:red">red</i>:
-    <dce-3 id="dce32">
-        <template>
-            <style> color:red; </style>
-            <u>red</u>
-        </template>
-    </dce-3> <br/>
-    should be GREEN:
-    <dce-3 id="dce31">green</dce-3>
-</fieldset>
-
-<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
-
-</body>
-</html>

package/demo/b.html

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<dce-root data-dce-id="1" xmlns="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce"
-          xmlns:xhtml="http://www.w3.org/1999/xhtml"><u data-dce-id="2" xmlns="">
-    <dce-text data-dce-id="3">
-        <xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
-        <xhtml:style xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot="" title="ABC">
-            dce-3[data-dce-style="54f96d52-ce70-435d-83c4-b421357d9a17"]{ color:red; }
-        </xhtml:style>
-        <xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
-        <xhtml:u xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot="">red</xhtml:u>
-        <xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
-    </dce-text>
-</u></dce-root>

package/demo/s1.xslt

@@ -1,60 +0,0 @@
-<?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">
-        <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
-            <u xmlns="" data-dce-id="2">
-                <dce-text data-dce-id="3">
-                    <xsl:call-template name="slot">
-                        <xsl:with-param name="slotname" select="''"/>
-                        <xsl:with-param name="defaultvalue">
-                            <dce-text xmlns="" data-dce-id="4">is green</dce-text>
-                        </xsl:with-param>
-                    </xsl:call-template>
-                </dce-text>
-            </u>
-        </dce-root>
-    </xsl:template>
-    <xsl:template match="/">
-        <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
-    </xsl:template>
-
-    <xsl:template match="@*|node()" mode="copy-html">
-      <xsl:copy><xsl:apply-templates select="@*|node()" mode="copy-html"/></xsl:copy>
-    </xsl:template>
-    <xsl:template match="node()[starts-with(name(),'xhtml:')]" mode="copy-html">
-      <xsl:element name="{local-name()}"><xsl:apply-templates select="@*|node()" mode="copy-html"/></xsl:element>
-    </xsl:template>
-
-
-    <xsl:template name="slot">
-        <xsl:param name="slotname"/>
-        <xsl:param name="defaultvalue"/>
-        <xsl:choose>
-            <xsl:when test="//payload/*[@slot=$slotname]">
-                <xsl:apply-templates mode="copy-html" select="//payload/*[@slot=$slotname]"/>
-            </xsl:when>
-            <xsl:otherwise>
-                <xsl:apply-templates mode="copy-html" select="$defaultvalue"/>
-            </xsl:otherwise>
-        </xsl:choose>
-    </xsl:template>
-    <xsl:variable name="js-injected-body">
-        <xsl:call-template name="slot">
-            <xsl:with-param name="slotname" select="''"/>
-            <xsl:with-param name="defaultvalue"/>
-        </xsl:call-template>
-    </xsl:variable>
-</xsl:stylesheet>

package/demo/z.html

@@ -1,62 +0,0 @@
-<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">
-    <location-element xmlns="" slice="window-url" live="" data-dce-id="2"></location-element>
-    <table xmlns="" data-dce-id="3">
-        <tbody data-dce-id="0-1">
-        <tr data-dce-id="4">
-            <th data-dce-id="5"><h3 data-dce-id="6"> URL properties </h3></th>
-            <td data-dce-id="7">9</td>
-        </tr>
-        <tr data-dce-id="10">
-            <th data-dce-id="11">href</th>
-            <td data-dce-id="12">http://localhost:63342/custom-element/demo/a.html?_ijt=dmv0p4go000q47lg48i5im92f7&amp;_ij_reload=RELOAD_ON_SAVE</td>
-        </tr>
-        <tr data-dce-id="10-1">
-            <th data-dce-id="11">origin</th>
-            <td data-dce-id="12">http://localhost:63342</td>
-        </tr>
-        <tr data-dce-id="10-2">
-            <th data-dce-id="11">protocol</th>
-            <td data-dce-id="12">http:</td>
-        </tr>
-        <tr data-dce-id="10-3">
-            <th data-dce-id="11">host</th>
-            <td data-dce-id="12">localhost:63342</td>
-        </tr>
-        <tr data-dce-id="10-4">
-            <th data-dce-id="11">hostname</th>
-            <td data-dce-id="12">localhost</td>
-        </tr>
-        <tr data-dce-id="10-5">
-            <th data-dce-id="11">port</th>
-            <td data-dce-id="12">63342</td>
-        </tr>
-        <tr data-dce-id="10-6">
-            <th data-dce-id="11">pathname</th>
-            <td data-dce-id="12">/custom-element/demo/a.html</td>
-        </tr>
-        <tr data-dce-id="10-7">
-            <th data-dce-id="11">search</th>
-            <td data-dce-id="12">?_ijt=dmv0p4go000q47lg48i5im92f7&amp;_ij_reload=RELOAD_ON_SAVE</td>
-        </tr>
-        <tr data-dce-id="10-8">
-            <th data-dce-id="11">hash</th>
-            <td data-dce-id="12"></td>
-        </tr>
-        </tbody>
-    </table>
-    <h3 data-dce-id="9"> URL parameters </h3>
-    <table xmlns="" data-dce-id="8">
-
-        <tbody data-dce-id="0-1">
-        <tr data-dce-id="10">
-            <th data-dce-id="11">_ijt</th>
-            <td data-dce-id="12">dmv0p4go000q47lg48i5im92f7</td>
-        </tr>
-        <tr data-dce-id="10-1">
-            <th data-dce-id="11">_ij_reload</th>
-            <td data-dce-id="12">RELOAD_ON_SAVE</td>
-        </tr>
-        </tbody>
-    </table>
-</dce-root>

package/demo/z.js

@@ -1,9 +0,0 @@
-    import circle from "circle";
-    import circle2 from "lib-root/circle.js";
-    console.log(circle())
-        try{
-
-            console.log(import.meta.resolve('lib-root/a.js'))
-        }catch( err ){
-            console.error(err.message)
-        }

package/demo/z.xml

@@ -1,60 +0,0 @@
-<?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">
-    <location-element slice="window-url" data-dce-id="2"/>
-    <table data-dce-id="3">
-        <tr data-dce-id="4">
-            <th data-dce-id="5">
-                <u data-dce-id="6">URL properties</u>
-            </th>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">href</th>
-            <td data-dce-id="9">http://localhost:63342/custom-element/demo/a.html?_ijt=qca6trk5kne6eo4s4tomq4egmm&amp;_ij_reload=RELOAD_ON_SAVE</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">origin</th>
-            <td data-dce-id="9">http://localhost:63342</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">protocol</th>
-            <td data-dce-id="9">http:</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">host</th>
-            <td data-dce-id="9">localhost:63342</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">hostname</th>
-            <td data-dce-id="9">localhost</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">port</th>
-            <td data-dce-id="9">63342</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">pathname</th>
-            <td data-dce-id="9">/custom-element/demo/a.html</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">search</th>
-            <td data-dce-id="9">?_ijt=qca6trk5kne6eo4s4tomq4egmm&amp;_ij_reload=RELOAD_ON_SAVE</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">hash</th>
-            <td data-dce-id="9"/>
-        </tr>
-        <tr data-dce-id="10">
-            <th data-dce-id="11">
-                <u data-dce-id="12">URL parameters</u>
-            </th>
-        </tr>
-        <tr data-dce-id="13">
-            <th data-dce-id="14">_ijt</th>
-            <td data-dce-id="15">qca6trk5kne6eo4s4tomq4egmm</td>
-        </tr>
-        <tr data-dce-id="13">
-            <th data-dce-id="14">_ij_reload</th>
-            <td data-dce-id="15">RELOAD_ON_SAVE</td>
-        </tr>
-    </table>
-</dce-root>

package/request.html

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