diff --git a/package-lock.json b/package-lock.json
index 4d146c96..95cc8da4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "@nextcloud/l10n": "^3.1.0",
         "@nextcloud/vue": "8.22.0",
+        "@vue/web-component-wrapper": "^1.3.0",
         "vue": "^2.7.16"
       },
       "devDependencies": {
@@ -3677,6 +3678,11 @@
         }
       }
     },
+    "node_modules/@vue/web-component-wrapper": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
+      "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA=="
+    },
     "node_modules/@vueuse/components": {
       "version": "11.3.0",
       "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-11.3.0.tgz",
diff --git a/package.json b/package.json
index 08093dbf..5e1ed15c 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
   "dependencies": {
     "@nextcloud/l10n": "^3.1.0",
     "@nextcloud/vue": "8.22.0",
+    "@vue/web-component-wrapper": "^1.3.0",
     "vue": "^2.7.16"
   },
   "browserslist": [
diff --git a/src/Tag.vue b/src/Tag.vue
index aa3bb8e0..a4bb7a73 100644
--- a/src/Tag.vue
+++ b/src/Tag.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<NcSelectTags :value="integerValue" :multiple="false" @input="emitInput" />
+	<NcSelectTags v-model="integerValue" :multiple="false" @input="emitInput" />
 </template>
 
 <script>
@@ -14,19 +14,21 @@ export default {
 	name: 'Tag',
 	components: { NcSelectTags },
 	props: {
-		value: {
+		modelValue: {
 			type: String,
 			default: '',
 		},
 	},
+	emits: ['update:model-value'],
 	computed: {
 		integerValue() {
-			return parseInt(this.value)
+			const val = parseInt(this.modelValue)
+			return isNaN(val) ? -1 : val
 		},
 	},
 	methods: {
 		emitInput(value) {
-			this.$emit('input', '' + value)
+			this.$emit('update:model-value', '' + value)
 		},
 	},
 }
diff --git a/src/main.js b/src/main.js
index 9b75f496..7999cf58 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,13 +3,26 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import wrap from '@vue/web-component-wrapper'
+import Vue from 'vue'
+
 import Tag from './Tag.vue'
 
+const AutoTaggerComponent = wrap(Vue, Tag)
+const customElementId = 'oca-files_automatedtagging-operation-tag'
+
+window.customElements.define(customElementId, AutoTaggerComponent)
+
+// In Vue 2, wrap doesn't support disabling shadow :(
+// Disable with a hack
+Object.defineProperty(AutoTaggerComponent.prototype, 'attachShadow', { value() { return this } })
+Object.defineProperty(AutoTaggerComponent.prototype, 'shadowRoot', { get() { return this } })
+
 window.OCA.WorkflowEngine.registerOperator({
 	id: 'OCA\\FilesAutomatedTagging\\Operation',
 	name: t('files_automatedtagging', 'Tag a file'),
 	description: t('files_automatedtagging'),
 	color: 'var(--color-success)',
 	operation: '',
-	options: Tag,
+	element: customElementId,
 })