Fix for #12: Ensure original named slot tags are retained when not us…

…ing shadow root. (#13)

* Fix for #12: Ensure original named slot tags are retained when not using shadow root. Only "unwrap" (i.e. from the host tag) when in the default slot. Including ignore of .idea/ files (JetBrains) and enforcing repo-specific whitespace rules (differs from my specific IDE settings)

* Removing yarn.lock (added accidentally)

* Fixing typo in .editorconfig

.editorconfig

@@ -0,0 +1,7 @@
+[*]
+charset = utf-8
+end_of_line = lf
+
+[{*.js,*.json}]
+indent_style = space
+indent_size = 2

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .DS_Store
-coverage
+coverage
+.idea/

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/tag.test.js

@@ -42,21 +42,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).to.equal('<test-tag><h1>Main H1</h1> <div class="content">Main Default <div>HERE</div></div></test-tag>')
+    expect(el.innerHTML).to.equal('<test-tag><h1>Main H1</h1> <div class="content">Main Default <div><div slot="inner">HERE</div></div></div></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).to.equal('<test-tag><h1>Main H1</h1> <div class="content">BOOM! <div>HERE</div></div></test-tag>')
+    expect(el.innerHTML).to.equal('<test-tag><h1>Main H1</h1> <div class="content">BOOM! <div><div slot="inner">HERE</div></div></div></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).to.equal('<test-tag><h1>Main H1</h1> <div class="content"><h2>Nested</h2> <div>HERE</div></div></test-tag>')
+    expect(el.innerHTML).to.equal('<test-tag><h1>Main H1</h1> <div class="content"><h2>Nested</h2> <div><div slot="inner">HERE</div></div></div></test-tag>')
   })
 
   it("Unknown slot gets ignored", () => {
@@ -133,6 +133,6 @@ describe("Component Wrapper shadow true", () => {
     shadowhtml = document.querySelector('test-shad').shadowRoot.innerHTML
     expect(shadowhtml).to.equal('<div><h1>Main H1</h1> <div class="content"><slot></slot> <div>Inner Default</div></div></div>')
   })
-  
+
 })