@epa-wg/custom-element-dist 0.0.21 → 0.0.22

package/coverage/src/custom-element/http-request.js.html

@@ -182,13 +182,13 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">5x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">24x</span>
-<span class="cline-any cline-yes">24x</span>
+<span class="cline-any cline-yes">35x</span>
+<span class="cline-any cline-yes">35x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">28x</span>
-<span class="cline-any cline-yes">16x</span>
+<span class="cline-any cline-yes">39x</span>
+<span class="cline-any cline-yes">27x</span>
 <span class="cline-any cline-yes">12x</span>
 <span class="cline-any cline-yes">12x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -223,12 +223,12 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">86x</span>
-<span class="cline-any cline-yes">43x</span>
+<span class="cline-any cline-yes">130x</span>
+<span class="cline-any cline-yes">65x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">31x</span>
-<span class="cline-any cline-yes">31x</span>
-<span class="cline-any cline-yes">23x</span>
+<span class="cline-any cline-yes">42x</span>
+<span class="cline-any cline-yes">42x</span>
+<span class="cline-any cline-yes">34x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-yes">8x</span>
@@ -337,7 +337,7 @@ export default HttpRequestElement;
             <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-05-13T06:00:45.582Z
+                at 2024-06-25T03:55:40.964Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/custom-element/index.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">95.46% </span>
+                <span class="strong">38.61% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>632/662</span>
+                <span class='fraction'>690/1787</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">87.42% </span>
+                <span class="strong">33.54% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>278/318</span>
+                <span class='fraction'>317/945</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">92.59% </span>
+                <span class="strong">40.5% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>150/162</span>
+                <span class='fraction'>160/395</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">97.02% </span>
+                <span class="strong">38.88% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>555/572</span>
+                <span class='fraction'>609/1566</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line high'></div>
+    <div class='status-line low'></div>
     <div class="pad1">
 <table class="coverage-summary">
 <thead>
@@ -80,17 +80,47 @@
 </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="93.95" class="pic high">
-	<div class="chart"><div class="cover-fill" style="width: 93%"></div><div class="cover-empty" style="width: 7%"></div></div>
+	<td data-value="97.21" class="pic high">
+	<div class="chart"><div class="cover-fill" style="width: 97%"></div><div class="cover-empty" style="width: 3%"></div></div>
 	</td>
-	<td data-value="93.95" class="pct high">93.95%</td>
-	<td data-value="496" class="abs high">466/496</td>
-	<td data-value="84.67" class="pct high">84.67%</td>
-	<td data-value="261" class="abs high">221/261</td>
+	<td data-value="97.21" class="pct high">97.21%</td>
+	<td data-value="539" class="abs high">524/539</td>
 	<td data-value="89.65" class="pct high">89.65%</td>
-	<td data-value="116" class="abs high">104/116</td>
-	<td data-value="96" class="pct high">96%</td>
-	<td data-value="426" class="abs high">409/426</td>
+	<td data-value="290" class="abs high">260/290</td>
+	<td data-value="97.43" class="pct high">97.43%</td>
+	<td data-value="117" class="abs high">114/117</td>
+	<td data-value="97.67" class="pct high">97.67%</td>
+	<td data-value="474" class="abs high">463/474</td>
+	</tr>
+
+<tr>
+	<td class="file low" data-value="custom-element1-1.js"><a href="custom-element1-1.js.html">custom-element1-1.js</a></td>
+	<td data-value="0" class="pic low">
+	<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
+	</td>
+	<td data-value="0" class="pct low">0%</td>
+	<td data-value="541" class="abs low">0/541</td>
+	<td data-value="0" class="pct low">0%</td>
+	<td data-value="299" class="abs low">0/299</td>
+	<td data-value="0" class="pct low">0%</td>
+	<td data-value="116" class="abs low">0/116</td>
+	<td data-value="0" class="pct low">0%</td>
+	<td data-value="473" class="abs low">0/473</td>
+	</tr>
+
+<tr>
+	<td class="file low" data-value="custom-element1.js"><a href="custom-element1.js.html">custom-element1.js</a></td>
+	<td data-value="0" class="pic low">
+	<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
+	</td>
+	<td data-value="0" class="pct low">0%</td>
+	<td data-value="541" class="abs low">0/541</td>
+	<td data-value="0" class="pct low">0%</td>
+	<td data-value="299" class="abs low">0/299</td>
+	<td data-value="0" class="pct low">0%</td>
+	<td data-value="116" class="abs low">0/116</td>
+	<td data-value="0" class="pct low">0%</td>
+	<td data-value="473" class="abs low">0/473</td>
 	</tr>
 
 <tr>
