We use Lit (formerly Lit Element) web components on our site alongside using Builder. I’ve noticed, though, that if I add a web component in a custom code block inside of Builder and console.log the loading and unloading of the web component, I see the component being unloaded and loaded again multiple times for a single page load. This unloading and loading happens about 4 times.
This seems to indicate that the DOM which contains my custom code block is being redrawn multiple times, and therefore my web component is having to re-render itself multiple times. This is highly problematic for web components that do API calls in their connectedCallbacks.
Hi @Canuckaholic is this happening on your live page or only within the Editor? The editor will often re-render on a change within the app, but you should see re-render only on state changes within your live page.
If you are worried about API calls, I might recommend adding the API as a data connection within the DATA tab itself, and then you would have access to its data within state, instead of only within a component or dependent on a components render…would that use case work for you?
And in my console I see the console.log outputs for the multiple renders before I see that console.log in the script tag. I would have expected the script tag to execute before the web component tries to do its thing.
So I’m still not sure why our web components are disconnecting and re-connecting so many times. It’s happening in components that don’t even do any API calls, like our simple button component.
It is @Canuckaholic definitely possible there is a bug, if you have a screenshot of the console when you log in the custom component render that could be helpful. Or better yet if you have a deployed version of the custom component with console logs so we can see it ourselves that would be even better for me to dig into it
I’m reluctant to put any console.logs into our production web components, but this should be pretty straight forward for your engineers to reproduce by making their own Lit (aka Lit Element) web component.