Using named slots in Custom Components

Visual Editor Help
1

Hi,

Is it possible to use named slots in the custom components in the visual editor ?

Let’s say for example, i have a component like so (in Vue):

<Section>
   <slot name="header"> <!-- named slot-->
   <InnerSection>
      <slot></slot> <!-- default slot -->
   </InnerSection>
   <slot name="footer"> <!-- named slot-->
</Section>

So that would mean that a custom component might have multiple drop zones.
Is it possible ? :thinking:

2 Likes
2

+1 for this. Otherwise i think with vue, you can really only have one child. Hopefully i’m wrong!

3

Hello @faz, @marinelbg,

Named slots are not yet supported, but there are plans to implement support for named slots in the coming months.

4

What are some alternatives until you’re done with named slots implementation?

5

Hi @ajatzoro,

Great news! Builder.io now supports named slots, so you should be able to use them within your custom components.

Example: Using Named Slots in Builder.io

In Builder.io, you can use the Slot component to define named slots within your custom Svelte components. Here’s an example of how you can achieve this:

Custom Component (Custom.svelte):

<script>
    export let name;
    export let address;
    export let email;
</script>

<article class="contact-card">
	<h2>
		<slot name="name">
			<span>{name || "Unknown name"}</span>
		</slot>
	</h2>

	<div class="address">
		<slot name="address">
			<span>{address || "Unknown address"}</span>
		</slot>
	</div>

	<div class="email">
		<slot name="email">
			<span>{email || "Unknown email"}</span>
		</slot>
	</div>
</article>

<style>
	.contact-card {
		width: 300px;
		border-radius: 2px;
		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
		padding: 1em;
	}

	h2 {
		padding: 0 0 0.2em 0;
		margin: 0 0 1em 0;
		border-bottom: 1px solid #ff3e00;
	}

	.address,
	.email {
		padding: 0 0 0 1.5em;
		background: 0 0 no-repeat;
		background-size: 20px 20px;
		margin: 0 0 0.5em 0;
		line-height: 1.2;
	}

	.address {
		background-image: url(/tutorial/icons/map-marker.svg);
	}

	.email {
		background-image: url(/tutorial/icons/email.svg);
	}
</style>

Usage in Builder.io (src/routes/[...catchall]/+page.svelte):

<script>
    import { isPreviewing, Content } from "@builder.io/sdk-svelte";
    import ContactCard from "$lib/components/custom.svelte";
  
    export let data;
  
    const canShowContent = data.content || isPreviewing();
</script>
  
<main>
    <h1>Welcome to SvelteKit</h1>
    <h2>Your Builder Content:</h2>
    {#if canShowContent}
      <div>Page Title: {data.content?.data?.title || "Unpublished"}</div>
      <Content
        model="page"
        content={data.content}
        apiKey="ad30f9a246614faaa6a03374f83554c9"
        customComponents={[{
            name: "ContactCard",
            component: ContactCard,
            inputs: [
              { name: "name", type: "text" },
              { name: "address", type: "text" },
              { name: "email", type: "email" }
            ]
        }]}
      />
    {:else}
      Content Not Found
    {/if}
</main>

By using the slot component with named slots, you can define default content and override it when needed. This setup should help you manage dynamic content in your Builder.io projects more effectively.

I hope this helps! If you have any questions or need further assistance, feel free to reach out.

Thanks,