diff --git a/.changeset/healthy-parents-happen.md b/.changeset/healthy-parents-happen.md new file mode 100644 index 000000000..f914555c6 --- /dev/null +++ b/.changeset/healthy-parents-happen.md @@ -0,0 +1,5 @@ +--- +'@lion/core': patch +--- + +Allow SlotMixin to work with default slots using empty string as key (''). Ensure that we do not add slot attribute to the slottable in this case. diff --git a/packages/core/src/SlotMixin.js b/packages/core/src/SlotMixin.js index 2b21de2b3..68403adb7 100644 --- a/packages/core/src/SlotMixin.js +++ b/packages/core/src/SlotMixin.js @@ -49,7 +49,15 @@ const SlotMixinImplementation = superclass => _connectSlotMixin() { if (!this.__isConnectedSlotMixin) { Object.keys(this.slots).forEach(slotName => { - if (!Array.from(this.children).find(el => el.slot === slotName)) { + const hasSlottableFromUser = + slotName === '' + ? // for default slot (''), we can't use el.slot because polyfill for IE11 + // will do .querySelector('[slot=]') which produces a fatal error + // therefore we check if there's children that do not have a slot attr + Array.from(this.children).find(el => !el.hasAttribute('slot')) + : Array.from(this.children).find(el => el.slot === slotName); + + if (!hasSlottableFromUser) { const slotContent = this.slots[slotName](); /** @type {Node[]} */ let nodes = []; @@ -64,7 +72,7 @@ const SlotMixinImplementation = superclass => if (!(node instanceof Node)) { return; } - if (node instanceof Element) { + if (node instanceof Element && slotName !== '') { node.setAttribute('slot', slotName); } this.appendChild(node); diff --git a/packages/core/test/SlotMixin.test.js b/packages/core/test/SlotMixin.test.js index 611c25e57..f15dfeb8b 100644 --- a/packages/core/test/SlotMixin.test.js +++ b/packages/core/test/SlotMixin.test.js @@ -19,6 +19,41 @@ describe('SlotMixin', () => { expect(el.children[0].slot).to.equal('feedback'); }); + it("supports unnamed slot with ''", async () => { + const tag = defineCE( + class extends SlotMixin(LitElement) { + get slots() { + return { + ...super.slots, + '': () => document.createElement('div'), + }; + } + }, + ); + const el = await fixture(`<${tag}>`); + expect(el.children[0].slot).to.equal(''); + expect(el.children[0]).dom.to.equal('
'); + }); + + it('supports unnamed slot in conjunction with named slots', async () => { + const tag = defineCE( + class extends SlotMixin(LitElement) { + get slots() { + return { + ...super.slots, + foo: () => document.createElement('a'), + '': () => document.createElement('div'), + }; + } + }, + ); + const el = await fixture(`<${tag}>`); + expect(el.children[0].slot).to.equal('foo'); + expect(el.children[1].slot).to.equal(''); + expect(el.children[0]).dom.to.equal(''); + expect(el.children[1]).dom.to.equal('
'); + }); + it('does not override user provided slots', async () => { const tag = defineCE( class extends SlotMixin(LitElement) { diff --git a/yarn.lock b/yarn.lock index b79cf6b3b..47bd8f4bb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1289,6 +1289,13 @@ dependencies: vary "^1.1.2" +"@lion/accordion@^0.6.1": + version "0.6.3" + resolved "https://registry.yarnpkg.com/@lion/accordion/-/accordion-0.6.3.tgz#93addeec077efc04d7059e7892e3e4844b4ef093" + integrity sha512-hk0bkCo5DbRwyHRlkoAtAnfxGIV55w7A4jHRhLRtNLN+LOLn/S/+cfN93/WuugXmNd57DoeGUvrwGbb9Wbdf1g== + dependencies: + "@lion/core" "0.18.2" + "@lion/core@0.16.0": version "0.16.0" resolved "https://registry.yarnpkg.com/@lion/core/-/core-0.16.0.tgz#c4c8ac81b8d5bece6d40d561a392382c7ae73533" @@ -1299,6 +1306,15 @@ lit-element "~2.4.0" lit-html "^1.3.0" +"@lion/core@0.18.2": + version "0.18.2" + resolved "https://registry.yarnpkg.com/@lion/core/-/core-0.18.2.tgz#ffac7a4a4811277cf864afdc7114dbb036a2e27a" + integrity sha512-wlzhAZUTTBYBUNeO+/dhMmh/bkzuwKOORhl7bh5PDMeHSLpTpubs5AKjrYLhF16qxczm0k/GautyJ9wZUfq2ZA== + dependencies: + "@open-wc/dedupe-mixin" "^1.2.18" + "@open-wc/scoped-elements" "^2.0.0-next.3" + lit "^2.0.0-rc.2" + "@lion/overlays@^0.26.1": version "0.26.1" resolved "https://registry.yarnpkg.com/@lion/overlays/-/overlays-0.26.1.tgz#d1bfa4f5f97108982afa7b409ba4300f8b2d2ba5"