diff --git a/src/Umbraco.Web.UI.Client/.storybook/preview.js b/src/Umbraco.Web.UI.Client/.storybook/preview.js
index 10c6daa7b0..84908541be 100644
--- a/src/Umbraco.Web.UI.Client/.storybook/preview.js
+++ b/src/Umbraco.Web.UI.Client/.storybook/preview.js
@@ -55,11 +55,11 @@ customElements.define('umb-storybook', UmbStoryBookElement);
 const storybookProvider = (story) => html` <umb-storybook>${story()}</umb-storybook> `;
 
 const dataTypeStoreProvider = (story) => html`
-	<umb-context-provider key=${UMB_DATA_TYPE_DETAIL_STORE_CONTEXT_TOKEN.toString()} .value=${new UmbDataTypeDetailStore()}>${story()}</umb-context-provider>
+	<umb-context-provider key=${UMB_DATA_TYPE_DETAIL_STORE_CONTEXT_TOKEN.toString()} .create=${host => new UmbDataTypeDetailStore(host)}>${story()}</umb-context-provider>
 `;
 
 const documentTypeStoreProvider = (story) => html`
-	<umb-context-provider key=${UMB_DOCUMENT_TYPE_DETAIL_STORE_CONTEXT_TOKEN.toString()} .value=${new UmbDocumentTypeDetailStore()}
+	<umb-context-provider key=${UMB_DOCUMENT_TYPE_DETAIL_STORE_CONTEXT_TOKEN.toString()} .create=${host => new UmbDocumentTypeDetailStore(host)}
 		>${story()}</umb-context-provider
 	>
 `;
diff --git a/src/Umbraco.Web.UI.Client/libs/element/context-provider.element.ts b/src/Umbraco.Web.UI.Client/libs/element/context-provider.element.ts
index 7155397b84..9d04a92ab2 100644
--- a/src/Umbraco.Web.UI.Client/libs/element/context-provider.element.ts
+++ b/src/Umbraco.Web.UI.Client/libs/element/context-provider.element.ts
@@ -1,9 +1,18 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbLitElement } from './lit-element.element';
+import type { UmbControllerHostInterface } from '@umbraco-cms/controller';
 
 @customElement('umb-context-provider')
 export class UmbContextProviderElement extends UmbLitElement {
+
+	/**
+	 * The value to provide to the context.
+	 * @required
+	 */
+	@property({ type: Object, attribute: false })
+	create?: (host:UmbControllerHostInterface) => unknown;
+
 	/**
 	 * The value to provide to the context.
 	 * @required
@@ -23,7 +32,9 @@ export class UmbContextProviderElement extends UmbLitElement {
 		if (!this.key) {
 			throw new Error('The key property is required.');
 		}
-		if (!this.value) {
+		if (this.create) {
+			this.value = this.create(this);
+		} else if (!this.value) {
 			throw new Error('The value property is required.');
 		}
 		this.provideContext(this.key, this.value);