I have a Vue3.2 (3.2.33) component which is perfectly working while deployed as a SPA. I tried to wrap it as a web Custom Element with a very sample wrapping:
import { defineCustomElement } from 'vue';
import TrackJoiner from '@/views/TrackJoinerView.vue'
const TrackJoinerElement = defineCustomElement({...TrackJoiner})
customElements.define('trackjoiner-element', TrackJoinerElement)
The custom element is perfectly inserted in my html page with
<trackjoiner-element/>
The problem comes with a call to my API in a setTimeout. In fact the event becomes null in the setTimeout callback, this is the Vue3 method:
methods: {
clickFile(event: Event, trackType: trackTypes) {
(this.state as ReactiveData).isLoading = true;
setTimeout(() => {
openFileAsPromise(event, trackType).then(() => {
this.updateRows();
});
});
},
While debugging I saw that event is correct before calling setTimeout(), but becomes null while calling openFileAsPromise(event, trackType) but trackType remains correct.
While running as a Vue3 SPA this code works perfectly and the event is forwarded to openFileAsPromise()