@@ -146,7 +176,7 @@
             <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-05-13T06:00:45.582Z
+                at 2024-06-25T03:55:40.964Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/custom-element/local-storage.js.html

@@ -178,13 +178,13 @@
 <span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">96x</span>
-<span class="cline-any cline-yes">96x</span>
+<span class="cline-any cline-yes">98x</span>
+<span class="cline-any cline-yes">98x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -208,7 +208,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">119x</span>
 <span class="cline-any cline-yes">12x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -331,7 +331,7 @@ export default LocalStorageElement;
             <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-05-13T06:00:45.582Z
+                at 2024-06-25T03:55:40.964Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/custom-element/location-element.js.html

@@ -328,7 +328,7 @@ export default LocationElement;</pre></td></tr></table></pre>
             <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-05-13T06:00:45.582Z
+                at 2024-06-25T03:55:40.964Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/index.html

@@ -101,7 +101,7 @@
             <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-05-13T06:00:45.582Z
+                at 2024-06-25T03:55:40.964Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/src/mocks/handlers.ts.html

@@ -157,7 +157,7 @@ export const handlers =
             <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-05-13T06:00:45.582Z
+                at 2024-06-25T03:55:40.964Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/mocks/index.html

@@ -101,7 +101,7 @@
             <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-05-13T06:00:45.582Z
+                at 2024-06-25T03:55:40.964Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/stories/{attributes.stories.ts.html → attributes.test.stories.ts.html}

@@ -3,7 +3,7 @@
 <html lang="en">
 
 <head>
-    <title>Code coverage report for src/stories/attributes.stories.ts</title>
+    <title>Code coverage report for src/stories/attributes.test.stories.ts</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="../../prettify.css" />
     <link rel="stylesheet" href="../../base.css" />
@@ -19,34 +19,34 @@
 <body>
 <div class='wrapper'>
     <div class='pad1'>
-        <h1><a href="../../index.html">All files</a> / <a href="index.html">src/stories</a> attributes.stories.ts</h1>
+        <h1><a href="../../index.html">All files</a> / <a href="index.html">src/stories</a> attributes.test.stories.ts</h1>
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>41/41</span>
+                <span class='fraction'>47/47</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/0</span>
+                <span class='fraction'>1/1</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>9/9</span>
+                <span class='fraction'>10/10</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>37/37</span>
+                <span class='fraction'>42/42</span>
             </div>
         
             
@@ -195,7 +195,20 @@
 <a name='L130'></a><a href='#L130'>130</a>
 <a name='L131'></a><a href='#L131'>131</a>
 <a name='L132'></a><a href='#L132'>132</a>
-<a name='L133'></a><a href='#L133'>133</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L133'></a><a href='#L133'>133</a>
+<a name='L134'></a><a href='#L134'>134</a>
+<a name='L135'></a><a href='#L135'>135</a>
+<a name='L136'></a><a href='#L136'>136</a>
+<a name='L137'></a><a href='#L137'>137</a>
+<a name='L138'></a><a href='#L138'>138</a>
+<a name='L139'></a><a href='#L139'>139</a>
+<a name='L140'></a><a href='#L140'>140</a>
+<a name='L141'></a><a href='#L141'>141</a>
+<a name='L142'></a><a href='#L142'>142</a>
+<a name='L143'></a><a href='#L143'>143</a>
+<a name='L144'></a><a href='#L144'>144</a>
+<a name='L145'></a><a href='#L145'>145</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -327,12 +340,24 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&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>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">// noinspection DuplicatedCode
 &nbsp;
-import type { StoryObj }             from '@storybook/web-components';
+import type { StoryObj }                        from '@storybook/web-components';
 import {expect, getByTestId, within, userEvent} from '@storybook/test';
 &nbsp;
 import '../custom-element/custom-element.js';
+import {OverrideInPayload, StyleDoesNotLeak, StyleIn2Instances} from './css.test.stories';
 &nbsp;
 type TProps = { title: string; body:string};
 &nbsp;
@@ -365,8 +390,8 @@ export const AttributeDefaults:Story  =
             &lt;attribute name="p1"&gt;default_P1                &lt;/attribute&gt;
             &lt;attribute name="p2" select="'always_p2'"      &gt;&lt;/attribute&gt;
             &lt;attribute name="p3" select="//p3 ?? 'def_P3' "&gt;&lt;/attribute&gt;
