web component after page load is getting destroyed - request

Question

I created a custom element(web component) and using webpack will render without any issues but as I include on the working page(which is a wordpress) on render will show up and at the end of the request to hole rendered element is getting destroyed. I do not get any error in console.
the component looks as it follows
import moment from "moment";
import 'moment/min/moment-with-locales'
moment.locale('de');
export class ToursEvents extends HTMLElement {
constructor() {
super();
//this.attachShadow({mode: 'closed'});
}
connectedCallback() {
this.html = this.innerHTML;
}
get data() {
return this._data;
}
set data(tours) {
let times = tours[0]
this._data = tours[0];
this.vendors = tours[1];
let div = document.createElement("div");
div.innerHTML = `
${times.reduce((acc, item) => `${acc}
<div class="bk_day tours-list__slot">
<div class="bk_date tours-list__date">${moment(item.day).format("dddd")}, ${moment(item.day).format("DD.MM.YYYY")}</div>
<ul class="tours-list__vendors">${ this.makeList(item.times) }</ul>
</div>`
, ``)}`;
this.innerHTML = div.innerHTML
//this.shadowRoot.appendChild(div);
}
makeList(times) {
let list = '';
times.map( (time) => {
const eventId = time.event_id;
const vendor = this.vendors[eventId];
let percentageFree = 0, mark = "", availability ="", workload = typeof(WORKLOAD) !== 'undefined' ? WORKLOAD : 0.8;
let tips = '';
list += '<li data-date="' + time.date + '" data-event-id="' + eventId + '" class="' + mark + '">';
list += '<div class="tours-list__time">' + moment(time.date).format('HH.mm') + ' - ' + moment(time.date).format('HH.mm') +'</div>';
if(vendor.title.includes("Discount")) {
tips += '<div><span class="discount">Spar-tipp!</span></div>';
}
list += '<div class="tours-list__title">' + tips + vendor.title + '</div>';
if(time.available_slots != 0) {
list += '<div class=""><button class=""><span class="bk_info_text">Infos/Tickets</span> <span class="icon-down"></span></button></div>'
} else {
list += '<div class="bk_info"><span>Booked</span></div>'
}
list += '</li>';
});
return list
}
showDetails() {
}
}
customElements.define('tours-events', ToursEvents);
How should I debug this issue?

Answer 1

If you run customElements.define('tours-events', class{}); in the console
and you get undefined you know (WordPress?) redirected you to another page.
If you get a DOM exception the Element IS defined
If your Element is not in the DOM (if that is what you mean with 'destroyed')
you have to step through the console-debugger to find the reason when/why it was removed.
Put a debugger; statement in your element's Constructor and take it from there.