diff --git a/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap b/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap
index 7141b7af1311..0723eca17647 100644
--- a/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap
+++ b/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap
@@ -3,7 +3,6 @@
 exports[`Renders CSF2Secondary story 1`] = `
 <body>
   <div>
-    <!---->
     <!---->
     <button
       class="storybook-button storybook-button--medium storybook-button--secondary"
@@ -15,7 +14,6 @@ exports[`Renders CSF2Secondary story 1`] = `
     </button>
     
     
-    
   </div>
 </body>
 `;
@@ -23,15 +21,12 @@ exports[`Renders CSF2Secondary story 1`] = `
 exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
 <body>
   <div>
-    <!---->
-    <!---->
     <!---->
     <!---->
     <div
       data-testid="local-decorator"
       style="margin: 3em;"
     >
-      <!---->
       <button
         class="storybook-button storybook-button--medium storybook-button--secondary"
         style=""
@@ -40,14 +35,11 @@ exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
         foo 
         <!---->
       </button>
-      
       <!---->
     </div>
     
     
     
-    
-    
   </div>
 </body>
 `;
@@ -55,7 +47,6 @@ exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
 exports[`Renders CSF3Button story 1`] = `
 <body>
   <div>
-    <!---->
     <!---->
     <button
       class="storybook-button storybook-button--medium storybook-button--secondary"
@@ -67,7 +58,6 @@ exports[`Renders CSF3Button story 1`] = `
     </button>
     
     
-    
   </div>
 </body>
 `;
@@ -75,7 +65,6 @@ exports[`Renders CSF3Button story 1`] = `
 exports[`Renders CSF3ButtonWithRender story 1`] = `
 <body>
   <div>
-    <!---->
     <!---->
     <div>
       <p
@@ -96,7 +85,6 @@ exports[`Renders CSF3ButtonWithRender story 1`] = `
     </div>
     
     
-    
   </div>
 </body>
 `;
@@ -104,7 +92,6 @@ exports[`Renders CSF3ButtonWithRender story 1`] = `
 exports[`Renders CSF3InputFieldFilled story 1`] = `
 <body>
   <div>
-    <!---->
     <!---->
     <input
       data-testid="input"
@@ -113,7 +100,6 @@ exports[`Renders CSF3InputFieldFilled story 1`] = `
     />
     
     
-    
   </div>
 </body>
 `;
@@ -121,7 +107,6 @@ exports[`Renders CSF3InputFieldFilled story 1`] = `
 exports[`Renders CSF3Primary story 1`] = `
 <body>
   <div>
-    <!---->
     <!---->
     <button
       class="storybook-button storybook-button--large storybook-button--primary"
@@ -133,7 +118,6 @@ exports[`Renders CSF3Primary story 1`] = `
     </button>
     
     
-    
   </div>
 </body>
 `;
@@ -141,7 +125,6 @@ exports[`Renders CSF3Primary story 1`] = `
 exports[`Renders LoaderStory story 1`] = `
 <body>
   <div>
-    <!---->
     <!---->
     <div>
       <div
@@ -158,7 +141,6 @@ exports[`Renders LoaderStory story 1`] = `
     </div>
     
     
-    
   </div>
 </body>
 `;
@@ -166,15 +148,12 @@ exports[`Renders LoaderStory story 1`] = `
 exports[`Renders NewStory story 1`] = `
 <body>
   <div>
-    <!---->
-    <!---->
     <!---->
     <!---->
     <div
       data-testid="local-decorator"
       style="margin: 3em;"
     >
-      <!---->
       <button
         class="storybook-button storybook-button--large storybook-button--primary"
         style=""
@@ -183,14 +162,11 @@ exports[`Renders NewStory story 1`] = `
         foo 
         <!---->
       </button>
-      
       <!---->
     </div>
     
     
     
-    
-    
   </div>
 </body>
 `;
diff --git a/code/renderers/svelte/src/components/SlotDecorator.svelte b/code/renderers/svelte/src/components/SlotDecorator.svelte
index 27b80aae3412..0e184f6bb0ff 100644
--- a/code/renderers/svelte/src/components/SlotDecorator.svelte
+++ b/code/renderers/svelte/src/components/SlotDecorator.svelte
@@ -42,9 +42,9 @@
 </script>
 
 {#if decorator}
-  <svelte:component this={decorator.Component} {...decorator.props} bind:this={decoratorInstance}>
-    <svelte:component this={Component} {...propsWithoutDocgenEvents} bind:this={instance} />
-  </svelte:component>
+  <decorator.Component {...decorator.props} bind:this={decoratorInstance}>
+    <Component {...propsWithoutDocgenEvents} bind:this={instance} />
+  </decorator.Component>
 {:else}
-  <svelte:component this={Component} {...propsWithoutDocgenEvents} bind:this={instance} />
+  <Component {...propsWithoutDocgenEvents} bind:this={instance} />
 {/if}
diff --git a/test-storybooks/portable-stories-kitchen-sink/svelte/stories/__snapshots__/Button.test.ts.snap b/test-storybooks/portable-stories-kitchen-sink/svelte/stories/__snapshots__/Button.test.ts.snap
index 80fb1d74c3f4..5e0c5321592b 100644
--- a/test-storybooks/portable-stories-kitchen-sink/svelte/stories/__snapshots__/Button.test.ts.snap
+++ b/test-storybooks/portable-stories-kitchen-sink/svelte/stories/__snapshots__/Button.test.ts.snap
@@ -12,7 +12,6 @@ exports[`Renders CSF2Secondary story 1`] = `
        
     </button>
     
-    
   </div>
 </body>
 `;
@@ -20,9 +19,7 @@ exports[`Renders CSF2Secondary story 1`] = `
 exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
 <body>
   <div>
-    <div
-      style="margin: 3em;"
-    >
+    <decorator.component>
       <button
         class="storybook-button storybook-button--medium storybook-button--secondary"
         style=""
@@ -31,10 +28,7 @@ exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
         foo
          
       </button>
-      
-    </div>
-    
-    
+    </decorator.component>
     
     
   </div>
@@ -53,7 +47,6 @@ exports[`Renders CSF3Button story 1`] = `
        
     </button>
     
-    
   </div>
 </body>
 `;
@@ -78,7 +71,6 @@ exports[`Renders CSF3ButtonWithRender story 1`] = `
       </button>
     </div>
     
-    
   </div>
 </body>
 `;
@@ -90,7 +82,6 @@ exports[`Renders CSF3InputFieldFilled story 1`] = `
       data-testid="input"
     />
     
-    
   </div>
 </body>
 `;
@@ -107,7 +98,6 @@ exports[`Renders CSF3Primary story 1`] = `
        
     </button>
     
-    
   </div>
 </body>
 `;
@@ -129,7 +119,6 @@ exports[`Renders LoaderStory story 1`] = `
       </div>
     </div>
     
-    
   </div>
 </body>
 `;
@@ -137,9 +126,7 @@ exports[`Renders LoaderStory story 1`] = `
 exports[`Renders NewStory story 1`] = `
 <body>
   <div>
-    <div
-      style="margin: 3em;"
-    >
+    <decorator.component>
       <button
         class="storybook-button storybook-button--large storybook-button--primary"
         style=""
@@ -148,10 +135,7 @@ exports[`Renders NewStory story 1`] = `
         foo
          
       </button>
-      
-    </div>
-    
-    
+    </decorator.component>
     
     
   </div>
