In Svelte, I am using the Modal component.

This component provides the possibility do declare a div with the property slot="footer".

This will keep the footer always at the bottom of the modal. It will make the body scroll if there is a lot of content, while keeping the footer visible anchored at the bottom of the modal.

My problem?

I’d like to be able to modify the content of this footer from a child component that I am using inside the Modal component. This child component has custom logic that will modify the footer content (not text, but html elements like buttons).

I tried to move the div <div slot="footer"> inside the child component but I got this error:

Element with a slot='...' attribute must be a child of a component or a descendant of a custom element

I also tried this solution but I did not managed to make it work. Not sure if I did an error or it’s not really related to my case (I’m still a new with Svelte).
It seems like that the “footer” option in the child component does NOT reach the parent component.

This is my code:

<script lang="ts">
    import { Modal } from "flowbite-svelte";
    import TestComponent from "./TestComponent.svelte";
</script>
Parent component:

<Modal open={true} size="lg" class="m-4">
    <!-- Modal body -->
    <div class="space-y-6 p-0"><p>BODY CONTENT</p></div>

    <TestComponent />

    <!-- Modal footer -->
    <div slot="footer" class="flex w-full justify-end">
        <p>FOOTER CONTENT</p>
    </div>
</Modal>

-----------

Child Component:

<p>SOME TEXT THAT MUST BE CONFIRMED WITH A BUTTON IN THE MODAL</p>

<!-- show button A or B in parent component based on some logic -->

<!-- <div slot="footer" class="flex w-full justify-end"></div> - enabling triggers error -->

Is there a way to achieve this? Of course I am aware that I could move the logic in the footer directly, but I was trying to modularize the code.

Thanks in advance for any help!