-            p1: &lt;code data-testid="p1"&gt;{$p1}&lt;/code&gt; &lt;br/&gt; 
-            p2: &lt;code data-testid="p2"&gt;{$p2}&lt;/code&gt; &lt;br/&gt; 
+            p1: &lt;code data-testid="p1"&gt;{$p1}&lt;/code&gt; &lt;br/&gt;
+            p2: &lt;code data-testid="p2"&gt;{$p2}&lt;/code&gt; &lt;br/&gt;
             p3: &lt;code data-testid="p3"&gt;{$p3}&lt;/code&gt;
         &lt;/template&gt;
     &lt;/custom-element&gt;
@@ -393,8 +418,8 @@ export const AttributesRuntimeChange:Story  =
             &lt;attribute name="p1"&gt;default_P1                &lt;/attribute&gt;
             &lt;attribute name="p2" select="'always_p2'"      &gt;&lt;/attribute&gt;
             &lt;attribute name="p3" select="//p3 ?? 'def_P3' "&gt;&lt;/attribute&gt;
-            p1: &lt;code data-testid="p1"&gt;{$p1}&lt;/code&gt; &lt;br/&gt; 
-            p2: &lt;code data-testid="p2"&gt;{$p2}&lt;/code&gt; &lt;br/&gt; 
+            p1: &lt;code data-testid="p1"&gt;{$p1}&lt;/code&gt; &lt;br/&gt;
+            p2: &lt;code data-testid="p2"&gt;{$p2}&lt;/code&gt; &lt;br/&gt;
             p3: &lt;code data-testid="p3"&gt;{$p3}&lt;/code&gt;
         &lt;/template&gt;
     &lt;/custom-element&gt;
@@ -439,8 +464,8 @@ export const InstanceAttributes:Story  =
             &lt;attribute name="p1"&gt;default_P1                &lt;/attribute&gt;
             &lt;attribute name="p2" select="'always_p2'"      &gt;&lt;/attribute&gt;
             &lt;attribute name="p3" select="//p3 ?? 'def_P3' "&gt;&lt;/attribute&gt;
-            p1: &lt;code data-testid="p1"&gt;{$p1}&lt;/code&gt; &lt;br/&gt; 
-            p2: &lt;code data-testid="p2"&gt;{$p2}&lt;/code&gt; &lt;br/&gt; 
+            p1: &lt;code data-testid="p1"&gt;{$p1}&lt;/code&gt; &lt;br/&gt;
+            p2: &lt;code data-testid="p2"&gt;{$p2}&lt;/code&gt; &lt;br/&gt;
             p3: &lt;code data-testid="p3"&gt;{$p3}&lt;/code&gt;
         &lt;/template&gt;
     &lt;/custom-element&gt;
@@ -459,6 +484,17 @@ export const InstanceAttributes:Story  =
     },
 };
 &nbsp;
+&nbsp;
+&nbsp;
+const TestStories = { AttributeDefaults, AttributesRuntimeChange, InstanceAttributes };
+&nbsp;
+/* istanbul ignore else -- @preserve */
+if( 'test' === import.meta.env.MODE )
+{
+    const {playStories} = await  import('./renderPlay');
+    const {describe} = await import('vitest')
+    describe('slots', () =&gt; playStories( TestStories, meta ) );
+}
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -466,7 +502,7 @@ export const InstanceAttributes:Story  =
             <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-05-13T06:00:45.582Z
+                at 2024-06-25T03:55:40.964Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/stories/{css.stories.ts.html → css.test.stories.ts.html}

@@ -3,7 +3,7 @@
 <html lang="en">
 
 <head>
-    <title>Code coverage report for src/stories/css.stories.ts</title>
+    <title>Code coverage report for src/stories/css.test.stories.ts</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="../../prettify.css" />
     <link rel="stylesheet" href="../../base.css" />
@@ -19,34 +19,34 @@
 <body>
 <div class='wrapper'>
     <div class='pad1'>
-        <h1><a href="../../index.html">All files</a> / <a href="index.html">src/stories</a> css.stories.ts</h1>
+        <h1><a href="../../index.html">All files</a> / <a href="index.html">src/stories</a> css.test.stories.ts</h1>
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>31/31</span>
+                <span class='fraction'>43/43</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>2/2</span>
+                <span class='fraction'>3/3</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>6/6</span>
+                <span class='fraction'>7/7</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>31/31</span>
+                <span class='fraction'>42/42</span>
             </div>
         
             
@@ -167,7 +167,28 @@
 <a name='L102'></a><a href='#L102'>102</a>
 <a name='L103'></a><a href='#L103'>103</a>
 <a name='L104'></a><a href='#L104'>104</a>
