@epa-wg/custom-element-dist 0.0.26 → 0.0.27

package/public/demo/s.xslt

@@ -1,97 +1,56 @@
-<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>
+<?xml version='1.0' encoding='UTF-8'?>
+<xsl:stylesheet version="1.0"
+	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+	xmlns:xhtml="http://www.w3.org/1999/xhtml"
+                >
+    <xsl:output method="xml"/>
+    <xsl:template match="/">
+        <dce-root >
+            <xsl:apply-templates select="*"/>
         </dce-root>
     </xsl:template>
-    <xsl:template match="/">
-        <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
+    <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 name="slot">
-        <xsl:param name="slotname"/>
-        <xsl:param name="defaultvalue"/>
-        <xsl:choose>
-            <xsl:when test="//payload/*[@slot=$slotname]">
-                <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
-            </xsl:when>
-            <xsl:otherwise>
-                <xsl:copy-of select="$defaultvalue"/>
-            </xsl:otherwise>
-        </xsl:choose>
+    <xsl:template mode="sanitize" match="xhtml:*">
+        <xsl:element name="{local-name()}">
+            <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+        </xsl:element>
     </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/public/demo/z.html

@@ -1,62 +1,33 @@
-<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">
+<!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>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";
+        dt{ font-weight: bold}
+        dd{ padding: 0;}
+        h1,h3{ margin: 0;}
+        nav{ gap:0; }
+    </style>
+</head>
+<body>
 
-        <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>
+  <custom-element src="./html-template.html#dwc-logo">
+            <template><i>loading SVG from templates file ...</i></template>
+        </custom-element>
+
+</body>
+</html>

package/public/demo/z1.html

@@ -0,0 +1,34 @@
+<!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>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";
+        dt{ font-weight: bold}
+        dd{ padding: 0;}
+        h1,h3{ margin: 0;}
+        nav{ gap:0; }
+    </style>
+</head>
+<body>
+<button onclick="window.location.hash = `#@epa-wg/custom-element-dist@0.0.27/storybook-static/index.html`">set in page URL</button>
+
+<custom-element src="@epa-wg/custom-element-dist/demo/npm-versions.html#npm-version"
+                package-name="@epa-wg/custom-element-dist"
+                ></custom-element>
+
+</body>
+</html>

package/public/mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.3.5'
+const PACKAGE_VERSION = '2.4.5'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

package/src/custom-element/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 )
@@ -145,22 +146,63 @@ 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']">
+        <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>`)
     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,6 +265,11 @@ 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=>
     {
@@ -574,7 +621,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') });
 

package/src/custom-element/demo/a.svg

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

package/src/custom-element/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/src/custom-element/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/src/custom-element/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>