From 9c3e66eb6861753b48cda57c604fde63bbf32e0e Mon Sep 17 00:00:00 2001 From: Patrick Nelson Date: Sat, 3 Jun 2023 03:40:06 -0700 Subject: [PATCH] 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. --- index.js | 16 ++++++++-------- tests/TestTag.test.js | 6 +++--- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/index.js b/index.js index f82cd94..d205389 100644 --- a/index.js +++ b/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); } diff --git a/tests/TestTag.test.js b/tests/TestTag.test.js index 82af723..669c595 100644 --- a/tests/TestTag.test.js +++ b/tests/TestTag.test.js @@ -35,21 +35,21 @@ describe('Component Wrapper shadow false', () => { el = document.createElement('div') el.innerHTML = `
HERE
` document.body.appendChild(el) - expect(el.innerHTML).toBe('

Main H1

Main Default
HERE
') + expect(el.innerHTML).toBe('

Main H1

Main Default
HERE
') }) it('both slots', () => { el = document.createElement('div') el.innerHTML = `BOOM!
HERE
` document.body.appendChild(el) - expect(el.innerHTML).toBe('

Main H1

BOOM!
HERE
') + expect(el.innerHTML).toBe('

Main H1

BOOM!
HERE
') }) it('nested tags', () => { el = document.createElement('div') el.innerHTML = `

Nested

HERE
` document.body.appendChild(el) - expect(el.innerHTML).toBe('

Main H1

Nested

HERE
') + expect(el.innerHTML).toBe('

Main H1

Nested

HERE
') }) it('Unknown slot gets ignored', () => {