fix(core): SlotMixin: conditional slots should not break init loop
This commit is contained in:
parent
6d4a362662
commit
5dd5a848f0
3 changed files with 18 additions and 1 deletions
5
.changeset/cold-laws-check.md
Normal file
5
.changeset/cold-laws-check.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
'@lion/ui': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
[core] SlotMixin: conditional slots should not break init loop
|
||||||
|
|
@ -173,7 +173,8 @@ const SlotMixinImplementation = superclass =>
|
||||||
const slotFunctionResult = this.slots[slotName]();
|
const slotFunctionResult = this.slots[slotName]();
|
||||||
// Allow to conditionally return a slot
|
// Allow to conditionally return a slot
|
||||||
if (slotFunctionResult === undefined) {
|
if (slotFunctionResult === undefined) {
|
||||||
return;
|
// eslint-disable-next-line no-continue
|
||||||
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!this.__isConnectedSlotMixin) {
|
if (!this.__isConnectedSlotMixin) {
|
||||||
|
|
|
||||||
|
|
@ -81,12 +81,20 @@ describe('SlotMixin', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('does not override user provided slots', async () => {
|
it('does not override user provided slots', async () => {
|
||||||
|
const shouldReturn = false;
|
||||||
const tag = defineCE(
|
const tag = defineCE(
|
||||||
class extends SlotMixin(LitElement) {
|
class extends SlotMixin(LitElement) {
|
||||||
get slots() {
|
get slots() {
|
||||||
return {
|
return {
|
||||||
...super.slots,
|
...super.slots,
|
||||||
feedback: () => document.createElement('div'),
|
feedback: () => document.createElement('div'),
|
||||||
|
'more-feedback': () => {
|
||||||
|
if (shouldReturn) {
|
||||||
|
return document.createElement('div');
|
||||||
|
}
|
||||||
|
return undefined;
|
||||||
|
},
|
||||||
|
'even-more-feedback': () => document.createElement('div'),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -94,6 +102,9 @@ describe('SlotMixin', () => {
|
||||||
const el = await fixture(`<${tag}><p slot="feedback">user-content</p></${tag}>`);
|
const el = await fixture(`<${tag}><p slot="feedback">user-content</p></${tag}>`);
|
||||||
expect(el.children[0].tagName).to.equal('P');
|
expect(el.children[0].tagName).to.equal('P');
|
||||||
expect(/** @type HTMLParagraphElement */ (el.children[0]).innerText).to.equal('user-content');
|
expect(/** @type HTMLParagraphElement */ (el.children[0]).innerText).to.equal('user-content');
|
||||||
|
|
||||||
|
expect(el.children[1].tagName).to.equal('DIV');
|
||||||
|
expect(/** @type HTMLParagraphElement */ (el.children[1]).slot).to.equal('even-more-feedback');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('does add when user provided slots are not direct children', async () => {
|
it('does add when user provided slots are not direct children', async () => {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue