diff --git a/README.md b/README.md
index 2a35e7e..062d139 100644
--- a/README.md
+++ b/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.24/coverage/src/custom-element/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.24/coverage/src/custom-element/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-dist@0.0.24/storybook-static/index.html?path=/story/welcome--introduction
+[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
 [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
diff --git a/bin/xslDtd2Ide.mjs b/bin/xslDtd2Ide.mjs
index 4018850..d7c69e9 100644
--- a/bin/xslDtd2Ide.mjs
+++ b/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.24",
+    "version": "0.0.26",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {
diff --git a/custom-element.js b/custom-element.js
index 8f1cb7c..1e74172 100644
--- a/custom-element.js
+++ b/custom-element.js
@@ -259,7 +259,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 +288,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 +373,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 +397,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 +463,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 +494,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 +536,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 )
@@ -725,13 +738,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 )
diff --git a/demo/confused.svg b/demo/confused.svg
index 1dc9863..053859b 100644
--- a/demo/confused.svg
+++ b/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"/>
diff --git a/demo/demo.css b/demo/demo.css
index e851ab3..382c9a8 100644
--- a/demo/demo.css
+++ b/demo/demo.css
@@ -11,9 +11,13 @@ 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; }
+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;
diff --git a/demo/embed-1.html b/demo/embed-1.html
index 5684082..fa184a0 100644
--- a/demo/embed-1.html
+++ b/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>
\ No newline at end of file
+<custom-element><template>🖖</template></custom-element>
diff --git a/demo/external-template.html b/demo/external-template.html
index 0f829f1..a814c42 100644
--- a/demo/external-template.html
+++ b/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 @@ <h3>Loading DCE template by SRC attribute</h3>
 <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 @@ <h3>Loading DCE template by SRC attribute</h3>
 <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 @@ <h3>Loading DCE template by SRC attribute</h3>
 <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 @@ <h3>Loading DCE template by SRC attribute</h3>
                    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>
