@epa-wg/custom-element 0.0.25 → 0.0.27

package/README.md

@@ -348,9 +348,9 @@ within template
 [github-image]:   https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
 [npm-image]:      https://img.shields.io/npm/v/@epa-wg/custom-element.svg
 [npm-url]:        https://npmjs.org/package/@epa-wg/custom-element
-[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.25/coverage/src/custom-element/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.25/coverage/src/custom-element/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-dist@0.0.25/storybook-static/index.html?path=/story/welcome--introduction
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.27/coverage/src/custom-element/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.27/coverage/src/custom-element/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-dist@0.0.27/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.25",
+    "version": "0.0.27",
     "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 )
@@ -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=>
     {
@@ -259,7 +306,7 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
     for( const c of fr.childNodes )
         payload.append(xslDom.importNode(c,true))
 
-    const embeddedTemplates = [...payload.querySelectorAll('template')];
+    const embeddedTemplates = [...payload.getElementsByTagName('xsl:template')];
     embeddedTemplates.forEach(t=>payload.ownerDocument.documentElement.append(t));
 
     const   slotCall = $(xslDom,'call-template[name="slot"]')
@@ -288,8 +335,9 @@ xhrTemplate(src)
         // xhr.overrideMimeType("text/xml");
         xhr.onload = () =>
         {   if( xhr.readyState === xhr.DONE && xhr.status === 200 )
-                resolve( xhr.responseXML ||  create('div', xhr.responseText ) )
-            reject(xhr.statusText)
+                resolve( xhr.responseXML?.body || xhr.responseXML ||  create('div', xhr.responseText ) )
+            else
+                reject(`${xhr.statusText} - ${src}`)
         };
         xhr.addEventListener("error", ev=>reject(ev) );
 
@@ -372,7 +420,7 @@ event2slice( x, sliceNames, ev, dce )
                 s.append( obj2node(new FormData(el),'value', s.ownerDocument) )
                 return s
             }
-            const v = el.value ?? attr( sel, 'value' ) ;
+            const v = el.value ?? attr( el, 'value' ) ;
             cleanSliceValue();
             if( v === null || v === undefined )
                 [...s.childNodes].filter(n=>n.localName!=='event').map(n=>n.remove());
@@ -396,19 +444,27 @@ const loadTemplateRoots = async ( src, dce )=>
         return [dce]
     if( src.startsWith('#') )
         return ( n =>
-        {   if(!n) return []
-            const a = n.querySelectorAll(src)
-            if( a.length )
-                return [...a]
-            const r = n.getRootNode();
-            return r===n ? []: getByHashId(r)
+        {   const a = n.querySelectorAll(src)
+            return  [...( a.length ? a : n.getRootNode().querySelectorAll(src) )]
         })(dce.parentElement)
     try
-    {   // todo cache
-        const dom = await xhrTemplate(src)
-        const hash = new URL(src, location).hash
+    {   const [path, hash] = src.split('#');
+        if( '.' === src.charAt(0))
+            src = new URL(path, dce.closest('[base]')?.getAttribute('base') || location ).href;
+        else
+            try
+            {   src = import.meta.resolve( path );
+                if(hash)
+                    src +='#'+hash;
+            }
+            catch( e )
+                {   console.error(e.message) }
+        // todo cache
+        const dom = await xhrTemplate(src);
+        dce.setAttributeNS('xml', 'base', src );
+
         if( hash )
-        {   const ret = dom.querySelectorAll(hash);
+        {   const ret = dom.querySelectorAll('#'+hash);
             if( ret.length )
                 return [...ret]
             return [dce]
@@ -454,8 +510,11 @@ export function appendByDceId(parent,e,k)
 }
 export function merge( parent, fromArr )
 {
-    if(!fromArr.length)
-        return removeChildren(parent);
+    if( 'dce-root' === parent.firstElementChild?.localName && 'dce-root' !== fromArr[0].localName)
+        return;
+    if( !fromArr.length )
+        return 'dce-root' !== parent.firstElementChild?.localName && removeChildren(parent);
+
     const id2old = {};
     for( let c of parent.childNodes)
     {   ASSERT( !id2old[c.dceId] );
@@ -482,7 +541,8 @@ export function merge( parent, fromArr )
             appendByDceId(parent,e,k)
     }
     for( let v of Object.values(id2old) )
-        v.remove();
+        if( v.localName !== 'dce-root')
+           v.remove();
 }
 export function assureUID(n,attr)
 {   if( !n.hasAttribute(attr) )
@@ -523,7 +583,7 @@ export const xPath = (x,root)=>
         ret += n.textContent;
     return ret
 }
-export const xslTags = 'stylesheet,transform,import,include,strip-space,preserve-space,output,key,decimal-format,namespace-alias,template,value-of,copy-of,number,apply-templates,apply-imports,for-each,sort,if,choose,when,otherwise,attribute-set,call-template,with-param,variable,param,text,processing-instruction,element,attribute,comment,copy,message,fallback'.split(',');
+export const xslTags = 'stylesheet,transform,import,include,strip-space,preserve-space,output,key,decimal-format,namespace-alias,value-of,copy-of,number,apply-templates,apply-imports,for-each,sort,if,choose,when,otherwise,attribute-set,call-template,with-param,variable,param,text,processing-instruction,element,attribute,comment,copy,message,fallback'.split(',');
 export const toXsl = (el, defParent) => {
     const x = create('xsl:'+el.localName);
     for( let a of el.attributes )
@@ -561,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') });
 
@@ -725,13 +791,17 @@ CustomElement extends HTMLElement
                 applySlices();
             }
             #applyAttribute(name, newValue)
-            {   let a = this.xml.querySelector(`attributes>${name}`);
+            {   if( 'value' === name )
+                    this.value = newValue;
+                let a = this.xml.querySelector(`attributes>${name}`);
                 if( a )
                     emptyNode(a).append( createText(a,newValue) );
                 else
                 {   a = create( name, newValue, this.xml );
                     this.xml.querySelector('attributes').append( a );
                 }
+
+                this.dispatchEvent(new CustomEvent('change', { bubbles: true,detail: { [name]: newValue }}))
             }
             attributeChangedCallback(name, oldValue, newValue)
             {   if( !this.xml || this.#inTransform )

package/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/demo/confused.svg

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.0">
+  <title>Confused</title>
   <defs>
     <linearGradient id="d">
       <stop offset="0"/>

package/demo/demo.css

@@ -4,16 +4,19 @@ 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;}
-
+code{ font-weight: bold; color: green; text-wrap: nowrap; }
+*{
+    gap: 1rem;
+}
 
 html-demo-element h3
 {   text-shadow: 0 0 0.25em white;

package/demo/embed-1.html

@@ -1,3 +1,2 @@
 <h4>embed-1.html</h4>
-<custom-element tag="dce-embed-1" hidden>🖖</custom-element>
-<dce-embed-1>?</dce-embed-1>
+<custom-element><template>🖖</template></custom-element>

package/demo/external-template.html

@@ -3,26 +3,61 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>http-request Declarative Custom Element implementation demo</title>
-        <link rel="icon" href="./wc-square.svg" />
+    <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";
 
-        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;
+        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;
+        }
+
+        button img {
+            max-height: 10vw;
+            min-height: 4rem;
+        }
+
+        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;
+        }
+
+        code {
+            text-align: right;
+            min-width: 3rem;
+        }
+
+        svg {
+            max-height: 3rem;
         }
-        button img{ max-height: 10vw; min-height: 4rem;}
-        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; }
-        code{ text-align: right; min-width: 3rem;}
-        svg{ max-height: 3rem;}
     </style>
 </head>
 <body>
@@ -35,15 +70,16 @@
 <html-demo-element legend="1. reference the template in page DOM"
                    description="should render hand wave with '👋 World!' and 'Hello World!'">
     <template>
-<template id="template1">
-    <slot> Hello </slot> World!
-</template>
+        <template id="template1">
+            <slot> Hello</slot>
+            World!
+        </template>
 
-<custom-element tag="dce-internal" src="#template1"></custom-element>
-<!-- no need for loading fallback as the template exists -->
+        <custom-element tag="dce-internal" src="#template1"></custom-element>
+        <!-- no need for loading fallback as the template exists -->
 
-<dce-internal>👋</dce-internal>
-<dce-internal></dce-internal>
+        <dce-internal>👋</dce-internal>
+        <dce-internal></dce-internal>
     </template>
 </html-demo-element>
 
@@ -51,67 +87,67 @@
 <html-demo-element legend="2. without TAG, inline instantiation"
                    description="hash value in SRC references template by ID. Should output 'construction' 2 times">
     <template>
-<template id="template2">
-    🏗️ construction
-</template>
+        <template id="template2">
+            🏗️ construction
+        </template>
 
-<custom-element src="#template2"></custom-element>
-<custom-element src="#template2"></custom-element>
+        <custom-element src="#template2"></custom-element>
+        <custom-element src="#template2"></custom-element>
     </template>
 </html-demo-element>
 
-<html-demo-element legend="3. external SVG file" >
+<html-demo-element legend="3. external SVG file">
     <template>
-            <custom-element tag="dce-external" src="confused.svg" >
-                <template><i>loading from SVG ...</i></template>
-            </custom-element>
-            <dce-external></dce-external>
-            <custom-element src="confused.svg" >
-                <i>inline DCE loading from SVG ...</i>
-            </custom-element>
-            <custom-element src="no.svg" >
-                <i>fallback for missing image</i>
-            </custom-element>
+        <custom-element tag="dce-external" src="confused.svg">
+            <template><i>loading from SVG ...</i></template>
+        </custom-element>
+        <dce-external></dce-external>
+        <custom-element src="confused.svg">
+            <i>inline DCE loading from SVG ...</i>
+        </custom-element>
+        <custom-element src="no.svg">
+            <i>fallback for missing image</i>
+        </custom-element>
     </template>
 </html-demo-element>
 
 <html-demo-element legend="4. external XSLT file"
                    description="This external templates generated the tree for DCE data set"
-    >
+>
     <a href="tree.xsl">tree.xsl</a>
     <template>
-            <custom-element tag="dce-external-4" src="tree.xsl" >
-                <template><i>loading from XSLT ...</i></template>
-            </custom-element>
-            <dce-external-4 title="DCE with external XSLT template" data-fruit="🍌">Hi</dce-external-4>
-            <custom-element src="tree.xsl"  data-smile="👼" data-basket="🍒">
-                <i>inline DCE loading from XSLT ...</i>
-            </custom-element>
+        <custom-element tag="dce-external-4" src="tree.xsl">
+            <template><i>loading from XSLT ...</i></template>
+        </custom-element>
+        <dce-external-4 title="DCE with external XSLT template" data-fruit="🍌">Hi</dce-external-4>
+        <custom-element src="tree.xsl" data-smile="👼" data-basket="🍒">
+            <i>inline DCE loading from XSLT ...</i>
+        </custom-element>
     </template>
 </html-demo-element>
 
 <html-demo-element legend="5. external HTML template" description="Should render 👋👌, svg, formula">
     <template>
-            <custom-element tag="dce-external-5" src="html-template.html" >
-                <template><i>loading from HTML file ...</i></template>
-            </custom-element>
-            <dce-external-5 title="DCE with external XSLT template" data-fruit="🍌">Hi</dce-external-5>
-            <custom-element src="html-template.html"  data-smile="👼" data-basket="🍒">
-                <i>inline DCE loading from HTML file ...</i>
-            </custom-element>
+        <custom-element tag="dce-external-5" src="html-template.html">
+            <template><i>loading from HTML file ...</i></template>
+        </custom-element>
+        <dce-external-5 title="DCE with external XSLT template" data-fruit="🍌">Hi</dce-external-5>
+        <custom-element src="html-template.html" data-smile="👼" data-basket="🍒">
+            <i>inline DCE loading from HTML file ...</i>
+        </custom-element>
     </template>
 </html-demo-element>
 
 <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" >
-            <template><i>loading  SVG from templates file ...</i></template>
+        <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>
@@ -119,10 +155,10 @@
 <html-demo-element legend="7. XSLT by ID within external file" description="Should render tree, and fallback">
     <a href="html-template.html">html-template.html</a>
     <template>
-        <custom-element src="html-template.xhtml#embedded-xsl" >
-            <template>whole XSLT is  embedded into HTML body</template>
+        <custom-element src="html-template.xhtml#embedded-xsl">
+            <template>whole XSLT is embedded into HTML body</template>
         </custom-element>
-         <custom-element src="html-template.html#none" >
+        <custom-element src="html-template.html#none">
             <template><i>element with id=none is missing in template</i></template>
         </custom-element>
     </template>
@@ -132,13 +168,37 @@
                    description="Should render Vulcan Salute 🖖"
 >
     <template>
-            <custom-element src="embed-1.html" >
-                loading from embed-1.html ...
-            </custom-element>
+        <custom-element src="embed-1.html">
+            loading from embed-1.html ...
+        </custom-element>
+    </template>
+</html-demo-element>
+
+
+<html-demo-element legend="9. external file with invoking of relative template as hash by enclosed custom-element"
+                   description="Should render Vulcan Salute 🖖"
+>
+    <template>
+        <custom-element src="./lib-dir/embed-lib.html#embed-relative-hash">
+            loading from embed-1.html ...
+        </custom-element>
     </template>
 </html-demo-element>
-<html-demo-element legend="embed-1.html external file " src="embed-1.html">
+
+<html-demo-element
+        legend="10. external file with invoking of template in another relative path file by enclosed custom-element"
+        description="Should render Vulcan Salute 🖖"
+>
+    <template>
+        <custom-element src="./lib-dir/embed-lib.html#embed-relative-file">
+            loading from ./lib-dir/embed-lib.html ...
+        </custom-element>
+    </template>
 </html-demo-element>
+
+
+<html-demo-element legend="embed-1.html external file" src="embed-1.html"></html-demo-element>
+<html-demo-element legend="embed-lib.html with multiple templates" src="embed-lib.html"></html-demo-element>
 <!--
 <html-demo-element legend="9. deep external files, complex rendering" >
     <template>

package/demo/lib-dir/Smiley.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" baseProfile="full" viewBox="-21 -21 42 42">
+  <defs>
+    <radialGradient id="b" cx=".2" cy=".2" r=".5" fx=".2" fy=".2">
+      <stop offset="0" stop-color="#fff" stop-opacity=".7"/>
+      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="a" cx=".5" cy=".5" r=".5">
+      <stop offset="0" stop-color="#ff0"/>
+      <stop offset=".75" stop-color="#ff0"/>
+      <stop offset=".95" stop-color="#ee0"/>
+      <stop offset="1" stop-color="#e8e800"/>
+    </radialGradient>
+  </defs>
+  <circle r="20" fill="url(#a)" stroke="#000" stroke-width=".15"/>
+  <circle r="20" fill="url(#b)"/>
+  <g id="c">
+    <ellipse cx="-6" cy="-7" rx="2.5" ry="4"/>
+    <path fill="none" stroke="#000" stroke-linecap="round" stroke-width=".5" d="M10.6 2.7a4 4 0 0 0 4 3"/>
+  </g>
+  <use xlink:href="#c" transform="scale(-1 1)"/>
+  <path fill="none" stroke="#000" stroke-width=".75" d="M-12 5a13.5 13.5 0 0 0 24 0 13 13 0 0 1-24 0"/>
+</svg>