How to pass props to a slot for a custom component in Svelte?

Technical Questions
3

Not quite, I understand how to pass arbitrary attributes but it seems when noWrap is used Builder looses the necessary class and builder-id attributes to make the component focusable in UI. You can drill into the component using layers. Not a deal breaker but I’d like to fix this.

This is a similar thread but it was addressed in React Custom Component with noWrap "true" cause focus issue - #2 by steve

I figured out the solution, in the parent component (SectionComponent.svelte) I had to expose attributes and pass that into the slot.

<script>
	export let title;
	export let subTitle;
	export let attributes;
</script>

<div class="u-fixed-width">
	<h2 class="p-muted-heading">{subTitle}</h2>
	<div class="row">
		<hr class="p-rule" />
	</div>
</div>
<section class="p-section">
	<div class="row--25-75 is-split-on-medium">
		<div class="col">
			<h3 class="p-heading--1">{title}</h3>
		</div>
		<slot {attributes} />
	</div>
</section>

Then I had ensure my custom class was not overwritten yet adding the Builder attribute and class.

<script>
	export let items;
	export let attributes;
	const formattedData = { id: attributes['builder-id'], class: attributes.class };
</script>

<div builder-id={formattedData.id} class={`col ${formattedData.class}`}>
	<ul class="p-list--divided">
		{#each items as item}
			<li class="p-list__item has-bullet">
				{item.title}
			</li>
		{/each}
	</ul>
</div>

Works perfectly. Hopefully this might help someone else.

1 Like