Using a custom web component in a custom code block seems to be problematic

Technical Questions
1

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.

Any ideas why the DOM is being redrawn?

2

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?

3

Thanks @TimG I can give that a try. I would need to connect to the API and do a fetch and pass the data into the web component as a property, however, which may not be ideal.

This is happening on our “live” site, meaning I’m seeing the multiple renders in the DevTools console when adding console.logs when developing locally.

What’s really confusing me is that I tried this:

<script>
  console.log('AJX CUSTOM BLOCK -- START')
</script>
<c6o-hub-content-tabs></c6o-hub-content-tabs>

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.

4

@Canuckaholic do you have a link to a live page where you are using Builder? So I can investigate further.

5

I’m not sure how you are going to diagnose, but here is one: CodeZero

6

Hi @TimG …

Are you absolutely sure there’s not a possible bug in Builder core related to this? I’m looking at the source code and I see this comment on line 1340:

// TODO: use a window variable for this perhaps, e.g. bc webcomponents may be loading builder twice
// with it's and react (use rollup build to fix)
7

@TimG also see:

8

hey @TimG any more thoughts or information for me? Cheers.

9

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

10

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.