From f0b12a89f6c93ad6fc40d6997f2f0fda9a61291d Mon Sep 17 00:00:00 2001
From: Matic Fink <turtlman@gmail.com>
Date: Mon, 20 Oct 2025 14:28:46 +0200
Subject: [PATCH] feat: Simplify Custom Elements rendering in components.

---
 .../server/routes/ce-api/node/unified.ts      | 27 +++++++++++++++++++
 src/runtime/composables/useDrupalCe/index.ts  | 12 ++++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 playground/server/routes/ce-api/node/unified.ts

diff --git a/playground/server/routes/ce-api/node/unified.ts b/playground/server/routes/ce-api/node/unified.ts
new file mode 100644
index 00000000..8e0cc60a
--- /dev/null
+++ b/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: [],
+}))
diff --git a/src/runtime/composables/useDrupalCe/index.ts b/src/runtime/composables/useDrupalCe/index.ts
index a4b0a497..88cec725 100644
--- a/src/runtime/composables/useDrupalCe/index.ts
+++ b/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
   }
 
   /**