From 3dcab2122ed1241b0b32f48e261b2e7e9bd3fea3 Mon Sep 17 00:00:00 2001
From: Sasha Firsov <suns@firsov.net>
Date: Sun, 12 May 2024 22:36:36 -0700
Subject: [PATCH] deprecation

---
 README.md                                     |   2 +
 coverage/lcov-report/index.html               |  32 +-
 .../lcov-report/src/custom-element.js.html    |  44 +-
 coverage/lcov-report/src/http-request.js.html |  27 +-
 coverage/lcov-report/src/index.html           |  42 +-
 .../lcov-report/src/local-storage.js.html     |   2 +-
 .../lcov-report/src/location-element.js.html  |   2 +-
 .../lcov-report/src/mocks/browser.js.html     |   2 +-
 .../lcov-report/src/mocks/handlers.js.html    |   2 +-
 coverage/lcov-report/src/mocks/index.html     |   2 +-
 coverage/lcov-report/src/mocks/msw.js.html    |   2 +-
 .../stories/css-scoping.stories.js.html       |   2 +-
 .../stories/data-slices.stories.js.html       |   2 +-
 .../stories/dom-merge.stories.js.html         |   2 +-
 .../stories/http-request.stories.js.html      |   2 +-
 coverage/lcov-report/stories/index.html       |   2 +-
 .../stories/local-storage.stories.js.html     |   2 +-
 .../stories/location-element.stories.js.html  |   2 +-
 .../stories/parameters.stories.js.html        |   2 +-
 .../stories/playground.stories.js.html        |   2 +-
 .../lcov-report/stories/pokemons.mock.js.html |   2 +-
 .../stories/src-attribute.stories.js.html     |   2 +-
 coverage/lcov.info                            | 592 +++++++++---------
 src/http-request.js                           |  11 +-
 src/input-text.js                             |  17 -
 src/location-element.js                       |  58 +-
 stories/css.stories.ts0                       | 114 ++++
 stories/local-storage.stories.js              |   2 +-
 28 files changed, 568 insertions(+), 407 deletions(-)
 delete mode 100644 src/input-text.js
 create mode 100644 stories/css.stories.ts0

