diff --git a/test-app/.eslintrc.js b/test-app/.eslintrc.js
index 25ceaab4..cadd243f 100644
--- a/test-app/.eslintrc.js
+++ b/test-app/.eslintrc.js
@@ -51,6 +51,7 @@ module.exports = {
       // test files
       files: ['tests/**/*-test.{js,ts}'],
       extends: ['plugin:qunit/recommended'],
+      rules: { 'ember/no-empty-glimmer-component-classes': 'off' },
     },
   ],
 };
diff --git a/test-app/app/components/group-list-item.hbs b/test-app/app/components/group-list-item.hbs
deleted file mode 100644
index d0a7ce66..00000000
--- a/test-app/app/components/group-list-item.hbs
+++ /dev/null
@@ -1 +0,0 @@
-<ul>{{~yield~}}elephant</ul>
\ No newline at end of file
diff --git a/test-app/app/components/hyperlink.hbs b/test-app/app/components/hyperlink.hbs
deleted file mode 100644
index 1c5ecf36..00000000
--- a/test-app/app/components/hyperlink.hbs
+++ /dev/null
@@ -1 +0,0 @@
-<a href={{@node.element.data.url}}>{{yield}}</a>
\ No newline at end of file
diff --git a/test-app/app/components/list-item.hbs b/test-app/app/components/list-item.hbs
deleted file mode 100644
index 31378b71..00000000
--- a/test-app/app/components/list-item.hbs
+++ /dev/null
@@ -1 +0,0 @@
-<li>{{~yield}} bananna</li>
\ No newline at end of file
diff --git a/test-app/tests/integration/components/prismic/dom-test.js b/test-app/tests/integration/components/prismic/dom-test.js
index 6a702fcc..dfa3f759 100644
--- a/test-app/tests/integration/components/prismic/dom-test.js
+++ b/test-app/tests/integration/components/prismic/dom-test.js
@@ -1,6 +1,8 @@
 import { render } from '@ember/test-helpers';
 import { setupRenderingTest } from 'ember-qunit';
 import { module, test } from 'qunit';
+import { setComponentTemplate } from '@ember/component';
+import Component from '@glimmer/component';
 
 import { hbs } from 'ember-cli-htmlbars';
 
@@ -18,6 +20,14 @@ module('Integration | Component | prismic/dom', function (hooks) {
 
   module('custom elements', function () {
     test('hyperlink', async function (assert) {
+      class Hyperlink extends Component {}
+      setComponentTemplate(
+        hbs`<a href={{@node.element.data.url}}>{{yield}}</a>`,
+        Hyperlink
+      );
+
+      this.hyperlink = Hyperlink;
+
       this.nodes = [
         {
           type: 'paragraph',
@@ -34,7 +44,7 @@ module('Integration | Component | prismic/dom', function (hooks) {
       ];
 
       await render(
-        hbs`<Prismic::Dom @nodes={{this.nodes}} @hyperlink='hyperlink'/>`
+        hbs`<Prismic::Dom @nodes={{this.nodes}} @hyperlink={{this.hyperlink}} />`
       );
       assert.strictEqual(
         cleanHtml(this),
@@ -42,16 +52,52 @@ module('Integration | Component | prismic/dom', function (hooks) {
       );
     });
 
+    test('handle passing a custom component as a string', async function (assert) {
+      class SuperCustom extends Component {}
+      setComponentTemplate(hbs`<mark>{{yield}}</mark>`, SuperCustom);
+
+      this.nodes = [
+        {
+          type: 'paragraph',
+          text: 'A fancy component',
+          spans: [
+            {
+              start: 2,
+              end: 7,
+              type: 'super-custom',
+            },
+          ],
+        },
+      ];
+      this.owner.register('component:super-custom', SuperCustom);
+
+      await render(
+        hbs`<Prismic::Dom @nodes={{this.nodes}} @super-custom="super-custom" />`
+      );
+
+      assert.strictEqual(
+        cleanHtml(this),
+        '<div><p>A <mark>fancy</mark> component</p></div>'
+      );
+    });
+
     test('list', async function (assert) {
+      class GroupListItem extends Component {}
+      class ListItem extends Component {}
+
+      setComponentTemplate(hbs`<ul>{{~yield~}}elephant</ul>`, GroupListItem);
+      setComponentTemplate(hbs`<li>{{~yield}} bananna</li>`, ListItem);
+
       this.nodes = [
         { type: 'list-item', text: 'one', spans: [] },
         { type: 'list-item', text: 'two', spans: [] },
       ];
 
+      this.groupListItem = GroupListItem;
       this.listItem = '';
 
       await render(
-        hbs`<Prismic::Dom @nodes={{this.nodes}} @group-list-item='group-list-item' @list-item={{this.listItem}}/>`
+        hbs`<Prismic::Dom @nodes={{this.nodes}} @group-list-item={{this.groupListItem}} @list-item={{this.listItem}}/>`
       );
 
       assert.strictEqual(
@@ -59,7 +105,7 @@ module('Integration | Component | prismic/dom', function (hooks) {
         '<div><ul><li>one</li><li>two</li>elephant</ul></div>'
       );
 
-      this.set('listItem', 'list-item');
+      this.set('listItem', ListItem);
 
       assert.strictEqual(
         cleanHtml(this),