-<a name='L105'></a><a href='#L105'>105</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L105'></a><a href='#L105'>105</a>
+<a name='L106'></a><a href='#L106'>106</a>
+<a name='L107'></a><a href='#L107'>107</a>
+<a name='L108'></a><a href='#L108'>108</a>
+<a name='L109'></a><a href='#L109'>109</a>
+<a name='L110'></a><a href='#L110'>110</a>
+<a name='L111'></a><a href='#L111'>111</a>
+<a name='L112'></a><a href='#L112'>112</a>
+<a name='L113'></a><a href='#L113'>113</a>
+<a name='L114'></a><a href='#L114'>114</a>
+<a name='L115'></a><a href='#L115'>115</a>
+<a name='L116'></a><a href='#L116'>116</a>
+<a name='L117'></a><a href='#L117'>117</a>
+<a name='L118'></a><a href='#L118'>118</a>
+<a name='L119'></a><a href='#L119'>119</a>
+<a name='L120'></a><a href='#L120'>120</a>
+<a name='L121'></a><a href='#L121'>121</a>
+<a name='L122'></a><a href='#L122'>122</a>
+<a name='L123'></a><a href='#L123'>123</a>
+<a name='L124'></a><a href='#L124'>124</a>
+<a name='L125'></a><a href='#L125'>125</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -216,6 +237,12 @@
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&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>
+<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-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -259,6 +286,8 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
@@ -271,10 +300,22 @@
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import type {StoryObj} from "@storybook/web-components";
-import {within, expect} from "@storybook/test";
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&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>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import type {StoryObj}                         from "@storybook/web-components";
+import {within, expect}                        from "@storybook/test";
 &nbsp;
 import '../custom-element/custom-element.js';
+import {CharsCountInTextarea, WordCountOnType} from './dom-merge.test.stories';
 &nbsp;
 type CssProps = { title: string; tag: string; style: string; slot: string; payload: string };
 const defs = {title: '', tag: '', style: '', slot: '', payload: ''};
@@ -320,6 +361,12 @@ export const StyleDoesNotLeak: Story =
         const color = st.getPropertyValue('color');
         // @ts-ignore
         expect(color).to.equal('rgb(0, 128, 0)')
+        await expect( el.closest('custom-element')).toBeInTheDocument();
+        const dce = el.closest('custom-element');
+        await expect( dce.xsltString).toContain('&lt;xsl:stylesheet');
+        await expect( dce.dce.localName).toEqual('custom-element');
+        await expect( dce.dce.xsltString).toEqual(dce.xsltString);
+        await expect( dce.dce.xslt.documentElement.tagName ).toEqual('xsl:stylesheet');
     },
 };
 &nbsp;
@@ -353,13 +400,15 @@ export const OverrideInPayload: Story =
     ,   style:  `color:green`
     ,    slot:  'is green'
     ,     tag:  'dce-3'
-    , payload:  `  &lt;u&gt;should be&lt;/u&gt; ${RED}:&lt;dce-3 id="dce32"&gt;
-                        &lt;template&gt;
-                            &lt;style&gt; color:red; &lt;/style&gt;
-                            &lt;u&gt;red&lt;/u&gt;
-                        &lt;/template&gt;
-                    &lt;/dce-3&gt; &lt;br/&gt;
-                     should be ${GREEN}: &lt;dce-3 id="dce31"&gt;green&lt;/dce-3&gt;   `
+    , payload:  `&lt;u&gt;should be&lt;/u&gt; ${RED}:
+                &lt;dce-3 id="dce32"&gt;
+                    &lt;template&gt;
+                        &lt;style&gt; color:red; &lt;/style&gt;
+                        &lt;u&gt;red&lt;/u&gt;
+                    &lt;/template&gt;
+                &lt;/dce-3&gt; &lt;br/&gt;
+                should be ${GREEN}: 
+                &lt;dce-3 id="dce31"&gt;green&lt;/dce-3&gt;   `
     }
 ,   play: async ({canvasElement}) =&gt;
     {
@@ -375,6 +424,17 @@ export const OverrideInPayload: Story =
         expect( color('#dce32 u')        ).to    .equal(color('i'));
     },
 };
+&nbsp;
+&nbsp;
+const TestStories = { StyleDoesNotLeak, StyleIn2Instances, OverrideInPayload };
+&nbsp;
+/* istanbul ignore else -- @preserve */
+if( 'test' === import.meta.env.MODE )
+{
+    const {playStories} = await  import('./renderPlay');
+    const {describe} = await import('vitest')
+    describe('slots', () =&gt; playStories( TestStories, meta ) );
+}
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -382,7 +442,7 @@ export const OverrideInPayload: Story =
             <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-05-13T06:00:45.582Z
+                at 2024-06-25T03:55:40.964Z
             </div>
         <script src="../../prettify.js"></script>
         <script>