1.1.7

Author: sashafirsov

README.md

@@ -6,7 +6,7 @@ Collection API inherits the element API and Array.
 [![NPM version][npm-image]][npm-url] [![coverage][coverage-image]][coverage-url]
 
 ## Live demo
-https://unpkg.com/[email protected].5/dist/demo.html
+https://unpkg.com/[email protected].7/dist/demo.html
 
 # [CssChain](https://github.com/sashafirsov/css-chain/blob/main/CssChain.js)
 ## html elements methods
@@ -132,7 +132,7 @@ If you customize the configuration a lot, you can consider moving them to indivi
 
 [npm-image]:      https://img.shields.io/npm/v/css-chain.svg
 [npm-url]:        https://npmjs.org/package/css-chain-test
-[coverage-image]: https://unpkg.com/[email protected].5/coverage/coverage.svg
-[coverage-url]:   https://unpkg.com/[email protected].5/coverage/lcov-report/index.html
-[PokeApi-explorer-image]: https://unpkg.com/[email protected].5/src/PokeApi-Explorer.png
-[PokeApi-explorer-url]: https://unpkg.com/[email protected].5/dist/PokeApi-Explorer.html
+[coverage-image]: https://unpkg.com/[email protected].7/coverage/coverage.svg
+[coverage-url]:   https://unpkg.com/[email protected].7/coverage/lcov-report/index.html
+[PokeApi-explorer-image]: https://unpkg.com/[email protected].7/src/PokeApi-Explorer.png
+[PokeApi-explorer-url]: https://unpkg.com/[email protected].7/dist/PokeApi-Explorer.html

coverage/lcov-report/ApiChain.js.html

@@ -140,16 +140,16 @@ <h1><a href="index.html">All files</a> ApiChain.js</h1>
 <span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-yes">8x</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">6x</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>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</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>
 <span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-yes">8x</span>
@@ -289,7 +289,7 @@ <h1><a href="index.html">All files</a> ApiChain.js</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Thu May 12 2022 21:31:35 GMT-0700 (Pacific Daylight Time)
+                at Sat Jun 04 2022 00:17:19 GMT-0700 (Pacific Daylight Time)
             </div>
         </div>
         <script src="prettify.js"></script>

coverage/lcov-report/CssChain.js.html

@@ -25,28 +25,28 @@ <h1><a href="index.html">All files</a> CssChain.js</h1>
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>257/257</span>
+                <span class='fraction'>292/292</span>
             </div>
 
 
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>168/168</span>
+                <span class='fraction'>177/177</span>
             </div>
 
 
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>64/64</span>
+                <span class='fraction'>68/68</span>
             </div>
 
 
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>257/257</span>
+                <span class='fraction'>292/292</span>
             </div>
 
 
@@ -314,7 +314,42 @@ <h1><a href="index.html">All files</a> CssChain.js</h1>
 <a name='L255'></a><a href='#L255'>255</a>
 <a name='L256'></a><a href='#L256'>256</a>
 <a name='L257'></a><a href='#L257'>257</a>
-<a name='L258'></a><a href='#L258'>258</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">7x</span>
+<a name='L258'></a><a href='#L258'>258</a>
+<a name='L259'></a><a href='#L259'>259</a>
+<a name='L260'></a><a href='#L260'>260</a>
+<a name='L261'></a><a href='#L261'>261</a>
+<a name='L262'></a><a href='#L262'>262</a>
+<a name='L263'></a><a href='#L263'>263</a>
+<a name='L264'></a><a href='#L264'>264</a>
+<a name='L265'></a><a href='#L265'>265</a>
+<a name='L266'></a><a href='#L266'>266</a>
+<a name='L267'></a><a href='#L267'>267</a>
+<a name='L268'></a><a href='#L268'>268</a>
+<a name='L269'></a><a href='#L269'>269</a>
+<a name='L270'></a><a href='#L270'>270</a>
+<a name='L271'></a><a href='#L271'>271</a>
+<a name='L272'></a><a href='#L272'>272</a>
+<a name='L273'></a><a href='#L273'>273</a>
+<a name='L274'></a><a href='#L274'>274</a>
+<a name='L275'></a><a href='#L275'>275</a>
+<a name='L276'></a><a href='#L276'>276</a>
+<a name='L277'></a><a href='#L277'>277</a>
+<a name='L278'></a><a href='#L278'>278</a>
+<a name='L279'></a><a href='#L279'>279</a>
+<a name='L280'></a><a href='#L280'>280</a>
+<a name='L281'></a><a href='#L281'>281</a>
+<a name='L282'></a><a href='#L282'>282</a>
+<a name='L283'></a><a href='#L283'>283</a>
+<a name='L284'></a><a href='#L284'>284</a>
+<a name='L285'></a><a href='#L285'>285</a>
+<a name='L286'></a><a href='#L286'>286</a>
+<a name='L287'></a><a href='#L287'>287</a>
+<a name='L288'></a><a href='#L288'>288</a>
+<a name='L289'></a><a href='#L289'>289</a>
+<a name='L290'></a><a href='#L290'>290</a>
+<a name='L291'></a><a href='#L291'>291</a>
+<a name='L292'></a><a href='#L292'>292</a>
+<a name='L293'></a><a href='#L293'>293</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
@@ -333,8 +368,8 @@ <h1><a href="index.html">All files</a> CssChain.js</h1>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
@@ -358,16 +393,21 @@ <h1><a href="index.html">All files</a> CssChain.js</h1>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
@@ -387,6 +427,15 @@ <h1><a href="index.html">All files</a> CssChain.js</h1>
 <span class="cline-any cline-yes">5x</span>
 <span class="cline-any cline-yes">5x</span>
 <span class="cline-any cline-yes">7x</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-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
@@ -420,19 +469,19 @@ <h1><a href="index.html">All files</a> CssChain.js</h1>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">4x</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>
-<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">4x</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>
-<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">4x</span>
@@ -464,14 +513,35 @@ <h1><a href="index.html">All files</a> CssChain.js</h1>
 <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-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-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-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">7x</span>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
@@ -499,27 +569,27 @@ <h1><a href="index.html">All files</a> CssChain.js</h1>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</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>
-<span class="cline-any cline-yes">2x</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>
-<span class="cline-any cline-yes">2x</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>
-<span class="cline-any cline-yes">2x</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>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</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">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-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-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">7x</span>
 <span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">7x</span>
@@ -615,8 +685,13 @@ <h1><a href="index.html">All files</a> CssChain.js</h1>
     ).join('');
 &nbsp;
 export const html2NodeArr = html =&gt;
-{   const n = createEl('div');
-    n.innerHTML = html;
+{   let n = createEl('div');
+    if( isNode(html) )
+        n.append( html.cloneNode(true) );
+    else if( isArr(html) )
+        each(html, e=&gt; each( html2NodeArr(e), i=&gt; n.appendChild(i)) )
+    else
+        n.innerHTML = html;
     const wrapIfText = e=&gt;{
         if( e.nodeType !== 3 )
             return e;
@@ -644,6 +719,15 @@ <h1><a href="index.html">All files</a> CssChain.js</h1>
         : append(val);
 }
 export const setNodeHtml = ( n, val ) =&gt; { clear(n); addNodeHtml(n,val) };
+function assignedNodesLight(f)
+{   if(f?.flatten)
+    {   const r = [];
+        const flatten = n=&gt; n.CssChainAssignedNodes ? each(n.CssChainAssignedNodes,flatten): r.push(n);
+        each(this.CssChainAssignedNodes, flatten );
+        return r;
+    }
+    return this.CssChainAssignedNodes;
+}
 &nbsp;
     class
 CssChainT extends Array
@@ -712,13 +796,34 @@ <h1><a href="index.html">All files</a> CssChain.js</h1>
         {   n = this.$( n );
             n.remove();
         }
-        const c = CssChain( n.content ? n.content.childNodes : n ).clone(this);
+        n = n.cloneNode(true);
+        const content = n.content ? n.content.childNodes : n;
+        const c = CssChain( content );
         c.slots().forEach( s =&gt;
         {   const v = this.children.filter( n=&gt;n.slot===s.name );
-            v.length &amp;&amp; setNodeHtml(s,v)
+            const p = s.parentNode;
+            s.CssChainAssignedNodes = [];
+            s.assignedNodes = s.assignedElements = assignedNodesLight;
+            const insert = (n,r)=&gt;
+            {   const k = p.insertBefore( n, r);
+                n.CssChainAssignedSlot || s.CssChainAssignedNodes.push(n);
+                n.CssChainAssignedSlot = s;
+                return k;
+            };
+            each(v, e=&gt;e.cssChainSlot = s);
+            const injectInSlot = (e,s)=&gt;
+            {   if( e.tagName === 'SLOT' )
+                {   const q = e.parentNode;
+                    const r = insert(e,s);
+                    each( q.querySelectorAll(`[slot="${e.name}"]`), n=&gt; p.insertBefore( n, r) );
+                }else
+                    insert(e,s);
+            }
+            each( v, e=&gt;injectInSlot( e, s) )
+            if( v.length ) s.hidden=true;
         });
-        this.children.remove();
-        this.append(c);
+        this.children.filter(e=&gt;!e.cssChainSlot).remove();
+        this.append( CssChain( html2NodeArr('&lt;light-dom&gt;&lt;/light-dom&gt;') ).append(content) );
         return this;
     }
     get innerText(){ return this.txt() }
@@ -835,7 +940,7 @@ <h1><a href="index.html">All files</a> CssChain.js</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Thu May 12 2022 21:31:35 GMT-0700 (Pacific Daylight Time)
+                at Sat Jun 04 2022 00:17:19 GMT-0700 (Pacific Daylight Time)
             </div>
         </div>
         <script src="prettify.js"></script>

coverage/lcov-report/CssChainElement.js.html

@@ -166,7 +166,7 @@ <h1><a href="index.html">All files</a> CssChainElement.js</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Thu May 12 2022 21:31:35 GMT-0700 (Pacific Daylight Time)
+                at Sat Jun 04 2022 00:17:19 GMT-0700 (Pacific Daylight Time)
             </div>
         </div>
         <script src="prettify.js"></script>

coverage/lcov-report/css-chain-element.js.html

@@ -79,7 +79,7 @@ <h1><a href="index.html">All files</a> css-chain-element.js</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Thu May 12 2022 21:31:35 GMT-0700 (Pacific Daylight Time)
+                at Sat Jun 04 2022 00:17:19 GMT-0700 (Pacific Daylight Time)
             </div>
         </div>
         <script src="prettify.js"></script>