feat: Simplify Custom Elements rendering in components.

playground/server/routes/ce-api/node/unified.ts

@@ -0,0 +1,27 @@
+export default defineEventHandler(() => ({
+  title: 'Another page',
+  messages: [],
+  breadcrumbs: [],
+  metatags: {},
+  content_format: 'json',
+  content: {
+    element: 'node',
+    slots: {
+      image: '<img loading="lazy" src="https://placehold.co/600x400" width="600" height="400" alt="test" />',
+      body: {
+        element: 'node',
+        slots: {
+          body: '<p>2nd <b>example</b> body.</p>',
+        },
+        props: {
+          title: 'Title2',
+        },
+      },
+    },
+    props: {
+      title: 'Title',
+    },
+  },
+  page_layout: 'clear',
+  local_tasks: [],
+}))

src/runtime/composables/useDrupalCe/index.ts

@@ -324,7 +324,17 @@ export const useDrupalCe = () => {
     // Handle single custom element object
     const { element, ...props } = customElements
     const resolvedElement = resolveCustomElement(element)
-    return resolvedElement ? h(resolvedElement, props) : null
+
+    // Handle slots
+    const slots = {}
+    if (customElements?.slots && Object.keys(customElements?.slots)?.length) {
+      Object.entries(customElements?.slots).forEach(([key, element]) => {
+        const rendered = renderCustomElements(element)
+        slots[key] = rendered ? () => h(rendered) : null
+      })
+    }
+
+    return resolvedElement ? h(resolvedElement, { ...props, ...props.props }, slots) : null
   }
 
   /**