Issue with Velo Web Component

Ask the community
, ,
1

Question:

I am having an issue with a custom element I am trying to create. I was creating a timeline web component and I had it rendering correctly a couple of weeks ago. When I revisited it yesterday, it was not displaying at all in the editor or preview mode. To troubleshoot I created a simpler web component and tested it off of my local file system in the browser to make sure the code itself was working and it worked fine. I added that code to a Velo file, inserted a custom element, and referenced that Velo file in the Wix GUI custom element settings, but it does not display in the editor or preview mode. When I check dev tools on the preview page my custom element is added to the DOM and to the HTML tree, but it does not contain any children elements. Checking the network tab in Dev Tools tells me that a 404 error is being returned when requesting the Velo file. As far as I can tell this is a more recent issue as my web components were rendering correctly a couple weeks ago.

Here is my code in the Velo file:

const template = document.createElement("template");
template.innerHTML = `<h1>Test</h1>`;

class Timeline extends HTMLElement {
    constructor() {
        super();
        const shadow = this.attachShadow({ mode: "open" });
        shadow.appendChild( template.content );
    }
}

customElements.define("time-line", Timeline);

Product:
Wix Editor