diff --git a/examples/svelte/src/routes/custom-connection-line/+page.svelte b/examples/svelte/src/routes/custom-connection-line/+page.svelte
index c5bcab3f..58552225 100644
--- a/examples/svelte/src/routes/custom-connection-line/+page.svelte
+++ b/examples/svelte/src/routes/custom-connection-line/+page.svelte
@@ -26,7 +26,7 @@
 
 <div style="height:100vh;">
 	<SvelteFlow {nodeTypes} {nodes} {edges} fitView>
-		<ConnectionLine slot="connectionLineComponent" />
+		<ConnectionLine slot="connectionLine" />
 		<Background variant={BackgroundVariant.Lines} />
 	</SvelteFlow>
 </div>
diff --git a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
index d88cb728..f8ddc5b3 100644
--- a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
+++ b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
@@ -5,16 +5,18 @@
 
   export let containerStyle: string = '';
   export let style: string = '';
+  export let usingCustomLine: boolean = false;
 
   const { width, height, connection } = useStore();
 </script>
 
 {#if $connection.path}
   <svg width={$width} height={$height} class="svelte-flow__connectionline" style={containerStyle}>
-    <slot name="connectionLineComponent">
+    <slot name="connectionLine" />
+    {#if !usingCustomLine}
       <g class={cc(['svelte-flow__connection', $connection.status])} {style}>
         <path d={$connection.path} fill="none" class="svelte-flow__connection-path" />
       </g>
-    </slot>
+    {/if}
   </svg>
 {/if}
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index 2f13ac2f..bb450236 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -162,8 +162,12 @@
     <Pane on:paneclick panOnDrag={panOnDrag === undefined ? true : panOnDrag}>
       <ViewportComponent>
         <EdgeRenderer on:edgeclick on:edgecontextmenu {defaultEdgeOptions} />
-        <ConnectionLine containerStyle={connectionLineContainerStyle} style={connectionLineStyle}>
-          <slot name="connectionLineComponent" slot="connectionLineComponent" />
+        <ConnectionLine
+          containerStyle={connectionLineContainerStyle}
+          style={connectionLineStyle}
+          usingCustomLine={$$slots.connectionLine}
+        >
+          <slot name="connectionLine" slot="connectionLine" />
         </ConnectionLine>
         <div class="svelte-flow__edgelabel-renderer" />
         <NodeRenderer