@adobe-commerce/elsie 1.0.1-alpha04140951 → 1.0.1-alpha04151720

package/src/docs/slots.mdx

@@ -32,6 +32,41 @@ The `<Slot />` component is used to define a slot in a container. It receives a
 
 The name of the slot in _PascalCase_. `string` (required).
 
+### slotTag
+
+The HTML tag to use for the slot's wrapper element. This allows you to change the wrapper element from the default `div` to any valid HTML tag (e.g., 'span', 'p', 'a', etc.). When using specific tags like 'a', you can also provide their respective HTML attributes (e.g., 'href', 'target', etc.).
+
+Example:
+```tsx
+// Render with a span wrapper
+<Slot name="MySlot" slotTag="span">
+  Inline content
+</Slot>
+
+// Render with an anchor wrapper
+<Slot name="MySlot" slotTag="a" href="https://example.com" target="_blank">
+  Link content
+</Slot>
+```
+
+### contentTag
+
+The HTML tag to use for wrapping dynamically inserted content within the slot. This is separate from the slot's wrapper tag and allows you to control how dynamic content is structured. Defaults to 'div'.
+
+Example:
+```tsx
+<Slot
+  name="MySlot"
+  slotTag="article"    // The outer wrapper will be an article
+  contentTag="section" // Dynamic content will be wrapped in sections
+  slot={(ctx) => {
+    const elem = document.createElement('div');
+    elem.innerHTML = 'Dynamic content';
+    ctx.appendChild(elem); // This will be wrapped in a section tag
+  }}
+/>
+```
+
 ### slot (required)
 
 - `ctx`: An object representing the context of the slot, including methods for manipulating the slot's content.

package/src/lib/slot.tsx

@@ -7,7 +7,7 @@
  * accompanying it. 
  *******************************************************************/
 
-import { cloneElement, ComponentChildren, RefObject, VNode } from 'preact';
+import { cloneElement, ComponentChildren, RefObject, VNode, createElement } from 'preact';
 import {
   StateUpdater,
   useContext,
@@ -42,7 +42,7 @@ interface PrivateContext<T> {
   _registerMethod: (
     cb: (next: T & DefaultSlotContext<T>, state: State) => void
   ) => void;
-  _htmlElementToVNode: (element: HTMLElement) => VNode;
+  _htmlElementToVNode: (element: HTMLElement, tag: keyof HTMLElementTagNameMap) => VNode;
 }
 
 interface DefaultSlotContext<T> extends PrivateContext<T> {
@@ -69,13 +69,14 @@ export type SlotMethod<P = any> = (
 ) => void;
 
 // Slot Hook
-export function useSlot<K, V extends HTMLDivElement>(
+export function useSlot<K, V extends HTMLElement>(
   name: string,
   // @ts-ignore
   context: Context<K> = {},
   callback?: SlotProps<K>,
   children?: ComponentChildren,
-  render?: Function
+  render?: Function,
+  contentTag: keyof HTMLElementTagNameMap = 'div'
 ): [RefObject<V>, Record<string, any>] {
   const slotsQueue = useContext(SlotQueueContext);
 
@@ -146,15 +147,17 @@ export function useSlot<K, V extends HTMLDivElement>(
   context._registerMethod = _registerMethod;
 
   const _htmlElementToVNode = useCallback((elem: HTMLElement) => {
-    return (
-      <div
-        data-slot-html-element={elem.tagName.toLowerCase()}
-        ref={(refElem) => {
+    return createElement(
+      contentTag,
+      {
+        'data-slot-html-element': elem.tagName.toLowerCase(),
+        ref: (refElem: HTMLElement | null): void => {
           refElem?.appendChild(elem);
-        }}
-      />
+        }
+      },
+      null
     );
-  }, []);
+  }, [contentTag]);
 
   // @ts-ignore
   context._htmlElementToVNode = _htmlElementToVNode;
@@ -351,11 +354,14 @@ export function useSlot<K, V extends HTMLDivElement>(
 
 // Slot Component
 interface SlotPropsComponent<T>
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'slot'> {
+  extends Omit<HTMLAttributes<HTMLElement>, 'slot'> {
   name: string;
   slot?: SlotProps<T>;
   context?: Context<T>;
   render?: (props: Record<string, any>) => VNode | VNode[];
+  slotTag?: keyof HTMLElementTagNameMap; // The tag for the slot wrapper itself
+  contentTag?: keyof HTMLElementTagNameMap; // The tag for dynamically inserted content
+  children?: ComponentChildren;
 }
 
 export function Slot<T>({
@@ -364,16 +370,19 @@ export function Slot<T>({
   slot,
   children,
   render,
+  slotTag = 'div',
+  contentTag = 'div',
   ...props
 }: Readonly<SlotPropsComponent<T>>) {
   const slotsQueue = useContext(SlotQueueContext);
 
-  const [elementRef, slotProps] = useSlot<T, HTMLDivElement>(
+  const [elementRef, slotProps] = useSlot<T, HTMLElement>(
     name,
     context,
     slot,
     children,
-    render
+    render,
+    contentTag
   );
 
   useMemo(() => {
@@ -388,10 +397,14 @@ export function Slot<T>({
     }
   }, [name, slotsQueue]);
 
-  return (
-    <div {...props} ref={elementRef} data-slot={name}>
-      {slotProps.children}
-    </div>
+  return createElement(
+    slotTag,
+    {
+      ...props,
+      ref: elementRef,
+      'data-slot': name,
+    },
+    slotProps.children
   );
 }