I have a svelte component with a default slot and a named slot. I have an instance of that component and use the named slot, and use the default slow inside an {#if} statement checking for a boolean.
The problem is inside my component, I have logic that checks for the default slot and renders some padding and border. It seems even when the boolean is false and the {#if} is false, that the default slow is still there, just empty.
Child:
const hasDefaultSlot = Object.keys($$slots).includes('default');Parent:
<MyComponent><div slot="header"> header </div>{#if checked}<div>body</div>{/if}</MyComponent>My expectation is that when checked is false, Object.keys($$slots).includes('default') would be false, or $$slots.default would be false, or that $$slots.default wouldn't be a boolean, but an object that contains other info that I can use to check if it's empty.
Sadly, it seems the Svelte compiler sees the #if statement result as always true, even though it changes in real time and starts off false.
Without being able to conditionally detect the slot, I am always rendering the body and body styles for a card item, which messes up the css for the component.