The CMS returns HTML with custom elements with respective props.
<!-- index.html -->
<svelte-accordion props='{"toggleAll":true}'>
<svelte-accordion-item props='{"title":"Accordion item 1"}'>
<p>Content of the first accordion item</p>
</svelte-accordion-item>
<svelte-accordion-item props='{"title":"Accordion item 2"}'>
<p>Content of the second accordion item</p>
</svelte-accordion-item>
<svelte-accordion-item props='{"title":"Accordion item 3"}'>
<p>Content of the third accordion item</p>
</svelte-accordion-item>
</svelte-accordion>
The idea is to use Svelte components for the custom elements like this:
// Accordion.svelte
<svelte:options tag="svelte-accordion" />
<script>
export let props;
</script>
<slot parentProps={props} />
// AccordionItem.svelte
<svelte:options tag="svelte-accordion-item" />
<script>
export let props;
export let parentProps;
const { title } = JSON.parse(props);
// parentProps is undefined
console.info('__parentProps__', parentProps);
</script>
<h2>{title}</h2>
<slot />
In the above example AccordionItem.svelte is unable to receive the props passed by Accordion.svelte. The reason may be that the props are actually passed to the <slot> within Accordion.svelte and not directly to <svelte-accordion-item>.
How can we solve this?
Thank you for your help!
When you do <slot parentProps={props}> the parentProps are not automatically send to the content of the prop, but are instead available in the form of let:parentProps on the Accordion component. Note that this makes perfect sense if you consider that you do not have to use a component to fill a slot:
<Accordion>
<span>Some content here</span>
</Accordion>
In the above example there is not Component to send those props to!
To solve your problem you could consider using the ContextAPI this allows us to make variables available to all the descendants of a component.
<!-- Accordion.svelte -->
<svelte:options tag="svelte-accordion" />
<script>
import { setContext } from 'svelte';
export let props;
setContext('parentProps', props)
</script>
<slot />
<!-- AccordionItem.svelte -->
<svelte:options tag="svelte-accordion-item" />
<script>
import { getContext } from 'svelte';
export let props;
const parentProps = getContext('parentProps');
const { title } = JSON.parse(props);
// parentProps is undefined
console.info('__parentProps__', parentProps);
</script>
<h2>{title}</h2>
<slot />