diff --git a/README.md b/README.md
index ac7dfcb..4f3f49e 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,5 @@
+<h1>Project is deprecated in favor
+<a href="https://github.com/EPA-WG/custom-element-dist">@epa-wg/custom-element-dist</a> </h1>
 # custom-element-test
 test and storybook for [@epa-wg/custom-element](https://github.com/EPA-WG/custom-element) 
 
diff --git a/coverage/lcov-report/index.html b/coverage/lcov-report/index.html
index c1a223c..61ba093 100644
--- a/coverage/lcov-report/index.html
+++ b/coverage/lcov-report/index.html
@@ -23,30 +23,30 @@ <h1>All files</h1>
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">86.08% </span>
+                <span class="strong">85.98% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>1788/2077</span>
+                <span class='fraction'>1792/2084</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>246/246</span>
+                <span class='fraction'>247/247</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">86.72% </span>
+                <span class="strong">86.84% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>98/113</span>
+                <span class='fraction'>99/114</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">86.08% </span>
+                <span class="strong">85.98% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>1788/2077</span>
+                <span class='fraction'>1792/2084</span>
             </div>
         
             
@@ -80,17 +80,17 @@ <h1>All files</h1>
 </thead>
 <tbody><tr>
 	<td class="file high" data-value="src"><a href="src/index.html">src</a></td>
-	<td data-value="86.66" class="pic high">
+	<td data-value="86.44" class="pic high">
 	<div class="chart"><div class="cover-fill" style="width: 86%"></div><div class="cover-empty" style="width: 14%"></div></div>
 	</td>
-	<td data-value="86.66" class="pct high">86.66%</td>
-	<td data-value="945" class="abs high">819/945</td>
+	<td data-value="86.44" class="pct high">86.44%</td>
+	<td data-value="952" class="abs high">823/952</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="211" class="abs high">211/211</td>
-	<td data-value="88.63" class="pct high">88.63%</td>
-	<td data-value="88" class="abs high">78/88</td>
-	<td data-value="86.66" class="pct high">86.66%</td>
-	<td data-value="945" class="abs high">819/945</td>
+	<td data-value="212" class="abs high">212/212</td>
+	<td data-value="88.76" class="pct high">88.76%</td>
+	<td data-value="89" class="abs high">79/89</td>
+	<td data-value="86.44" class="pct high">86.44%</td>
+	<td data-value="952" class="abs high">823/952</td>
 	</tr>
 
 <tr>
@@ -131,7 +131,7 @@ <h1>All files</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-26T03:04:57.457Z
+                at 2024-05-04T17:50:26.851Z
             </div>
         <script src="prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/src/custom-element.js.html b/coverage/lcov-report/src/custom-element.js.html
index 26348c5..ecba54c 100644
--- a/coverage/lcov-report/src/custom-element.js.html
+++ b/coverage/lcov-report/src/custom-element.js.html
@@ -23,30 +23,30 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> custom-
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">92.86% </span>
+                <span class="strong">92.9% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>664/715</span>
+                <span class='fraction'>668/719</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>183/183</span>
+                <span class='fraction'>184/184</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">85.48% </span>
+                <span class="strong">85.71% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>53/62</span>
+                <span class='fraction'>54/63</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">92.86% </span>
+                <span class="strong">92.9% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>664/715</span>
+                <span class='fraction'>668/719</span>
             </div>
         
             
@@ -778,7 +778,11 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> custom-
 <a name='L713'></a><a href='#L713'>713</a>
 <a name='L714'></a><a href='#L714'>714</a>
 <a name='L715'></a><a href='#L715'>715</a>
-<a name='L716'></a><a href='#L716'>716</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">10x</span>
+<a name='L716'></a><a href='#L716'>716</a>
+<a name='L717'></a><a href='#L717'>717</a>
+<a name='L718'></a><a href='#L718'>718</a>
+<a name='L719'></a><a href='#L719'>719</a>
+<a name='L720'></a><a href='#L720'>720</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">10x</span>
 <span class="cline-any cline-yes">10x</span>
 <span class="cline-any cline-yes">10x</span>
 <span class="cline-any cline-yes">10x</span>
@@ -1021,7 +1025,6 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> custom-
 <span class="cline-any cline-yes">9x</span>
 <span class="cline-any cline-yes">9x</span>
 <span class="cline-any cline-yes">9x</span>
-<span class="cline-any cline-yes">9x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
@@ -1475,6 +1478,11 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> custom-
 <span class="cline-any cline-yes">9x</span>
 <span class="cline-any cline-yes">9x</span>
 <span class="cline-any cline-yes">9x</span>
+<span class="cline-any cline-yes">9x</span>
+<span class="cline-any cline-yes">9x</span>
+<span class="cline-any cline-yes">9x</span>
+<span class="cline-any cline-yes">9x</span>
+<span class="cline-any cline-yes">9x</span>
 <span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-yes">6x</span>
@@ -1661,8 +1669,8 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> custom-
         &lt;xsl:template match="*[name()='template']"&gt;&lt;xsl:apply-templates mode="sanitize" select="*|text()"/&gt;&lt;/xsl:template&gt;
         &lt;xsl:template match="*"&gt;&lt;xsl:apply-templates mode="sanitize" select="*|text()"/&gt;&lt;/xsl:template&gt;
         &lt;xsl:template match="*[name()='svg']|*[name()='math']"&gt;&lt;xsl:apply-templates mode="sanitize" select="."/&gt;&lt;/xsl:template&gt;
-        &lt;xsl:template mode="sanitize" match="*[count(text())=1 and count(*)=0]"&gt;&lt;xsl:copy&gt;&lt;xsl:apply-templates mode="sanitize" select="@*"/&gt;&lt;xsl:value-of select="text()"/&gt;&lt;/xsl:copy&gt;&lt;/xsl:template&gt;
-        &lt;xsl:template mode="sanitize" match="xhtml:*[count(text())=1 and count(*)=0]"&gt;&lt;xsl:element name="{local-name()}"&gt;&lt;xsl:apply-templates mode="sanitize" select="@*"/&gt;&lt;xsl:value-of select="text()"/&gt;&lt;/xsl:element&gt;&lt;/xsl:template&gt;
+        &lt;xsl:template mode="sanitize" match="*[count(text())=1 and count(*)=0]"&gt;&lt;xsl:copy&gt;&lt;xsl:apply-templates mode="sanitize" select="@*"/&gt;&lt;xsl:value-of select="text()"&gt;&lt;/xsl:value-of&gt;&lt;/xsl:copy&gt;&lt;/xsl:template&gt;
+        &lt;xsl:template mode="sanitize" match="xhtml:*[count(text())=1 and count(*)=0]"&gt;&lt;xsl:element name="{local-name()}"&gt;&lt;xsl:apply-templates mode="sanitize" select="@*"/&gt;&lt;xsl:value-of select="text()"&gt;&lt;/xsl:value-of&gt;&lt;/xsl:element&gt;&lt;/xsl:template&gt;
         &lt;xsl:template mode="sanitize" match="*|@*"&gt;&lt;xsl:copy&gt;&lt;xsl:apply-templates mode="sanitize" select="*|@*|text()"/&gt;&lt;/xsl:copy&gt;&lt;/xsl:template&gt;
         &lt;xsl:template mode="sanitize" match="text()[normalize-space(.) = '']"/&gt;
         &lt;xsl:template mode="sanitize" match="text()"&gt;&lt;dce-text&gt;&lt;xsl:copy/&gt;&lt;/dce-text&gt;&lt;/xsl:template&gt;
@@ -1701,8 +1709,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> custom-
         &lt;xsl:choose&gt;
             &lt;xsl:when test="//attr"&gt;{//attr}&lt;/xsl:when&gt;
             &lt;xsl:otherwise&gt;{def}&lt;/xsl:otherwise&gt;
-        &lt;/xsl:choose&gt;
-        &lt;xsl:value-of select="."/&gt;&lt;/xsl:template&gt;
+        &lt;/xsl:choose&gt;&lt;xsl:value-of select="."&gt;&lt;/xsl:value-of&gt;&lt;/xsl:template&gt;
     &lt;xsl:template mode="payload"  match="attributes"&gt;&lt;/xsl:template&gt;
     &lt;xsl:template match="/"&gt;
         &lt;xsl:apply-templates mode="payload" select="/datadom/attributes"/&gt;
@@ -2188,12 +2195,17 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> custom-
 &nbsp;
 <span class="fstat-no" title="function not covered" >            get dce(){ return dce }</span>
         }
+        const registerTag = tag =&gt;
+        {
+            if( window.customElements.get(tag) !== DceElement )
+                window.customElements.define( tag, DceElement);
+        };
         if(tag)
-            window.customElements.define( tag, DceElement);
+            registerTag(tag);
         else
         {   const t = tagName;
             this.setAttribute('tag', t );
-            window.customElements.define( t, DceElement);
+            registerTag(t);
             const el = document.createElement(t);
             this.getAttributeNames().forEach(a=&gt;el.setAttribute(a,this.getAttribute(a)));
             el.append(...[...this.childNodes].filter( e =&gt; e.localName!=='style') );
@@ -2215,7 +2227,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> custom-
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-26T03:04:57.457Z
+                at 2024-05-04T17:50:26.851Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/src/http-request.js.html b/coverage/lcov-report/src/http-request.js.html
index 977745e..00a0e52 100644
--- a/coverage/lcov-report/src/http-request.js.html
+++ b/coverage/lcov-report/src/http-request.js.html
@@ -23,9 +23,9 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> http-re
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">7.4% </span>
+                <span class="strong">7.14% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>6/81</span>
+                <span class='fraction'>6/84</span>
             </div>
         
             
@@ -44,9 +44,9 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> http-re
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">7.4% </span>
+                <span class="strong">7.14% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>6/81</span>
+                <span class='fraction'>6/84</span>
             </div>
         
             
@@ -144,7 +144,10 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> http-re
 <a name='L79'></a><a href='#L79'>79</a>
 <a name='L80'></a><a href='#L80'>80</a>
 <a name='L81'></a><a href='#L81'>81</a>
-<a name='L82'></a><a href='#L82'>82</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<a name='L82'></a><a href='#L82'>82</a>
+<a name='L83'></a><a href='#L83'>83</a>
+<a name='L84'></a><a href='#L84'>84</a>
+<a name='L85'></a><a href='#L85'>85</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -222,6 +225,9 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> http-re
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -260,7 +266,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> http-re
 <span class="cstat-no" title="statement not covered" ></span>
 <span class="cstat-no" title="statement not covered" >    async fetch()</span>
 <span class="cstat-no" title="statement not covered" >    {</span>
-<span class="cstat-no" title="statement not covered" >        if( !this.closest('custom-element') )</span>
+<span class="cstat-no" title="statement not covered" >        if( !this.closest('body') )</span>
 <span class="cstat-no" title="statement not covered" >            return;</span>
 <span class="cstat-no" title="statement not covered" >        const url = attr(this, 'url') || '';</span>
 <span class="cstat-no" title="statement not covered" >        if( !url )</span>
@@ -288,8 +294,11 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> http-re
 <span class="cstat-no" title="statement not covered" ></span>
 <span class="cstat-no" title="statement not covered" >        slice.response = r;</span>
 <span class="cstat-no" title="statement not covered" >        update();</span>
-<span class="cstat-no" title="statement not covered" >        slice.data = await response.json();</span>
-<span class="cstat-no" title="statement not covered" >        update();</span>
+<span class="cstat-no" title="statement not covered" >        if( r.headers['content-type']?.includes('json'))</span>
+<span class="cstat-no" title="statement not covered" >            try</span>
+<span class="cstat-no" title="statement not covered" >            {   slice.data = await response.json();</span>
+<span class="cstat-no" title="statement not covered" >                update();</span>
+<span class="cstat-no" title="statement not covered" >            }catch(_e){}</span>
 <span class="cstat-no" title="statement not covered" >    }</span>
 <span class="cstat-no" title="statement not covered" ></span>
 <span class="cstat-no" title="statement not covered" >    attributeChangedCallback(name, oldValue, newValue)</span>
@@ -313,7 +322,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> http-re
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-26T03:04:57.457Z
+                at 2024-05-04T17:50:26.851Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/src/index.html b/coverage/lcov-report/src/index.html
index 2d1a461..b9c804d 100644
--- a/coverage/lcov-report/src/index.html
+++ b/coverage/lcov-report/src/index.html
@@ -23,30 +23,30 @@ <h1><a href="../index.html">All files</a> src</h1>
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">86.66% </span>
+                <span class="strong">86.44% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>819/945</span>
+                <span class='fraction'>823/952</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>211/211</span>
+                <span class='fraction'>212/212</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">88.63% </span>
+                <span class="strong">88.76% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>78/88</span>
+                <span class='fraction'>79/89</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">86.66% </span>
+                <span class="strong">86.44% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>819/945</span>
+                <span class='fraction'>823/952</span>
             </div>
         
             
@@ -80,32 +80,32 @@ <h1><a href="../index.html">All files</a> src</h1>
 </thead>
 <tbody><tr>
 	<td class="file high" data-value="custom-element.js"><a href="custom-element.js.html">custom-element.js</a></td>
-	<td data-value="92.86" class="pic high">
+	<td data-value="92.9" class="pic high">
 	<div class="chart"><div class="cover-fill" style="width: 92%"></div><div class="cover-empty" style="width: 8%"></div></div>
 	</td>
-	<td data-value="92.86" class="pct high">92.86%</td>
-	<td data-value="715" class="abs high">664/715</td>
+	<td data-value="92.9" class="pct high">92.9%</td>
+	<td data-value="719" class="abs high">668/719</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="183" class="abs high">183/183</td>
-	<td data-value="85.48" class="pct high">85.48%</td>
-	<td data-value="62" class="abs high">53/62</td>
-	<td data-value="92.86" class="pct high">92.86%</td>
-	<td data-value="715" class="abs high">664/715</td>
+	<td data-value="184" class="abs high">184/184</td>
+	<td data-value="85.71" class="pct high">85.71%</td>
+	<td data-value="63" class="abs high">54/63</td>
+	<td data-value="92.9" class="pct high">92.9%</td>
+	<td data-value="719" class="abs high">668/719</td>
 	</tr>
 
 <tr>
 	<td class="file low" data-value="http-request.js"><a href="http-request.js.html">http-request.js</a></td>
-	<td data-value="7.4" class="pic low">
+	<td data-value="7.14" class="pic low">
 	<div class="chart"><div class="cover-fill" style="width: 7%"></div><div class="cover-empty" style="width: 93%"></div></div>
 	</td>
-	<td data-value="7.4" class="pct low">7.4%</td>
-	<td data-value="81" class="abs low">6/81</td>
+	<td data-value="7.14" class="pct low">7.14%</td>
+	<td data-value="84" class="abs low">6/84</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="2" class="abs high">2/2</td>
 	<td data-value="50" class="pct medium">50%</td>
 	<td data-value="2" class="abs medium">1/2</td>
-	<td data-value="7.4" class="pct low">7.4%</td>
-	<td data-value="81" class="abs low">6/81</td>
+	<td data-value="7.14" class="pct low">7.14%</td>
+	<td data-value="84" class="abs low">6/84</td>
 	</tr>
 
 <tr>
@@ -146,7 +146,7 @@ <h1><a href="../index.html">All files</a> src</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-26T03:04:57.457Z
+                at 2024-05-04T17:50:26.851Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/src/local-storage.js.html b/coverage/lcov-report/src/local-storage.js.html
index d72bd77..75f5ea7 100644
--- a/coverage/lcov-report/src/local-storage.js.html
+++ b/coverage/lcov-report/src/local-storage.js.html
@@ -328,7 +328,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> local-s
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-26T03:04:57.457Z
+                at 2024-05-04T17:50:26.851Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/src/location-element.js.html b/coverage/lcov-report/src/location-element.js.html
index d9a7fbe..1e9a071 100644
--- a/coverage/lcov-report/src/location-element.js.html
+++ b/coverage/lcov-report/src/location-element.js.html
@@ -253,7 +253,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> locatio
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-26T03:04:57.457Z
+                at 2024-05-04T17:50:26.851Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/src/mocks/browser.js.html b/coverage/lcov-report/src/mocks/browser.js.html
index f7ed75c..dc425a5 100644
--- a/coverage/lcov-report/src/mocks/browser.js.html
+++ b/coverage/lcov-report/src/mocks/browser.js.html
@@ -91,7 +91,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/mocks</a
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-26T03:04:57.457Z
+                at 2024-05-04T17:50:26.851Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/src/mocks/handlers.js.html b/coverage/lcov-report/src/mocks/handlers.js.html
index 6100c7e..769dae1 100644
--- a/coverage/lcov-report/src/mocks/handlers.js.html
+++ b/coverage/lcov-report/src/mocks/handlers.js.html
@@ -136,7 +136,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/mocks</a
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-26T03:04:57.457Z
+                at 2024-05-04T17:50:26.851Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/src/mocks/index.html b/coverage/lcov-report/src/mocks/index.html
index 75e0f62..1a10e84 100644
--- a/coverage/lcov-report/src/mocks/index.html
+++ b/coverage/lcov-report/src/mocks/index.html
@@ -131,7 +131,7 @@ <h1><a href="../../index.html">All files</a> src/mocks</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-26T03:04:57.457Z
+                at 2024-05-04T17:50:26.851Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/src/mocks/msw.js.html b/coverage/lcov-report/src/mocks/msw.js.html
index c7c37c9..ce22c92 100644
--- a/coverage/lcov-report/src/mocks/msw.js.html
+++ b/coverage/lcov-report/src/mocks/msw.js.html
@@ -166,7 +166,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/mocks</a
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-26T03:04:57.457Z
+                at 2024-05-04T17:50:26.851Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/stories/css-scoping.stories.js.html b/coverage/lcov-report/stories/css-scoping.stories.js.html
index afbe4b9..7d9049c 100644
--- a/coverage/lcov-report/stories/css-scoping.stories.js.html
+++ b/coverage/lcov-report/stories/css-scoping.stories.js.html
@@ -247,7 +247,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">stories</a> css
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-26T03:04:57.457Z
+                at 2024-05-04T17:50:26.851Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/stories/data-slices.stories.js.html b/coverage/lcov-report/stories/data-slices.stories.js.html
index 3d6c504..a00fe92 100644
--- a/coverage/lcov-report/stories/data-slices.stories.js.html
+++ b/coverage/lcov-report/stories/data-slices.stories.js.html
@@ -457,7 +457,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">stories</a> dat
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-26T03:04:57.457Z
+                at 2024-05-04T17:50:26.851Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/stories/dom-merge.stories.js.html b/coverage/lcov-report/stories/dom-merge.stories.js.html
index e8d3c9e..6fe5492 100644
--- a/coverage/lcov-report/stories/dom-merge.stories.js.html
+++ b/coverage/lcov-report/stories/dom-merge.stories.js.html
@@ -238,7 +238,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">stories</a> dom
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-26T03:04:57.457Z
+                at 2024-05-04T17:50:26.851Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/stories/http-request.stories.js.html b/coverage/lcov-report/stories/http-request.stories.js.html
index 790342f..abe30b1 100644
--- a/coverage/lcov-report/stories/http-request.stories.js.html
+++ b/coverage/lcov-report/stories/http-request.stories.js.html
@@ -640,7 +640,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">stories</a> htt
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-26T03:04:57.457Z
+                at 2024-05-04T17:50:26.851Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/stories/index.html b/coverage/lcov-report/stories/index.html
index ba2cfcc..43cc075 100644
--- a/coverage/lcov-report/stories/index.html
+++ b/coverage/lcov-report/stories/index.html
@@ -236,7 +236,7 @@ <h1><a href="../index.html">All files</a> stories</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-26T03:04:57.457Z
+                at 2024-05-04T17:50:26.851Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/stories/local-storage.stories.js.html b/coverage/lcov-report/stories/local-storage.stories.js.html
index 4d63c0c..b357b77 100644
--- a/coverage/lcov-report/stories/local-storage.stories.js.html
+++ b/coverage/lcov-report/stories/local-storage.stories.js.html
@@ -760,7 +760,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">stories</a> loc
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-26T03:04:57.457Z
+                at 2024-05-04T17:50:26.851Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/stories/location-element.stories.js.html b/coverage/lcov-report/stories/location-element.stories.js.html
index b3bc041..f2ff31d 100644
--- a/coverage/lcov-report/stories/location-element.stories.js.html
+++ b/coverage/lcov-report/stories/location-element.stories.js.html
@@ -313,7 +313,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">stories</a> loc
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-26T03:04:57.457Z
+                at 2024-05-04T17:50:26.851Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/stories/parameters.stories.js.html b/coverage/lcov-report/stories/parameters.stories.js.html
index 087df8f..010a184 100644
--- a/coverage/lcov-report/stories/parameters.stories.js.html
+++ b/coverage/lcov-report/stories/parameters.stories.js.html
@@ -307,7 +307,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">stories</a> par
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-26T03:04:57.457Z
+                at 2024-05-04T17:50:26.851Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/stories/playground.stories.js.html b/coverage/lcov-report/stories/playground.stories.js.html
index abe2531..230571b 100644
--- a/coverage/lcov-report/stories/playground.stories.js.html
+++ b/coverage/lcov-report/stories/playground.stories.js.html
@@ -421,7 +421,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">stories</a> pla
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-26T03:04:57.457Z
+                at 2024-05-04T17:50:26.851Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/stories/pokemons.mock.js.html b/coverage/lcov-report/stories/pokemons.mock.js.html
index c11f354..0a2dffa 100644
--- a/coverage/lcov-report/stories/pokemons.mock.js.html
+++ b/coverage/lcov-report/stories/pokemons.mock.js.html
@@ -109,7 +109,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">stories</a> pok
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-26T03:04:57.457Z
+                at 2024-05-04T17:50:26.851Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/stories/src-attribute.stories.js.html b/coverage/lcov-report/stories/src-attribute.stories.js.html
index a4a7f0b..5d92459 100644
--- a/coverage/lcov-report/stories/src-attribute.stories.js.html
+++ b/coverage/lcov-report/stories/src-attribute.stories.js.html
@@ -424,7 +424,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">stories</a> src
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-04-26T03:04:57.457Z
+                at 2024-05-04T17:50:26.851Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov.info b/coverage/lcov.info
index 6984fd7..eef5f3f 100644
--- a/coverage/lcov.info
+++ b/coverage/lcov.info
@@ -25,45 +25,46 @@ FN:122,tagUid
 FN:131,txt
 FN:158,createXsltFromDom
 FN:184,asXmlNode
-FN:239,$
-FN:283,slot2xsl
-FN:298,xhrTemplate
-FN:317,deepEqual
-FN:333,assureSlices
-FN:351,event2slice
-FN:391,forEach$
-FN:395,getByHashId
-FN:396,loadTemplateRoots
-FN:422,mergeAttr
-FN:434,assureUnique
-FN:455,merge
-FN:487,assureUID
-FN:492,evalCurly
-FN:496,xPathDefaults
-FN:506,xPath
-FN:521,toXsl
-FN:542,<static_initializer>
-FN:544,connectedCallback
-FN:560,get
-FN:568,<instance_members_initializer>
-FN:569,get observedAttributes
-FN:571,connectedCallback
-FN:591,createXmlNode
-FN:601,sliceXPath
-FN:605,applySlices
-FN:619,onSlice
-FN:629,transform.transform
-FN:678,#applyAttribute
-FN:687,attributeChangedCallback
-FN:694,get dce
-FN:708,get templateNode
-FN:709,get dce
-FN:711,get xslt
-FN:364,cleanSliceValue
-FN:301,dom
-FN:306,xhr.onload
-FNF:62
-FNH:53
+FN:238,$
+FN:282,slot2xsl
+FN:297,xhrTemplate
+FN:316,deepEqual
+FN:332,assureSlices
+FN:350,event2slice
+FN:390,forEach$
+FN:394,getByHashId
+FN:395,loadTemplateRoots
+FN:421,mergeAttr
+FN:433,assureUnique
+FN:454,merge
+FN:486,assureUID
+FN:491,evalCurly
+FN:495,xPathDefaults
+FN:505,xPath
+FN:520,toXsl
+FN:541,<static_initializer>
+FN:543,connectedCallback
+FN:559,get
+FN:567,<instance_members_initializer>
+FN:568,get observedAttributes
+FN:570,connectedCallback
+FN:590,createXmlNode
+FN:600,sliceXPath
+FN:604,applySlices
+FN:618,onSlice
+FN:628,transform.transform
+FN:677,#applyAttribute
+FN:686,attributeChangedCallback
+FN:693,get dce
+FN:695,registerTag
+FN:712,get templateNode
+FN:713,get dce
+FN:715,get xslt
+FN:363,cleanSliceValue
+FN:300,dom
+FN:305,xhr.onload
+FNF:63
+FNH:54
 FNDA:9,attr
 FNDA:6,isText
 FNDA:5,isString
@@ -120,6 +121,7 @@ FNDA:9,transform.transform
 FNDA:2,#applyAttribute
 FNDA:2,attributeChangedCallback
 FNDA:0,get dce
+FNDA:9,registerTag
 FNDA:9,get templateNode
 FNDA:0,get dce
 FNDA:0,get xslt
@@ -369,7 +371,7 @@ DA:240,9
 DA:241,9
 DA:242,9
 DA:243,9
-DA:244,9
+DA:244,2
 DA:245,2
 DA:246,2
 DA:247,2
@@ -389,17 +391,17 @@ DA:260,2
 DA:261,2
 DA:262,2
 DA:263,2
-DA:264,2
-DA:265,1
+DA:264,1
+DA:265,2
 DA:266,2
 DA:267,2
 DA:268,2
-DA:269,2
+DA:269,9
 DA:270,9
-DA:271,9
+DA:271,2
 DA:272,2
 DA:273,2
-DA:274,2
+DA:274,9
 DA:275,9
 DA:276,9
 DA:277,9
@@ -408,22 +410,22 @@ DA:279,9
 DA:280,9
 DA:281,9
 DA:282,9
-DA:283,9
+DA:283,3
 DA:284,3
 DA:285,3
 DA:286,3
 DA:287,3
 DA:288,3
 DA:289,3
-DA:290,3
+DA:290,9
 DA:291,9
 DA:292,9
 DA:293,9
 DA:294,9
 DA:295,9
 DA:296,9
-DA:297,9
-DA:298,10
+DA:297,10
+DA:298,1
 DA:299,1
 DA:300,1
 DA:301,1
@@ -441,8 +443,8 @@ DA:312,1
 DA:313,1
 DA:314,1
 DA:315,1
-DA:316,1
-DA:317,10
+DA:316,10
+DA:317,0
 DA:318,0
 DA:319,0
 DA:320,0
@@ -456,17 +458,17 @@ DA:327,0
 DA:328,0
 DA:329,0
 DA:330,0
-DA:331,0
+DA:331,10
 DA:332,10
-DA:333,10
+DA:333,6
 DA:334,6
 DA:335,6
-DA:336,6
+DA:336,2
 DA:337,2
 DA:338,2
 DA:339,2
-DA:340,2
-DA:341,6
+DA:340,6
+DA:341,10
 DA:342,10
 DA:343,10
 DA:344,10
@@ -476,7 +478,7 @@ DA:347,10
 DA:348,10
 DA:349,10
 DA:350,10
-DA:351,10
+DA:351,6
 DA:352,6
 DA:353,6
 DA:354,6
@@ -495,44 +497,44 @@ DA:366,6
 DA:367,6
 DA:368,6
 DA:369,6
-DA:370,6
+DA:370,3
 DA:371,3
 DA:372,3
 DA:373,3
 DA:374,3
 DA:375,3
-DA:376,3
-DA:377,6
+DA:376,6
+DA:377,5
 DA:378,5
 DA:379,5
 DA:380,5
 DA:381,5
 DA:382,5
 DA:383,5
-DA:384,5
+DA:384,2
 DA:385,2
-DA:386,2
-DA:387,5
+DA:386,5
+DA:387,6
 DA:388,6
-DA:389,6
-DA:390,10
+DA:389,10
+DA:390,9
 DA:391,9
 DA:392,9
 DA:393,9
-DA:394,9
+DA:394,10
 DA:395,10
-DA:396,10
+DA:396,9
 DA:397,9
 DA:398,9
-DA:399,9
+DA:399,1
 DA:400,1
 DA:401,1
 DA:402,1
 DA:403,1
 DA:404,1
-DA:405,1
+DA:405,0
 DA:406,0
-DA:407,0
+DA:407,1
 DA:408,1
 DA:409,1
 DA:410,1
@@ -541,25 +543,25 @@ DA:412,1
 DA:413,1
 DA:414,1
 DA:415,1
-DA:416,1
+DA:416,0
 DA:417,0
-DA:418,0
+DA:418,1
 DA:419,1
-DA:420,1
-DA:421,9
-DA:422,10
+DA:420,9
+DA:421,10
+DA:422,6
 DA:423,6
-DA:424,6
+DA:424,0
 DA:425,0
 DA:426,0
-DA:427,0
+DA:427,6
 DA:428,6
 DA:429,6
 DA:430,6
 DA:431,6
 DA:432,6
-DA:433,6
-DA:434,10
+DA:433,10
+DA:434,9
 DA:435,9
 DA:436,9
 DA:437,9
@@ -572,32 +574,32 @@ DA:443,9
 DA:444,9
 DA:445,9
 DA:446,9
-DA:447,9
+DA:447,5
 DA:448,5
 DA:449,5
 DA:450,5
-DA:451,5
+DA:451,9
 DA:452,9
 DA:453,9
-DA:454,9
-DA:455,10
+DA:454,10
+DA:455,9
 DA:456,9
 DA:457,9
 DA:458,9
 DA:459,9
 DA:460,9
-DA:461,9
+DA:461,6
 DA:462,6
 DA:463,6
 DA:464,6
 DA:465,6
 DA:466,6
-DA:467,6
+DA:467,9
 DA:468,9
 DA:469,9
 DA:470,9
 DA:471,9
-DA:472,9
+DA:472,6
 DA:473,6
 DA:474,6
 DA:475,6
@@ -605,23 +607,23 @@ DA:476,6
 DA:477,6
 DA:478,6
 DA:479,6
-DA:480,6
+DA:480,9
 DA:481,9
 DA:482,9
 DA:483,9
 DA:484,9
 DA:485,9
-DA:486,9
-DA:487,10
+DA:486,10
+DA:487,1
 DA:488,1
 DA:489,1
 DA:490,1
-DA:491,1
-DA:492,10
+DA:491,10
+DA:492,2
 DA:493,2
 DA:494,2
-DA:495,2
-DA:496,10
+DA:495,10
+DA:496,4
 DA:497,4
 DA:498,4
 DA:499,4
@@ -630,30 +632,30 @@ DA:501,4
 DA:502,4
 DA:503,4
 DA:504,4
-DA:505,4
-DA:506,10
+DA:505,10
+DA:506,3
 DA:507,3
 DA:508,3
 DA:509,3
 DA:510,3
 DA:511,3
 DA:512,3
-DA:513,3
+DA:513,2
 DA:514,2
 DA:515,2
 DA:516,2
 DA:517,2
-DA:518,2
-DA:519,3
+DA:518,3
+DA:519,10
 DA:520,10
-DA:521,10
+DA:521,5
 DA:522,5
 DA:523,5
 DA:524,5
 DA:525,5
 DA:526,5
 DA:527,5
-DA:528,5
+DA:528,3
 DA:529,3
 DA:530,3
 DA:531,3
@@ -662,25 +664,25 @@ DA:533,3
 DA:534,3
 DA:535,3
 DA:536,3
-DA:537,3
+DA:537,10
 DA:538,10
 DA:539,10
 DA:540,10
 DA:541,10
 DA:542,10
 DA:543,10
-DA:544,10
+DA:544,9
 DA:545,9
 DA:546,9
 DA:547,9
 DA:548,9
 DA:549,9
 DA:550,9
-DA:551,9
+DA:551,2
 DA:552,2
 DA:553,2
 DA:554,2
-DA:555,2
+DA:555,9
 DA:556,9
 DA:557,9
 DA:558,9
@@ -699,22 +701,22 @@ DA:570,9
 DA:571,9
 DA:572,9
 DA:573,9
-DA:574,9
+DA:574,5
 DA:575,5
 DA:576,5
 DA:577,5
 DA:578,5
 DA:579,5
-DA:580,5
+DA:580,1
 DA:581,1
 DA:582,1
-DA:583,1
+DA:583,5
 DA:584,5
 DA:585,5
 DA:586,5
 DA:587,5
 DA:588,5
-DA:589,5
+DA:589,9
 DA:590,9
 DA:591,9
 DA:592,9
@@ -734,17 +736,17 @@ DA:605,9
 DA:606,9
 DA:607,9
 DA:608,9
-DA:609,9
+DA:609,6
 DA:610,6
 DA:611,6
 DA:612,6
 DA:613,6
-DA:614,6
+DA:614,9
 DA:615,9
 DA:616,9
 DA:617,9
 DA:618,9
-DA:619,9
+DA:619,6
 DA:620,6
 DA:621,6
 DA:622,6
@@ -752,7 +754,7 @@ DA:623,6
 DA:624,6
 DA:625,6
 DA:626,6
-DA:627,6
+DA:627,9
 DA:628,9
 DA:629,9
 DA:630,9
@@ -771,15 +773,15 @@ DA:642,9
 DA:643,9
 DA:644,9
 DA:645,9
-DA:646,9
+DA:646,2
 DA:647,2
 DA:648,2
 DA:649,2
 DA:650,2
-DA:651,2
+DA:651,9
 DA:652,9
 DA:653,9
-DA:654,9
+DA:654,6
 DA:655,6
 DA:656,6
 DA:657,6
@@ -791,19 +793,19 @@ DA:662,6
 DA:663,6
 DA:664,6
 DA:665,6
-DA:666,6
-DA:667,4
+DA:666,4
+DA:667,2
 DA:668,2
-DA:669,2
-DA:670,4
-DA:671,6
+DA:669,4
+DA:670,6
+DA:671,9
 DA:672,9
 DA:673,9
 DA:674,9
 DA:675,9
 DA:676,9
 DA:677,9
-DA:678,9
+DA:678,2
 DA:679,2
 DA:680,2
 DA:681,2
@@ -811,38 +813,42 @@ DA:682,2
 DA:683,2
 DA:684,2
 DA:685,2
-DA:686,2
-DA:687,9
+DA:686,9
+DA:687,2
 DA:688,2
-DA:689,2
+DA:689,1
 DA:690,1
-DA:691,1
-DA:692,2
+DA:691,2
+DA:692,9
 DA:693,9
 DA:694,9
 DA:695,9
 DA:696,9
 DA:697,9
-DA:698,6
-DA:699,6
-DA:700,6
-DA:701,6
+DA:698,9
+DA:699,9
+DA:700,9
+DA:701,9
 DA:702,6
 DA:703,6
 DA:704,6
 DA:705,6
 DA:706,6
-DA:707,9
-DA:708,10
-DA:709,10
-DA:710,10
-DA:711,10
+DA:707,6
+DA:708,6
+DA:709,6
+DA:710,6
+DA:711,9
 DA:712,10
 DA:713,10
 DA:714,10
 DA:715,10
-LF:715
-LH:664
+DA:716,10
+DA:717,10
+DA:718,10
+DA:719,10
+LF:719
+LH:668
 BRDA:1,0,0,429
 BRDA:8,1,0,10
 BRDA:12,2,0,19
@@ -868,7 +874,7 @@ BRDA:135,21,0,6
 BRDA:158,22,0,54
 BRDA:161,23,0,2
 BRDA:162,24,0,2
-BRDA:242,25,0,1
+BRDA:241,25,0,1
 BRDA:178,26,0,27
 BRDA:181,27,0,6
 BRDA:181,28,0,6
@@ -878,156 +884,157 @@ BRDA:195,31,0,6
 BRDA:182,32,0,19
 BRDA:184,33,0,10
 BRDA:192,34,0,9
-BRDA:239,35,0,10
-BRDA:283,36,0,10
-BRDA:286,37,0,8
-BRDA:292,38,0,10
-BRDA:391,39,0,10
-BRDA:396,40,0,10
-BRDA:398,41,0,2
-BRDA:400,42,0,3
-BRDA:401,43,0,4
-BRDA:434,44,0,19
-BRDA:455,45,0,10
-BRDA:458,46,0,2
-BRDA:461,47,0,9
-BRDA:469,48,0,7
-BRDA:472,49,0,7
-BRDA:485,50,0,1
-BRDA:487,51,0,10
-BRDA:542,52,0,10
-BRDA:544,53,0,53
-BRDA:548,54,0,7
-BRDA:551,55,0,2
-BRDA:698,56,0,21
-BRDA:551,57,0,10
-BRDA:553,58,0,8
-BRDA:557,59,0,10
-BRDA:558,60,0,10
-BRDA:565,61,0,10
-BRDA:568,62,0,36
-BRDA:569,63,0,19
-BRDA:571,64,0,67
-BRDA:591,65,0,19
-BRDA:591,66,0,19
-BRDA:598,67,0,10
-BRDA:599,68,0,10
-BRDA:605,69,0,10
-BRDA:609,70,0,10
-BRDA:615,71,0,7
-BRDA:629,72,0,76
-BRDA:630,73,0,1
-BRDA:633,74,0,10
-BRDA:636,75,0,1
-BRDA:639,76,0,10
-BRDA:641,77,0,1
-BRDA:708,78,0,28
-BRDA:708,79,0,28
-BRDA:182,80,0,19
-BRDA:521,81,0,429
-BRDA:532,82,0,429
-BRDA:574,83,0,67
-BRDA:9,84,0,429
-BRDA:11,85,0,429
-BRDA:28,86,0,429
-BRDA:97,87,0,429
-BRDA:100,88,0,429
-BRDA:102,89,0,429
-BRDA:104,90,0,429
-BRDA:107,91,0,429
-BRDA:333,92,0,429
-BRDA:334,93,0,429
-BRDA:334,94,0,429
-BRDA:336,95,0,429
-BRDA:341,96,0,429
-BRDA:341,97,0,429
-BRDA:351,98,0,429
-BRDA:359,99,0,429
-BRDA:367,100,0,429
-BRDA:371,101,0,429
-BRDA:377,102,0,429
-BRDA:364,103,0,429
-BRDA:364,104,0,429
-BRDA:364,105,0,429
-BRDA:365,106,0,429
-BRDA:366,107,0,429
-BRDA:366,108,0,429
-BRDA:422,109,0,429
-BRDA:424,110,0,429
-BRDA:429,111,0,429
-BRDA:431,112,0,429
-BRDA:444,113,0,19
-BRDA:447,114,0,19
-BRDA:464,115,0,9
-BRDA:466,116,0,9
-BRDA:496,117,0,429
-BRDA:503,118,0,429
-BRDA:506,119,0,429
-BRDA:511,120,0,429
-BRDA:514,121,0,429
-BRDA:548,122,0,53
-BRDA:697,123,0,53
-BRDA:564,124,0,53
-BRDA:564,125,0,53
-BRDA:564,126,0,53
-BRDA:580,127,0,67
-BRDA:600,128,0,67
-BRDA:611,129,0,10
-BRDA:619,130,0,67
-BRDA:621,131,0,67
-BRDA:624,132,0,67
-BRDA:654,133,0,76
-BRDA:658,134,0,76
-BRDA:666,135,0,76
-BRDA:660,136,0,76
-BRDA:660,137,0,76
-BRDA:661,138,0,76
-BRDA:703,139,0,21
-BRDA:704,140,0,21
-BRDA:10,141,0,429
-BRDA:14,142,0,429
-BRDA:15,143,0,429
+BRDA:238,35,0,10
+BRDA:282,36,0,10
+BRDA:285,37,0,8
+BRDA:291,38,0,10
+BRDA:390,39,0,10
+BRDA:395,40,0,10
+BRDA:397,41,0,2
+BRDA:399,42,0,3
+BRDA:400,43,0,4
+BRDA:433,44,0,19
+BRDA:454,45,0,10
+BRDA:457,46,0,2
+BRDA:460,47,0,9
+BRDA:468,48,0,7
+BRDA:471,49,0,7
+BRDA:484,50,0,1
+BRDA:486,51,0,10
+BRDA:541,52,0,10
+BRDA:543,53,0,53
+BRDA:547,54,0,7
+BRDA:550,55,0,2
+BRDA:702,56,0,21
+BRDA:550,57,0,10
+BRDA:552,58,0,8
+BRDA:556,59,0,10
+BRDA:557,60,0,10
+BRDA:564,61,0,10
+BRDA:567,62,0,36
+BRDA:568,63,0,19
+BRDA:570,64,0,67
+BRDA:590,65,0,19
+BRDA:590,66,0,19
+BRDA:597,67,0,10
+BRDA:598,68,0,10
+BRDA:604,69,0,10
+BRDA:608,70,0,10
+BRDA:614,71,0,7
+BRDA:628,72,0,76
+BRDA:629,73,0,1
+BRDA:632,74,0,10
+BRDA:635,75,0,1
+BRDA:638,76,0,10
+BRDA:640,77,0,1
+BRDA:695,78,0,10
+BRDA:712,79,0,28
+BRDA:712,80,0,28
+BRDA:182,81,0,19
+BRDA:520,82,0,429
+BRDA:531,83,0,429
+BRDA:573,84,0,67
+BRDA:9,85,0,429
+BRDA:11,86,0,429
+BRDA:28,87,0,429
+BRDA:97,88,0,429
+BRDA:100,89,0,429
+BRDA:102,90,0,429
+BRDA:104,91,0,429
+BRDA:107,92,0,429
+BRDA:332,93,0,429
+BRDA:333,94,0,429
+BRDA:333,95,0,429
+BRDA:335,96,0,429
+BRDA:340,97,0,429
+BRDA:340,98,0,429
+BRDA:350,99,0,429
+BRDA:358,100,0,429
+BRDA:366,101,0,429
+BRDA:370,102,0,429
+BRDA:376,103,0,429
+BRDA:363,104,0,429
+BRDA:363,105,0,429
+BRDA:363,106,0,429
+BRDA:364,107,0,429
+BRDA:365,108,0,429
+BRDA:365,109,0,429
+BRDA:421,110,0,429
+BRDA:423,111,0,429
+BRDA:428,112,0,429
+BRDA:430,113,0,429
+BRDA:443,114,0,19
+BRDA:446,115,0,19
+BRDA:463,116,0,9
+BRDA:465,117,0,9
+BRDA:495,118,0,429
+BRDA:502,119,0,429
+BRDA:505,120,0,429
+BRDA:510,121,0,429
+BRDA:513,122,0,429
+BRDA:547,123,0,53
+BRDA:701,124,0,53
+BRDA:563,125,0,53
+BRDA:563,126,0,53
+BRDA:563,127,0,53
+BRDA:579,128,0,67
+BRDA:599,129,0,67
+BRDA:610,130,0,10
+BRDA:618,131,0,67
+BRDA:620,132,0,67
+BRDA:623,133,0,67
+BRDA:653,134,0,76
+BRDA:657,135,0,76
+BRDA:665,136,0,76
+BRDA:659,137,0,76
+BRDA:659,138,0,76
+BRDA:660,139,0,76
+BRDA:707,140,0,21
+BRDA:708,141,0,21
+BRDA:10,142,0,429
+BRDA:14,143,0,429
 BRDA:15,144,0,429
-BRDA:19,145,0,429
-BRDA:244,146,0,54
-BRDA:264,147,0,54
-BRDA:271,148,0,54
-BRDA:271,149,0,54
-BRDA:381,150,0,429
-BRDA:385,151,0,429
-BRDA:492,152,0,429
-BRDA:493,153,0,429
-BRDA:528,154,0,429
-BRDA:569,155,0,19
-BRDA:601,156,0,67
-BRDA:646,157,0,76
-BRDA:678,158,0,36
-BRDA:687,159,0,36
-BRDA:690,160,0,36
-BRDA:191,161,0,27
-BRDA:370,162,0,429
-BRDA:378,163,0,429
-BRDA:668,164,0,76
-BRDA:708,165,0,28
-BRDA:280,166,0,54
-BRDA:381,167,0,429
-BRDA:529,168,0,429
-BRDA:665,169,0,76
-BRDA:108,170,0,429
-BRDA:384,171,0,429
-BRDA:573,172,0,67
-BRDA:593,173,0,9
-BRDA:341,174,0,429
-BRDA:180,175,0,27
-BRDA:298,176,0,429
-BRDA:301,177,0,429
-BRDA:306,178,0,429
-BRDA:308,179,0,429
-BRDA:417,180,0,3
-BRDA:402,181,0,4
-BRDA:406,182,0,4
-BRF:183
-BRH:183
+BRDA:15,145,0,429
+BRDA:19,146,0,429
+BRDA:243,147,0,54
+BRDA:263,148,0,54
+BRDA:270,149,0,54
+BRDA:270,150,0,54
+BRDA:380,151,0,429
+BRDA:384,152,0,429
+BRDA:491,153,0,429
+BRDA:492,154,0,429
+BRDA:527,155,0,429
+BRDA:568,156,0,19
+BRDA:600,157,0,67
+BRDA:645,158,0,76
+BRDA:677,159,0,36
+BRDA:686,160,0,36
+BRDA:689,161,0,36
+BRDA:191,162,0,27
+BRDA:369,163,0,429
+BRDA:377,164,0,429
+BRDA:667,165,0,76
+BRDA:712,166,0,28
+BRDA:279,167,0,54
+BRDA:380,168,0,429
+BRDA:528,169,0,429
+BRDA:664,170,0,76
+BRDA:108,171,0,429
+BRDA:383,172,0,429
+BRDA:572,173,0,67
+BRDA:592,174,0,9
+BRDA:340,175,0,429
+BRDA:180,176,0,27
+BRDA:297,177,0,429
+BRDA:300,178,0,429
+BRDA:305,179,0,429
+BRDA:307,180,0,429
+BRDA:416,181,0,3
+BRDA:401,182,0,4
+BRDA:405,183,0,4
+BRF:184
+BRH:184
 end_of_record
 TN:
 SF:src\http-request.js
@@ -1115,10 +1122,13 @@ DA:75,0
 DA:76,0
 DA:77,0
 DA:78,0
-DA:79,1
-DA:80,1
-DA:81,1
-LF:81
+DA:79,0
+DA:80,0
+DA:81,0
+DA:82,1
+DA:83,1
+DA:84,1
+LF:84
 LH:6
 BRDA:1,0,0,1
 BRDA:4,1,0,1
diff --git a/src/http-request.js b/src/http-request.js
index c406922..102fc4a 100644
--- a/src/http-request.js
+++ b/src/http-request.js
@@ -46,7 +46,7 @@ export class HttpRequestElement extends HTMLElement
 
         this.#inProgressUrl = url;
         const controller = new AbortController();
-        this.#destroy = ()=> controller.abort(this.localName+' disconnected');
+        this.#destroy = ()=> { controller.abort(this.localName+' disconnected'); this.#inProgressUrl = ''; }
 
         const request = { ...this.requestProps, headers: this.requestHeaders }
         ,       slice = { request }
@@ -70,10 +70,15 @@ export class HttpRequestElement extends HTMLElement
 
     attributeChangedCallback(name, oldValue, newValue)
     {   if( name === 'url' )
-        {   if( newValue && oldValue !== newValue)
+        {   if( oldValue !== newValue)
             {
                 oldValue && this.#destroy?.();
-                setTimeout(()=>this.fetch(),0)
+                if( newValue )
+                    setTimeout(()=>this.fetch(),10)
+                else
+                {   this.value = {}
+                    setTimeout(()=>this.dispatchEvent( new Event('change') ),10)
+                }
             }
         }
     }
diff --git a/src/input-text.js b/src/input-text.js
deleted file mode 100644
index 7f12d15..0000000
--- a/src/input-text.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export class InputTextElement extends HTMLElement
-{
-    constructor()
-    {
-        super();
-        const i = this.ownerDocument.createElement('input');
-        for(let a of this.attributes)
-            a.namespaceURI ? i.setAttributeNS(a.namespaceURI,a.name,a.value) : i.setAttribute(a.name,a.value)
-        this.append(i)
-    }
-    get value(){ return this.firstChild.value }
-    set value(v){ return this.firstChild.value = v }
-    disconnectedCallback(){ }
-}
-
-window.customElements.define( 'input-text', InputTextElement );
-export default InputTextElement;
\ No newline at end of file
diff --git a/src/location-element.js b/src/location-element.js
index 23a77ef..4ba02c8 100644
--- a/src/location-element.js
+++ b/src/location-element.js
@@ -1,23 +1,43 @@
-const     attr = (el, attr)=> el.getAttribute(attr);
+const attr = ( el, attr )=> el.getAttribute( attr );
+
+
+let originalHistory;
+
+function ensureTrackLocationChange()
+{   if( originalHistory )
+        return;
+    originalHistory = {};
+    'back,forward,go,pushState,replaceState'.split(',').forEach( k =>
+    {
+        originalHistory[ k ] = history[ k ];
+        history[ k ] = function(...rest )
+        {
+            originalHistory[k].apply( history, rest );
+            window.dispatchEvent( new CustomEvent('dce-location',{detail:{ k }}) );
+        }
+    });
+}
 
 export class LocationElement extends HTMLElement
 {
     static observedAttributes=
-            [   'value' // populated from localStorage, if defined initially, sets the value in storage
+            [   'value' // populated from url
             ,   'slice'
-            ,   'key'
+            ,   'href'  // url to be parsed. When omitted window.location is used.
             ,   'type' // `text|json`, defaults to text, other types are compatible with INPUT field
-            ,   'live' // monitors localStorage change
+            ,   'live' // monitors history change, applicable only when href is omitted.
             ];
 
     constructor()
     {
         super();
         const      state = {}
-        ,       listener = e=> propagateSlice(e)
+        ,       listener = e => setTimeout( propagateSlice,1 )
         , propagateSlice = ()=>
-        {   const urlStr = attr(this,'src')
-            const url = urlStr? new URL(urlStr) : window.location
+        {   const urlStr = attr(this,'href')
+            if(!urlStr)
+                ensureTrackLocationChange();
+            const url = urlStr? new URL(urlStr, window.location) : window.location;
 
             const params= {}
             const search = new URLSearchParams(url.search);
@@ -36,27 +56,33 @@ export class LocationElement extends HTMLElement
         {
             if( !state.listener && this.hasAttribute('live') )
             {   state.listener = 1;
-                window.addEventListener( 'popstate'  , listener );
-                window.addEventListener( 'hashchange', listener );
+                window.navigation?.addEventListener("navigate", listener );
+                window.addEventListener( 'popstate'      , listener );
+                window.addEventListener( 'hashchange'    , listener );
+                window.addEventListener( 'dce-location'  , listener );
             }
             propagateSlice();
             return s || {}
         }
         this._destroy = ()=>
         {
-            if( !state.listener )
-                return;
-            if(state.listener)
-            {   window.removeEventListener('popstate'  , listener);
-                window.removeEventListener('hashchange', listener);
-            }
+            window.removeEventListener('popstate'    , listener);
+            window.removeEventListener('hashchange'  , listener);
+            window.removeEventListener('dce-location', listener);
             delete state.listener;
         };
 
     }
+    attributeChangedCallback(name, oldValue, newValue)
+    {
+        if('href'!== name)
+            return;
+        this.sliceInit && this.sliceInit();
+    }
+
     connectedCallback(){ this.sliceInit() }
     disconnectedCallback(){ this._destroy() }
 }
 
 window.customElements.define( 'location-element', LocationElement );
-export default LocationElement;
\ No newline at end of file
+export default LocationElement;
diff --git a/stories/css.stories.ts0 b/stories/css.stories.ts0
new file mode 100644
index 0000000..f3f06f3
--- /dev/null
+++ b/stories/css.stories.ts0
@@ -0,0 +1,114 @@
+import type {Meta, StoryObj} from "@storybook/web-components";
+import {within, expect} from "@storybook/test";
+
+import '../src/custom-element.js';
+
+type CssProps = { title: string; tag: string; style: string; slot: string; payload: string };
+const defs = {title: '', tag: '', style: '', slot: '', payload: ''};
+
+type Story = StoryObj<CssProps>;
+
+function Template({title, tag='', style, slot, payload=''}: CssProps) {
+    return `
+        <fieldset>
+            <legend>${ title }</legend>
+            <custom-element ${ tag ? `tag="${tag}"` : ''} >
+                <template>
+                    <style>
+                        ${ style }
+                    </style>
+                    <u><slot>${ slot }</slot></u>
+                </template>
+            </custom-element>
+            ${ payload }
+        </fieldset>
+  `;
+}
+
+const meta = {
+    title: 'Css',
+    render: (args: CssProps) => Template(args),
+    renderPlay: async function renderPlay(story: StoryObj) {
+        document.body.innerHTML = meta.render({...defs, ...story.args});
+        await new Promise(resolve => setTimeout(async () => {
+            // @ts-ignore
+            await story.play({canvasElement: document.body.firstElementChild as HTMLElement});
+            resolve(0);
+    }, 0));
+}
+} satisfies Meta<CssProps>| { renderPlay: (s:StoryObj)=>void } ;
+
+export default meta;
+
+const GREEN = `<b style="color:green">green</b>`
+const RED = `<i style="color:red">red</i>`
+
+export const StyleDoesNotLeak: Story =
+{   args:
+    {   title: `The default color should stay on this label, the message inside should be ${GREEN}`
+    ,   style: `color:green`
+    ,    slot: 'text has to be green'
+    , payload: '<u>no tags</u>'
+    }
+,   play: async ({canvasElement}) =>
+    {   const canvas = within(canvasElement);
+        const el = await canvas.findByText('text has to be green');
+        const st = getComputedStyle(el);
+        const color = st.getPropertyValue('color');
+        // @ts-ignore
+        expect(color).to.equal('rgb(0, 128, 0)')
+    },
+};
+
+export const StyleIn2Instances: Story =
+{   args:
+    {   title:  `The default color should apply ${GREEN} in all instances`
+    ,   style:  `color:green`
+    ,    slot:  'text has to be green'
+    ,     tag:  'dce-2'
+    , payload:  `<u>2 instances:</u> <dce-2 id="dce21"></dce-2> * <dce-2 id="dce22"></dce-2>`
+    }
+,   play: async ({canvasElement}) =>
+    {
+        await within(canvasElement).findByText('2 instances:');
+        const color = ( css:string )=>
+        {   const el = canvasElement.querySelector(css);
+            const st =  getComputedStyle( el! );
+            return  st.getPropertyValue('color');
+        };
+        expect( color('legend'  )        ).to.not.equal(color('b'));
+        expect( color('legend'  )        ).to.not.equal(color('b'));
+        expect( color('#dce21 u')        ).to    .equal(color('b'));
+        expect( color('#dce22 u')        ).to    .equal(color('b'));
+    },
+};
+
+// noinspection CssInvalidPseudoSelector
+export const OverrideInPayload: Story =
+{   args:
+    {   title:  `${GREEN} in instance style can be overridden in payload as ${RED} in 1st instance`
+    ,   style:  `color:green`
+    ,    slot:  'is green'
+    ,     tag:  'dce-3'
+    , payload:  `  <u>should be</u> ${RED}:<dce-3 id="dce32">
+                        <template>
+                            <style> color:red; </style>
+                            <u>red</u>
+                        </template>
+                    </dce-3> <br/>
+                     should be ${GREEN}: <dce-3 id="dce31">green</dce-3>   `
+    }
+,   play: async ({canvasElement}) =>
+    {
+        await within(canvasElement).findByText('should be');
+
+        const color = ( css:string )=>
+        {   const el = canvasElement.querySelector(css);
+            const st =  getComputedStyle( el! );
+            return  st.getPropertyValue('color');
+        };
+        expect( color('legend'  )        ).to.not.equal(color('b'));
+        expect( color('#dce31 u')        ).to    .equal(color('b'));
+        expect( color('#dce32 u')        ).to    .equal(color('i'));
+    },
+};
diff --git a/stories/local-storage.stories.js b/stories/local-storage.stories.js
index ae3a54d..1e91cfb 100644
--- a/stories/local-storage.stories.js
+++ b/stories/local-storage.stories.js
@@ -21,7 +21,7 @@ function Template( { title, tag , body, key, value, slice, type, live } )
     localStorage.setItem(key,value);
     return `
         <fieldset>
-            <legend>${ title }. <code>localStorage[${key}]="${localStorage[key]}</code>"</legend>
+            <legend><b>${ title }</b>. <code>localStorage[${key}]="${localStorage[key]}</code>"</legend>
             <custom-element
                 tag="${ tag }"
                 hidden