diff --git a/src/Umbraco.Web.UI.Client/.storybook/preview.js b/src/Umbraco.Web.UI.Client/.storybook/preview.js
index abb33a59ec..f60ae29ac3 100644
--- a/src/Umbraco.Web.UI.Client/.storybook/preview.js
+++ b/src/Umbraco.Web.UI.Client/.storybook/preview.js
@@ -56,19 +56,27 @@ customElements.define('umb-storybook', UmbStoryBookElement);
 const storybookProvider = (story) => html` <umb-storybook>${story()}</umb-storybook> `;
 
 const dataTypeStoreProvider = (story) => html`
-	<umb-controller-host-test .create=${(host) => new UmbDataTypeStore(host)}>${story()}</umb-controller-host-test>
+	<umb-controller-host-initializer .create=${(host) => new UmbDataTypeStore(host)}
+		>${story()}</umb-controller-host-initializer
+	>
 `;
 
 const documentTypeStoreProvider = (story) => html`
-	<umb-controller-host-test .create=${(host) => new UmbDocumentTypeStore(host)}>${story()}</umb-controller-host-test>
+	<umb-controller-host-initializer .create=${(host) => new UmbDocumentTypeStore(host)}
+		>${story()}</umb-controller-host-initializer
+	>
 `;
 
 const documentStoreProvider = (story) => html`
-	<umb-controller-host-test .create=${(host) => new UmbDocumentStore(host)}>${story()}</umb-controller-host-test>
+	<umb-controller-host-initializer .create=${(host) => new UmbDocumentStore(host)}
+		>${story()}</umb-controller-host-initializer
+	>
 `;
 
 const documentTreeStoreProvider = (story) => html`
-	<umb-controller-host-test .create=${(host) => new UmbDocumentTreeStore(host)}>${story()}</umb-controller-host-test>
+	<umb-controller-host-initializer .create=${(host) => new UmbDocumentTreeStore(host)}
+		>${story()}</umb-controller-host-initializer
+	>
 `;
 
 // Initialize MSW
diff --git a/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.element.ts b/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.element.ts
index 14d703ffe7..ce36b95797 100644
--- a/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.element.ts
@@ -1,31 +1,34 @@
-import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
-import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbControllerHostElement, UmbControllerHostMixin } from '@umbraco-cms/backoffice/controller';
 
-@customElement('umb-controller-host-test')
-export class UmbControllerHostTestElement extends UmbLitElement {
+export class UmbControllerHostInitializerElement
+	extends UmbControllerHostMixin(HTMLElement)
+	implements UmbControllerHostElement
+{
 	/**
 	 * A way to initialize controllers.
 	 * @required
 	 */
-	@property({ type: Object, attribute: false })
 	create?: (host: UmbControllerHostElement) => void;
 
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+		const slot = document.createElement('slot');
+		this.shadowRoot?.appendChild(slot);
+	}
+
 	connectedCallback() {
 		super.connectedCallback();
 		if (this.create) {
 			this.create(this);
 		}
 	}
-
-	render() {
-		return html`<slot></slot>`;
-	}
 }
 
+customElements.define('umb-controller-host-initializer', UmbControllerHostInitializerElement);
+
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-controller-host-test': UmbControllerHostTestElement;
+		'umb-controller-host-initializer': UmbControllerHostInitializerElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.test.ts b/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.test.ts
index 322bb7246c..5fa5a78ca1 100644
--- a/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.test.ts
@@ -1,11 +1,11 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import { customElement } from 'lit/decorators.js';
-import { UmbControllerHostTestElement } from './controller-host-test.element';
+import { UmbControllerHostInitializerElement } from './controller-host-test.element';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbContextProviderController } from '@umbraco-cms/backoffice/context-api';
 import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
-@customElement('umb-controller-host-test-consumer')
+@customElement('umb-controller-host-initializer-consumer')
 export class UmbControllerHostTestConsumerElement extends UmbLitElement {
 	public value: string | null = null;
 	constructor() {
@@ -17,25 +17,25 @@ export class UmbControllerHostTestConsumerElement extends UmbLitElement {
 }
 
 describe('UmbControllerHostTestElement', () => {
-	let element: UmbControllerHostTestElement;
+	let element: UmbControllerHostInitializerElement;
 	let consumer: UmbControllerHostTestConsumerElement;
 	const contextValue = 'test-value';
 
 	beforeEach(async () => {
 		element = await fixture(
-			html` <umb-controller-host-test
+			html` <umb-controller-host-initializer
 				.create=${(host: UmbControllerHostElement) =>
 					new UmbContextProviderController(host, 'my-test-context-alias', contextValue)}>
-				<umb-controller-host-test-consumer></umb-controller-host-test-consumer>
-			</umb-controller-host-test>`
+				<umb-controller-host-initializer-consumer></umb-controller-host-initializer-consumer>
+			</umb-controller-host-initializer>`
 		);
 		consumer = element.getElementsByTagName(
-			'umb-controller-host-test-consumer'
+			'umb-controller-host-initializer-consumer'
 		)[0] as UmbControllerHostTestConsumerElement;
 	});
 
 	it('element is defined with its own instance', () => {
-		expect(element).to.be.instanceOf(UmbControllerHostTestElement);
+		expect(element).to.be.instanceOf(UmbControllerHostInitializerElement);
 	});
 
 	it('provides the context', () => {