Custom elements in App Dashboard pages

Ask the community
, ,
1

I created a custom app with a Dashboard Page which needs a custom HTML element to work.
When previewing the dashboard page in Wix Blocks everything works correctly, but once the app is installed and I navigate to its dashboard page, the custom element is not showing up, as if the js file containing its definition is not being loaded.

I tried adding the file to both Wix Blocks and Wix Studio public files but nothing seems to be working.

Is there a fix or workaround for this?

2

Can you share the code? Any error message on the console?

3

I have the same problem. I’m trying to create a simple Custom Element and add it to the Dashboard page. While previewing it in the Blocks Editor Preview, the component loads and works fine, but after it’s built and installed on the page, the Dashboard doesn’t load the Custom Element.

My custom element code:

class SceneManager extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        const shadow = this.attachShadow({ mode: "open" });

        const wrapper = document.createElement("div");
        wrapper.setAttribute("class", "wrapper");

        const info = document.createElement("div");
        info.setAttribute("class", "info");
        info.textContent = 'Hello!';

        const text = this.getAttribute("data-text");
        info.textContent = text;

        const style = document.createElement("style");
        console.log(style.isConnected);

        style.textContent = `
        .wrapper * {
          box-sizing: border-box;
        }
        .wrapper {
          position: relative;
          background: purple;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
        }

        .info {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100px;
          height: 100px;
          padding: 5px;
          border-radius: 50px;
          font-size: 1rem;
          background: yellow;
          cursor: pointer;
        }
      `;

        shadow.appendChild(style);
        shadow.appendChild(wrapper);
        wrapper.appendChild(info);

        let clicks = 0;
        info.addEventListener('click', () => {
            info.textContent = ++clicks;
        })
    }
}

customElements.define("scene-manager", SceneManager);

Dashboard page code:

$w.onReady(function () {
    $w('#myCustomElement').setAttribute('data-text', 'Click here');
});

Please, let me know are there any ideas how to solve this issue.
Thanks.

4

This sounds like it may be a bug, best place to report this is customer care: Contact Wix

5

Also, question, does this bug still occur if you use it from a normal page? Does it only occur on dashboard pages?