Lightning Card slot footer not working with conditional rendering

[ichizos]

Description

<lightning-card> slots are not working consistently with conditional rendering. On initial load both slot="actions" and slot="footer" loads properly using conditional rendering. After flipping the boolean with button both slots are hidden, but after flipping it again the slot="footer" is not appearing.

Steps to Reproduce

https://webcomponents.dev/edit/2POI9emMdB86ijjsJZqS

Expected Results

After clicking on button for the 2nd time slot="footer" should appear.

Actual Results

After slot="footer" being hidden there is no way to bring it back.

[nolanlawson]

Thanks for the bug report. This does not seem to repro with synthetic shadow disabled, so it looks like a synthetic shadow issue.

Before (synthetic shadow):

After toggling twice (synthetic shadow):

Before and after toggling twice (native shadow, ignore the styling issues):

[uip-robot-zz]

This issue has been linked to a new work item: W-10433091

[nolanlawson]

On second look, I can't seem to repro using a basic component with a slot. So now I'm wondering if this is actually a <lightning-button> issue.

There are well-known differences between synthetic and native shadow in terms of the timing of slot creation, so that may still be what triggers the bug.

[ichizos]

@nolanlawson It was giving me a headache today on my Salesforce project sandbox and I was able to replicate it on the webcomponents.dev site as you could see.

Can confirm that I was only able to reproduce it for slot="footer" in <lightning-card/>. No matter if I gave the slot attribute to <template>, <div> or any other element the result was the same.

My only guess is that there is an issue within <lightning-card> source code and how this specific slot is handled.

[nolanlawson]

@ichizos Thanks again for the report. I routed this internally to another team. I think you're right about the footer slot.

[jmsjtu]

This has been fixed by the Lightning Base Components team.