I’m having issues loading a custom element in a dashboard page. I know custom elements aren’t clear on how they are set up across the platform, and I assumed that Dashboard pages would be similar to the live site and not wrap custom elements in iFrames, but is this case? Or are custom elements in dashboard pages handled differently?
My main issue is the custom element loads blank, as it never even gets a chance to construct on the dashboard page. This error appears and blocks the custom element entirely:
I have no access or control over instrument.ts or the react production mins compiled by the Wix platform, so I don’t know why this error is only occuring, and breaking my page only on the Dashboard site page. In preview it works fine, but there seems to be some compilation error. The element also works fine on the live site pages.
I believe I’ve set up my Custom Element according to the constructor rules, but here is the code in case anyone catches anything that may be contributing to this problem. But again, the following code never even gets a chance to run on the dashboard page
class customSchedule extends HTMLElement {
constructor() {
super();
this.type = null;
this.activeRental = null;
this.location = {}
this.rentals = [];
this.table = null;
this.schedule = [];
this.options = {}
this.rentalCoordinateDefaults = {}
this.rentalCoordinates = {...this.rentalCoordinateDefaults}
this.style = null;
}
connectedCallback() {
const style = document.createElement('style');
style.innerHTML = STYLE;
this.appendChild(style);
this.style = style;
this.type = this.getAttribute('type');
this.rentals = JSON.parse(this.getAttribute('rentals'))
//More Dom Manipulation Functions
this.setupSchedule(this.location.startTime, this.location.endTime, this.location.numberOfBaskets);
this.setupTable();
if(this.rentals){
this.loadRentals(this.rentals)
}
}
//...functions, constant variables, etc.
customElements.define('custom-schedule', customSchedule);