fix: ensure renderSlots() return correctly tagged unsafe html

Author: iOvergaard

storyhelpers/render-slots.ts

@@ -1,15 +1,14 @@
 import { Args } from '@storybook/web-components';
-import { html, nothing, TemplateResult } from 'lit';
+import { nothing, TemplateResult } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 /**
  * Render a list of slots, filtering out any null or undefined slots to prevent empty lines.
  * Accepts an array of TemplateResults or an Args object. If an Args object is provided, it will render any properties that end with 'slot'.
  */
 // TODO: add a way to control the new lines. Eg exclude newlines: before, after, between as an array
-function renderSlots(args: Args): TemplateResult | typeof nothing;
-function renderSlots(
-  param: TemplateResult[] | Args,
-): TemplateResult | typeof nothing {
+function renderSlots(args: Args): TemplateResult[] | typeof nothing;
+function renderSlots(param: TemplateResult[] | Args) {
   let slots: TemplateResult[] = [];
 
   // if param is array, set slots to param
@@ -34,13 +33,14 @@ function renderSlots(
 
   // Join slots with consistent formatting; no extra line breaks between them
   const spacing = '  ';
-  const formattedSlots = validSlots.map(
-    (slot, index) =>
-      // eslint-disable-next-line lit/no-useless-template-literals
-      html`${'\n'}${spacing}${slot}${index === slots.length - 1 ? '\n' : ''}`,
-  );
-
-  // Return the combined template results
-  return html`${formattedSlots}`;
+
+  const stringSlots = validSlots.map(slot => slot.strings[0]);
+  const stringSlotsJoined = stringSlots.join('\n');
+  const stringSlotsJoinedWithSpacing = stringSlotsJoined
+    .split('\n')
+    .map(line => spacing + line)
+    .join('\n');
+
+  return unsafeHTML(stringSlotsJoinedWithSpacing);
 }
 export { renderSlots };