Trying to get hold of webcomponent dom node in a port subscribe (on javascript) called from update

I have a third party web component that I am initializing from my view function, but only when the state is Loaded (List Todo). I have setup a port to pass the data (List Todo) to javascript and then in the port subscribe, I am setting up the data to be rendered by the web component. I trigger the port when the fetchTodos returns and then GotTodos cmd is called (in the update function).

Now, in the javascript side, when I try to access the web component, it is still not available in the DOM, since elm’s virtual dom has not yet updated it in the real DOM by this time. How do I tackle this issue?

I think the trick is to wrap any JS ports that touch the DOM inside requestAnimationFrame. So if you pass an id or some other selector through the port, then you should be able to grab the DOM node inside the requestAnimationFrame callback. Here’s the original post where I learned that trick:

If you are using a web component, I would suggest using it as a custom element, then this issue does not exist. :slight_smile:
Also you do not need any ports to talk to the Javascript side.
A nice example/guide: