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

[praburajan]

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?

[hkgumbs]

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:

When is `Cmd` actually processed?

The exact sequence is something like this: update returns model and a batch of commands an animation-frame is requested with the diffing and rendering of the view as its callback commands and subscriptions are “distributed” to their effect managers This ordering has an interesting property: if a command (like an HTTP request) doesn’t care about the view being rendered first, it won’t “wait” for that to happen. However, if a command (like Dom.focus) does care, it can wait for the view to be r…

[Atlewee]

If you are using a web component, I would suggest using it as a custom element, then this issue does not exist.
Also you do not need any ports to talk to the Javascript side.
A nice example/guide:
http://codeloveandboards.com/blog/2018/09/09/elm-and-web-components/