Fix for #12 (take 2): Ensure original named slot tags are retained when not using shadow root. Take 2 required to account for new unit testing framework (Vitest) from PR #13.

Author: patricknelson

index.js

@@ -16,12 +16,12 @@ function createSlots(slots) {
       return {
         c: noop,
         m: function mount(target, anchor) {
-          insert(target, element.cloneNode(true), anchor); 
+          insert(target, element.cloneNode(true), anchor);
         },
-        d: function destroy(detaching) { 
-          if (detaching && element.innerHTML){ 
+        d: function destroy(detaching) {
+          if (detaching && element.innerHTML){
             detach(element);
-          } 
+          }
         },
         l: noop,
       };
@@ -42,7 +42,7 @@ export default function(opts){
         let link = document.createElement('link');
         link.setAttribute("href",opts.href)
         link.setAttribute("rel","stylesheet")
-        root.appendChild(link);    
+        root.appendChild(link);
       }
       if(opts.shadow){
         this._root = document.createElement('div')
@@ -82,7 +82,7 @@ export default function(opts){
       }
       try{ this.elem.$destroy()}catch(err){} // detroy svelte element when removed from dom
     }
-    
+
     unwrap(from){
       let node = document.createDocumentFragment();
       while (from.firstChild) {
@@ -95,7 +95,7 @@ export default function(opts){
       const namedSlots = this.querySelectorAll('[slot]')
       let slots = {}
       namedSlots.forEach(n=>{
-        slots[n.slot] = this.unwrap(n)
+        slots[n.slot] = n
         this.removeChild(n)
       })
       if(this.innerHTML.length){
@@ -144,6 +144,6 @@ export default function(opts){
         this.elem.$set({[name]:newValue})
       }
     }
-  }  
+  }
   window.customElements.define(opts.tagname, Wrapper);
 }

tests/TestTag.test.js

@@ -35,21 +35,21 @@ describe('Component Wrapper shadow false', () => {
     el = document.createElement('div')
     el.innerHTML = `<test-tag><div slot="inner">HERE</div></test-tag>`
     document.body.appendChild(el)
-    expect(el.innerHTML).toBe('<test-tag><h1>Main H1</h1> <div class="content">Main Default <div>HERE</div></div><!--<TestTag>--></test-tag>')
+    expect(el.innerHTML).toBe('<test-tag><h1>Main H1</h1> <div class="content">Main Default <div><div slot="inner">HERE</div></div></div><!--<TestTag>--></test-tag>')
   })
 
   it('both slots', () => {
     el = document.createElement('div')
     el.innerHTML = `<test-tag>BOOM!<div slot="inner">HERE</div></test-tag>`
     document.body.appendChild(el)
-    expect(el.innerHTML).toBe('<test-tag><h1>Main H1</h1> <div class="content">BOOM! <div>HERE</div></div><!--<TestTag>--></test-tag>')
+    expect(el.innerHTML).toBe('<test-tag><h1>Main H1</h1> <div class="content">BOOM! <div><div slot="inner">HERE</div></div></div><!--<TestTag>--></test-tag>')
   })
 
   it('nested tags', () => {
     el = document.createElement('div')
     el.innerHTML = `<test-tag><h2>Nested</h2><div slot="inner">HERE</div></test-tag>`
     document.body.appendChild(el)
-    expect(el.innerHTML).toBe('<test-tag><h1>Main H1</h1> <div class="content"><h2>Nested</h2> <div>HERE</div></div><!--<TestTag>--></test-tag>')
+    expect(el.innerHTML).toBe('<test-tag><h1>Main H1</h1> <div class="content"><h2>Nested</h2> <div><div slot="inner">HERE</div></div></div><!--<TestTag>--></test-tag>')
   })
 
   it('Unknown slot gets ignored', () => {