diff --git a/apps/workflowengine/src/components/Check.vue b/apps/workflowengine/src/components/Check.vue
index f560303b360..ce64d859139 100644
--- a/apps/workflowengine/src/components/Check.vue
+++ b/apps/workflowengine/src/components/Check.vue
@@ -19,8 +19,18 @@
 			:clearable="false"
 			:placeholder="t('workflowengine', 'Select a comparator')"
 			@input="updateCheck" />
+		<component :is="currentElement"
+			v-if="currentElement"
+			ref="checkComponent"
+			:disabled="!currentOption"
+			:check="check"
+			:model-value="check.value"
+			class="option"
+			@update:model-value="updateCheck"
+			@valid="(valid=true) && validate()"
+			@invalid="!(valid=false) && validate()" />
 		<component :is="currentOption.component"
-			v-if="currentOperator && currentComponent"
+			v-else-if="currentOperator && currentComponent"
 			v-model="check.value"
 			:disabled="!currentOption"
 			:check="check"
@@ -52,7 +62,6 @@ import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 
 import CloseIcon from 'vue-material-design-icons/Close.vue'
-
 import ClickOutside from 'vue-click-outside'
 
 export default {
@@ -99,6 +108,12 @@ export default {
 			}
 			return operators
 		},
+		currentElement() {
+			if (!this.check.class) {
+				return false
+			}
+			return this.checks[this.check.class].element
+		},
 		currentComponent() {
 			if (!this.currentOption) { return [] }
 			return this.checks[this.currentOption.class].component
@@ -120,6 +135,15 @@ export default {
 		this.currentOption = this.checks[this.check.class]
 		this.currentOperator = this.operators.find((operator) => operator.operator === this.check.operator)
 
+		if (this.currentElement) {
+			console.error(this.$refs)
+			this.$refs.checkComponent.value = this.currentOption
+		} else if (this.currentOption?.component) {
+			// keeping this in an else for apps that try to be backwards compatible and may ship both
+			// to be removed in 03/2028
+			console.warn('Developer warning: `CheckPlugin.options` is deprecated. Use `CheckPlugin.element` instead.')
+		}
+
 		if (this.check.class === null) {
 			this.$nextTick(() => this.$refs.checkSelector.$el.focus())
 		}
@@ -141,11 +165,14 @@ export default {
 			this.check.invalid = !this.valid
 			this.$emit('validate', this.valid)
 		},
-		updateCheck() {
+		updateCheck(event) {
 			const matchingOperator = this.operators.findIndex((operator) => this.check.operator === operator.operator)
 			if (this.check.class !== this.currentOption.class || matchingOperator === -1) {
 				this.currentOperator = this.operators[0]
 			}
+			if (event?.detail) {
+				this.check.value = event.detail[0]
+			}
 			// eslint-disable-next-line vue/no-mutating-props
 			this.check.class = this.currentOption.class
 			// eslint-disable-next-line vue/no-mutating-props
diff --git a/apps/workflowengine/src/workflowengine.js b/apps/workflowengine/src/workflowengine.js
index 00612ee0478..5a99ac54ef2 100644
--- a/apps/workflowengine/src/workflowengine.js
+++ b/apps/workflowengine/src/workflowengine.js
@@ -15,12 +15,20 @@ import ShippedChecks from './components/Checks/index.js'
  * @typedef {object} CheckPlugin
  * @property {string} class - The PHP class name of the check
  * @property {Comparison[]} operators - A list of possible comparison operations running on the check
- * @property {Vue} component - A vue component to handle the rendering of options
+ * @property {Vue} component - Deprecated: **Use `element` instead**
+ *
+ *  A vue component to handle the rendering of options.
  *  The component should handle the v-model directive properly,
  *  so it needs a value property to receive data and emit an input
- *  event once the data has changed
+ *  event once the data has changed.
+ *
+ *  Will be removed in 03/2028.
  * @property {Function} placeholder - Return a placeholder of no custom component is used
  * @property {Function} validate - validate a check if no custom component is used
+ * @property {string} [element] - A web component id as used in window.customElements.define()`.
+ *  It is expected that the ID is prefixed with the app namespace, e.g. oca-myapp-flow_do_this_operation
+ *  It has to emit the `update:model-value` event when a value was changed.
+ *  The `model-value` property will be set initially with the rule operation value.
  */
 
 /**