diff --git a/playground/components/global/drupal-markup.vue b/playground/components/global/drupal-markup.vue
index 050122f0..d04562c1 100644
--- a/playground/components/global/drupal-markup.vue
+++ b/playground/components/global/drupal-markup.vue
@@ -1,9 +1,13 @@
 <template>
-  <div v-html="content" />
+  <div>
+    <slot>
+      <component :is="useDrupalCe().renderCustomElements($attrs.content)" />
+    </slot>
+  </div>
 </template>
 
 <script setup lang="ts">
-defineProps<{
-  content: string
+defineSlots<{
+  default();
 }>()
 </script>
diff --git a/test/unit/components/drupal-markup.test.ts b/test/unit/components/drupal-markup.test.ts
new file mode 100644
index 00000000..e02456bb
--- /dev/null
+++ b/test/unit/components/drupal-markup.test.ts
@@ -0,0 +1,37 @@
+// test/unit/components/drupal-markup.test.ts
+// @vitest-environment nuxt
+import { describe, it, expect } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { defineComponent } from 'vue'
+import { useDrupalCe } from '../../../src/runtime/composables/useDrupalCe'
+import DrupalMarkup from '../../../playground/components/global/drupal-markup.vue'
+
+describe('drupal-markup custom element', () => {
+  const markupData = {
+    element: 'drupal-markup',
+    content: '<p>Some <b>formatted</b> content.</p>'
+  }
+
+  const createMarkupComponent = (data = markupData) => defineComponent({
+    components: { 'drupal-markup': DrupalMarkup },
+    setup() {
+      const { renderCustomElements } = useDrupalCe()
+      return { component: renderCustomElements(data) }
+    },
+    template: '<component :is="component" />'
+  })
+
+  it('renders markup content via custom element json', async () => {
+    const wrapper = await mountSuspended(createMarkupComponent())
+    expect(wrapper.html()).toContain('<p>Some <b>formatted</b> content.</p>')
+  })
+
+  it('renders markup content via custom element markup ', async () => {
+    const TestComponent = defineComponent({
+      components: { 'drupal-markup': DrupalMarkup },
+      template: '<drupal-markup><p>Slotted <b>content</b></p></drupal-markup>'
+    })
+    const wrapper = await mountSuspended(TestComponent)
+    expect(wrapper.html()).toContain('<p>Slotted <b>content</b></p>')
+  })
+})