diff --git a/demo/lib-dir/Smiley.svg b/demo/lib-dir/Smiley.svg
new file mode 100644
index 0000000..a8b7cfb
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/demo/lib-dir/embed-lib.html b/demo/lib-dir/embed-lib.html
new file mode 100644
index 0000000..39f8cd6
--- /dev/null
+++ b/demo/lib-dir/embed-lib.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>templates for embedded and external DCE lib dependencies</title>
+</head>
+<body>
+<h1>templates for embedded and external DCE lib dependencies</h1>
+
+<template id="embed-lib-component">
+    👋 from embed-lib-component
+</template>
+
+<template id="embed-relative-hash">
+    👌 from embed-relative-hash invoking
+    <module-url slice="full-url" src="./embed-lib.html"></module-url>
+    <a href="{//full-url}#embed-lib-component">
+        <img src="{//full-url}/../Smiley.svg"/>
+        #embed-lib-component
+    </a>:
+    <custom-element src="#embed-lib-component"></custom-element>
+</template>
+
+<template id="embed-relative-file">
+    👍 from embed-relative-file invoking
+    <module-url slice="up-url" src="../embed-1.html"></module-url>
+    <a href="{//up-url}">../embed-1.html</a>:
+    <custom-element src="../embed-1.html">
+        loading from ../embed-1.html ...
+    </custom-element>
+</template>
+
+</body>
+</html>
diff --git a/demo/module-url.html b/demo/module-url.html
new file mode 100644
index 0000000..016f4a7
--- /dev/null
+++ b/demo/module-url.html
@@ -0,0 +1,215 @@
+<!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>importmap custom-element Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+    <script type="importmap">
+        {
+          "imports": {
+            "lib-root/": "./lib-dir/",
+            "embed-lib": "./lib-dir/embed-lib.html"
+          }
+        }
+    </script>
+    <script type="module" src="../location-element.js"></script>
+    <script type="module" src="../module-url.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+
+    <style>
+        @import "./demo.css";
+
+        dce-root {
+            box-shadow: 0 0 0.5rem lime;
+            padding: 1rem;
+            display: inline-block;
+        }
+        main {
+            display: flex;
+            flex-wrap: wrap;
+            &>section{
+                flex:1 20rem;
+            }
+        }
+    </style>
+
+</head>
+<body>
+
+<nav>
+    <h3><a href="../index.html"><code>custom-element</code> demo</a>, <code>importmap</code></h3>
+</nav>
+<main>
+    <section>
+        <h3>How to get the module URL for <code>custom-element</code>?</h3>
+        Answer: by defining following attributes in <code>module-url</code>:
+        <ol>
+            <li><code>src</code> with path to module resource, If omitted, it would match the
+                <code>window.location.href</code></li>
+            <li><code>slice</code> to read the URL</li>
+        </ol>
+        URL properties would be a part of slice data, the value would be a full URL.
+    </section><section>
+        <h3>Where to use <code>module-url</code>?</h3>
+        Answer: to inject the library resources URL into generated HTML.
+        <p><a
+                href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#importing_modules_using_import_maps"
+        >Import maps </a> are used for defining the dependencies location on the web page level.
+            This way dependencies could reside on different CDN path or even domains while in the code would be
+            referenced
+            by symbolic package name.
+            See the CDN example bellow.</p>
+        <br/>
+        <p>The resolving of import maps is done by
+            <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta/resolve">import.meta.resolve(path)</a>
+        </p>
+    </section><section>
+        <h3>Where NOT to use <code>module-url</code>?</h3>
+        Answer:
+        <ol>
+            <li> in <code>scr</code> attribute of &lt;custom-element &gt;<br/>
+                - It uses the same module resolving mechanism
+            </li>
+            <li> for getting/setting the page URL,<br/>
+                - see <a href="./set-url.html">How to set page URL in <code>custom-element</code>?</a>
+
+            </li>
+        </ol>
+
+        <h3>See also</h3>
+        <p><a href="./external-template.html">How to use external templates?</a></p>
+    </section>
+    <section>
+        <html-demo-element legend="this page import maps"
+        >
+            <template>
+                {
+                "imports": {
+                "lib-root": "./lib-dir/",
+                "embed-lib": "./lib-dir/embed-lib.html"
+                }
+                }
+            </template>
+        </html-demo-element>
+    </section>
+</main>
+
+
+<html-demo-element legend="1. relative to page path"
+                   description="Should render Vulcan Salute 🖖 with link to embed-1.html, link should open the page"
+>
+    <template>
+        <custom-element>
+            <a href="./embed-1.html">
+                <custom-element src="./embed-1.html"></custom-element>
+            </a>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="2. module by symbolic name"
+                   description="should render '👋 from embed-lib-component' as link to 'demo-lib/embed-lib.html', link should open the page "
+>
+    <p><code>embed-lib</code> resolved to <code>./lib-dir/embed-lib.html</code> by page <i>importmap</i></p>
+    <template>
+        <custom-element>
+            <template>
+                <module-url slice="lib-url" src="embed-lib"></module-url>
+                <if test="//lib-url/@error">
+                    <p>error: <b>{//lib-url/@error}</b></p>
+                </if>
+                check the link:
+                <a href="{//lib-url}">
+                    <custom-element src="embed-lib#embed-lib-component">
+                        failed to load
+                    </custom-element>
+                </a>
+            </template>
+        </custom-element>
+
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="3. module by symbolic name with missing importmap entry"
+                   description="should render error message and `failed to load` broken link "
+>
+    <p>As <code>fakedemo-lib</code> is not in importmaps, the symbolic name is not resolved and renders the error</p>
+
+    <template>
+        <custom-element>
+            <template>
+                <module-url slice="lib-url" src="fakedemo-lib/embed-lib.html"></module-url>
+                <if test="//lib-url/@error">
+                    <p>error: <b>{//lib-url/@error}</b></p>
+                </if>
+                the link is broken:
+                <a href="{//lib-url}">
+                    <custom-element src="fakedemo-lib/embed-lib.html#embed-lib-component">
+                        failed to load
+                    </custom-element>
+                </a>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+
+<html-demo-element legend="4. module path by symbolic name"
+                   description="should render two smiley images and links should open matching page"
+>
+    <p><code>lib-root</code> resolved to <code>lib-dir</code> by page <i>importmap</i></p>
+    <template>
+        <custom-element>
+            <template>
+                <module-url slice="lib-url" src="lib-root/embed-lib.html#embed-relative-hash"></module-url>
+                <module-url slice="img-url" src="lib-root/Smiley.svg"></module-url>
+                <if test="//lib-url/@error">
+                    <p>error: <b>{//lib-url/@error}</b></p>
+                </if>
+                check the link:
+                <a href="{//lib-url}"> lib-root/embed-lib.html#embed-relative-hash <img src="{//img-url}" alt=""/></a>
+                <custom-element src="lib-root/embed-lib.html#embed-relative-hash">
+                    failed to load
+                </custom-element>
+
+            </template>
+        </custom-element>
+
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="5. module path by symbolic name to internal link within lib"
+                   description="should render '👍 from embed-relative-file' and Vulcan Salute 🖖. Links should open matching page "
+>
+    <template>
+        <custom-element>
+            <template>
+                <module-url slice="lib-url" src="lib-root/embed-lib.html#embed-relative-file"></module-url>
+                <if test="//lib-url/@error">
+                    <p>error: <b>{//lib-url/@error}</b></p>
+                </if>
+                check the link:
+                <a href="{//lib-url}"> lib-root/embed-lib.html#embed-relative-file </a>
+                <custom-element src="lib-root/embed-lib.html#embed-relative-file">
+                    failed to load
+                </custom-element>
+
+            </template>
+        </custom-element>
+
+    </template>
+</html-demo-element>
+
+
+<html-demo-element src="./lib-dir/embed-lib.html"
+        legend="./lib-dir/embed-lib.html"
+       description="resides within ./lib-dir and serves a sample of module with multiple templates"
+>
+
+</html-demo-element>
+
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
+</body>
+</html>
diff --git a/demo/npm-versions-demo.html b/demo/npm-versions-demo.html
new file mode 100644
index 0000000..c3b35d6
--- /dev/null
+++ b/demo/npm-versions-demo.html
@@ -0,0 +1,105 @@
+<!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="module" src="../http-request.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>
+
+<nav>
+    <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
+    <h1><code>npm-version</code> Declarative Custom Element</h1>
+
+    <dl>
+        <dt>Attributes</dt>
+        <dd><code>package-name</code> NPM package name</dd>
+        <dd><code>current-version</code> version to be initially selected </dd>
+        <dd><code>value</code> user selection </dd>
+
+        <dt>Events</dt>
+        <dd><code>change</code> triggered when <code>value</code> attribute changed</dd>
+
+        <dt>Slots</dt>
+        <dd><code>label</code> defaults to <code>{$package-name} version:</code> </dd>
+    </dl>
+
+</nav>
+
+
+<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>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="2. preselected NPM package version picker"
+                   description="version 22 should be selected">
+    <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>
+    </template>
+</html-demo-element>
+
+
+<html-demo-element legend="3. value attribute changed and propagated to slice"
+                   description="upon selection change the version should be shown as 'selected-version' slice value">
+    <template>
+        <custom-element tag="npm-version" src="./npm-versions.html#npm-version"></custom-element>
+
+        <custom-element >
+            <template>
+                <npm-version slice="selected-version" package-name="@epa-wg/custom-element"></npm-version>
+                <p><code>selected-version</code> slice: {//selected-version/@value}</p>
+            </template>
+        </custom-element>
+
+    </template>
+</html-demo-element>
+
+
+<html-demo-element legend="4. label slot override"
+                   description="upon selection change the version should be shown as 'selected-version' slice value">
+    <template>
+        <custom-element tag="npm-version-1" src="./npm-versions.html#npm-version"></custom-element>
+
+        <custom-element >
+            <template>
+                <npm-version-1 slice="selected" package-name="@epa-wg/custom-element">
+                    <i slot="label">select:</i>
+                </npm-version-1>
+                <p><code>selected-version</code> slice: {//selected}</p>
+            </template>
+        </custom-element>
+
+    </template>
+</html-demo-element>
+
+
+<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/>
+    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>
+    </template>
+</html-demo-element>
+
+
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js" hidden></script>
+
+</body>
+</html>
diff --git a/demo/npm-versions.html b/demo/npm-versions.html
new file mode 100644
index 0000000..0d201cb
--- /dev/null
+++ b/demo/npm-versions.html
@@ -0,0 +1,65 @@
+<!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>npm-version template</title>
+    <link rel="icon" href="./wc-square.svg"/>
+</head>
+<body>
+
+<h1><code>npm-version</code> template</h1>
+<a href="./npm-versions-demo.html">docs</a>
+<template id="npm-version">
+    <attribute name="package-name"></attribute>
+    <attribute name="current-version"></attribute>
+    <attribute name="value" select="//selected-version"></attribute>
+
+    <http-request
+            url="https://registry.npmjs.org/@epa-wg/custom-element-dist"
+            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 = $current-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>
+
+<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>
+
+            <custom-element src="#npm-version" slice="selected-version"></custom-element>
+        </template>
+</body>
+</html>
diff --git a/demo/set-url.html b/demo/set-url.html
index 0e502db..a3de1ec 100644
--- a/demo/set-url.html
+++ b/demo/set-url.html
@@ -29,7 +29,7 @@
     <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
 </nav>
 <main>
-    <h3>How to set the page URL by location-element?</h3>
+    <h3>How to set the page URL by <code>location-element</code>?</h3>
     Answer: by defining following attributes:
     <ol>
         <li><code>method</code> to one of values provided bellow</li>
diff --git a/ide/customData-dce.json b/ide/customData-dce.json
index b534ada..a3d5081 100644
--- a/ide/customData-dce.json
+++ b/ide/customData-dce.json
@@ -176,6 +176,40 @@
           "url": "https://github.com/EPA-WG/custom-element"
         }
       ]
+    },
+    {
+      "name": "module-url",
+      "description": "get module URL into slice from SRC according to web page importmap",
+      "attributes": [
+        {
+          "name": "src",
+          "description": "path to module resource, If omitted, it would match the window.location.href",
+          "type": "string",
+          "references": [
+            {
+              "name": "docs",
+              "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/module-url.html"
+            }
+          ]
+        },
+        {
+          "name": "slice",
+          "description": "slice name where resolved URL would be propagated",
+          "type": "string",
+          "references": [
+            {
+              "name": "docs",
+              "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/data-slices.html"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "docs",
+          "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/module-url.html"
+        }
+      ]
     }
   ]
 }
diff --git a/ide/web-types-dce.json b/ide/web-types-dce.json
index 8aa7ec6..fd76393 100644
--- a/ide/web-types-dce.json
+++ b/ide/web-types-dce.json
@@ -1,7 +1,7 @@
 {
     "$schema": "http://json.schemastore.org/web-types",
     "name": "@epa-wg/custom-element",
-    "version": "0.0.24",
+    "version": "0.0.26",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {
@@ -145,6 +145,31 @@
                         }
                     ]
                 },
+                {
+                    "name": "module-url",
+                    "description": "get module URL into slice from SRC according to web page importmap",
+                    "doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/module-url.html",
+                    "attributes": [
+                        {
+                            "name": "src",
+                            "description": "path to module resource, If omitted, it would match the window.location.href",
+                            "required": false,
+                            "doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/module-url.html",
+                            "value": {
+                                "type": "string"
+                            }
+                        },
+                        {
+                            "name": "slice",
+                            "description": "slice name where resolved URL would be propagated",
+                            "required": false,
+                            "doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/data-slices.html",
+                            "value": {
+                                "type": "string"
+                            }
+                        }
+                    ]
+                },
                 {
                     "name": "slice",
                     "description": "Synthetic element for defining the slice-attributed when more then one slice/event/value associated with parent element",
diff --git a/ide/web-types-xsl.json b/ide/web-types-xsl.json
index c3f0b64..13e32dc 100644
--- a/ide/web-types-xsl.json
+++ b/ide/web-types-xsl.json
@@ -1,7 +1,7 @@
 {
     "$schema": "http://json.schemastore.org/web-types",
     "name": "@epa-wg/custom-element",
-    "version": "0.0.24",
+    "version": "0.0.26",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {
diff --git a/index.html b/index.html
index cc6dd02..f8e607c 100644
--- a/index.html
+++ b/index.html
@@ -31,7 +31,8 @@ <h4>Features demo</h4>
         <a href="./demo/http-request.html"      >http-request       </a> |
         <a href="./demo/location-element.html"  >location-element   </a> |
         <a href="./demo/set-url.html"           >set-url            </a> |
-        <a href="./demo/external-template.html" >external template  </a> <br/>
+        <a href="./demo/external-template.html" >external template  </a> |
+        <a href="./demo/module-url.html"        >importmap          </a> <br/>
         <a href="./demo/hex-grid.html"          >hex grid lib       </a> |
         <a href="./demo/scoped-css.html"        >scoped CSS         </a> |
         <a href="./demo/parameters.html"        >attributes         </a> |
diff --git a/module-url.js b/module-url.js
new file mode 100644
index 0000000..7626692
--- /dev/null
+++ b/module-url.js
@@ -0,0 +1,33 @@
+const attr = ( el, attr )=> el.getAttribute( attr );
+
+
+export class ModuleUrl extends HTMLElement
+{
+    static observedAttributes=
+            [   'slice'
+            ,   'src' // module path, relative or absolute URL
+            ];
+
+    sliceInit()
+    {   let path = attr(this,'src');
+        try
+        {   const url =  '.' === path.charAt(0)
+                ? new URL(path, this.closest('[base]')?.getAttribute('base') ).href
+                : import.meta.resolve(path);
+            this.setAttribute('value',this.value = url );
+        }catch( er )
+        {   this.setAttribute('error', er.message);
+            this.setAttribute('value', path);
+            console.error(er.message ?? er, path);
+        }
+        this.dispatchEvent( new Event('change') );
+    }
+    attributeChangedCallback( name, oldValue, newValue )
+    {
+        if( 'src'=== name )
+            this.sliceInit();
+    }
+}
+
+window.customElements.define( 'module-url', ModuleUrl );
+export default ModuleUrl;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index fc93035..79ddbe6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@epa-wg/custom-element",
-    "version": "0.0.24",
+    "version": "0.0.26",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@epa-wg/custom-element",
-            "version": "0.0.24",
+            "version": "0.0.26",
             "license": "Apache-2.0",
             "funding": {
                 "type": "patreon",
diff --git a/package.json b/package.json
index 0b25c2c..7af2e83 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@epa-wg/custom-element",
-    "version": "0.0.24",
+    "version": "0.0.26",
     "description": "Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating",
     "browser": "custom-element.js",
     "module": "custom-element.js",