bind slot props to the slot's parent component props

Question

I am trying to create a generic template which will be then populated with some unique elements which I left out as slots.

Some slots have dynamic data: input fields contenteditable divs etc. my goal is to have the newly added data in the input fields (which are inside the slot) available inside the parent component of the slot

for now I was able to pass down the data from the slot's parent to the slot however , I was unsuccessful while trying to send data back.

here is a REPL to further explain my goal. In the REPL the input field is populated with "FromPageBuilder" string which is coming from the parent PageBuilder.svelte. My goal is that when I change the input field, the string "PageBuilder data is {data}" is updated where {data} is the value written in the input field

I Have tried dispatching an event from the unique component and do on:event on the slot the compiler responded with you cannot use directives on slots.

EDIT: I would also accept solutions which don't use slots as long as it achieves the desired goal

Answer 1

I've been able to achieve the desired functionality using .

Here is a REPL of the implementation.

However since this solution does not answer the question fully, I will leave this question answered for sometime, in hopes that someone knows how to do the same thing using slots