Custom Elements Rendering Twice - Causes Duplicate Iframe Load

Ask the community
,
1

Question:
Custom Elements Rendering Twice - Causes Duplicate Iframe Load

Product:
Wix Velo (Custom Elements / Custom Code)

What are you trying to achieve:
I’m trying to create a custom element that embeds a simple iframe and prints “hello” once when the custom element is rendered. However, I’ve noticed that the custom element is being rendered twice, causing the iframe to load twice, which is problematic for performance and proper functionality.

What have you already tried:
To reproduce the issue:

  1. Create a blank page in Wix.
  2. Define a custom element with the following simplified script (all project-specific code removed for clarity):
class MyList extends HTMLElement {
  constructor() {
    super();
    console.log("hello");
    const iframe = document.createElement('iframe');
    iframe.src = 'https://example.com';
    this.appendChild(iframe);
  }
}

customElements.define('list-custom-element', MyList);
  • This script should log “hello” once and append an iframe.
  • However, on rendering the custom element, the console prints “hello” twice, and the iframe is loaded twice.

Additional information:
Since I’m using iframes in my actual project, this behavior is causing multiple iframe loads, which leads to performance issues and unwanted side effects (like triggering the iframe twice).

Could you please advise on why the custom element is being rendered twice and how to prevent this behavior?

2

Hi, Teoman_Academy !!

I personally don’t have a clear memory of experiencing this issue with custom elements or iframes, but it might be related to what’s written in this article. Wix has officially acknowledged a problem where rendering happens twice, leading to issues like inserting data into collections twice. This has been a known issue for a long time as a trade-off for improving site loading speeds. I’m not sure if this problem affects custom elements or iframes, but I believe the content of this article is important, so I’m sharing it with you. :thinking:

3

Thanks for sharing that article!

It mentions a workaround similar to an environment check like this:

async function getData() {
  const results = await wixData.query("myCollection").find();
  if (wixWindowFrontend.rendering.env == "backend") {
    wixWindowFrontend.warmupData.set("myWarmupData", results.items);
    wixWindowFrontend.warmupData.set("myWarmupMessage", "Rendering in the backend.");
  }
  return results;
}

However, when you place a custom element on the page, it allows you to pick a Velo file that contains code similar to what’s described in the main post. The issue is that I don’t have control to check the environment, and this code gets called twice, leading to significant page flickering.

I’m not sure how to notify Wix developers about this, but it’s definitely a major issue, especially for high-traffic websites.

4

Please move the initialization process into the connectedCallback method. :thinking:

5

@onemoretime
Yeah, I tried that, even I tried to add static properties to obverse state and don’t run the connectedCallback event twice, but it destroys entire component and re-creates again, could not prevent double initialization :confused:

6

I see. :thinking: In this case, I think the best approach is to follow the article published by Wix and conduct the simplest experiment to verify the issue again. Let’s check one more time if the same problem occurs. Also, try verifying whether the issue can be reproduced in other browsers as well. If the same problem persists, I recommend reaching out to Wix support or contacting the community manager in this forum for further assistance.

7

Got it, yeah I definitely tried lot’s of different variations, I will probably reach their developer support.

8

I’m sorry. :smiling_face_with_tear: When I ran the code you provided in my environment (Mac, Wix Studio, Google Chrome), “hello” was only displayed once in the console, and I couldn’t reproduce the issue. If it’s just about reducing screen flickering, it might be possible to address it by delaying the timing of creating elements or toggling visibility, but none of these are fundamental solutions, so it would be better to consult with the developers. If you find a solution after inquiring, sharing it as a continuation of this topic would contribute to the development of the community. :raised_hands:

9

Did you add it to your wix page or just regular HTML?

If you want to re-create:

  • create an empty wix page
  • add a custom element
  • create a velo file (.js) that creates custom element
  • Pick velo file from Wix UI that will create custom element
  • Publish page
  • Observe page console.logs twice.

I already opened a support ticket with them, they are working on it.

10

Issue was demystified. A browser extension (LastPass) was causing it.
When I disable it, issue was gone.

1 Like
11

I’m glad to hear that, as a Wix user, it wasn’t a Wix issue after all. :wink: You really put in a lot of effort into investigating the problem—great job! Thank you for sharing the solution as well. In my experience with Wix, I’ve also encountered various issues, and most of the time, it turns out to be either a mistake in my own code, compatibility problems with installed apps, or, as in this case, an issue with browser extensions. I believe that sharing this awareness among both Wix developers and users of their sites could help reduce these problems. If I come across other users experiencing similar issues, I’ll be sure to share the solution you provided. :+1: