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

**URL:** <https://discourse.elm-lang.org/t/trying-to-get-hold-of-webcomponent-dom-node-in-a-port-subscribe-on-javascript-called-from-update/3941>\
**Category:** Learn\
**Created:** [July 5, 2019, 6:57pm UTC](https://discourse.elm-lang.org/t/trying-to-get-hold-of-webcomponent-dom-node-in-a-port-subscribe-on-javascript-called-from-update/3941 "2019-07-05T18:57:23Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![hkgumbs](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/hkgumbs/32/1251_2.png) [@hkgumbs](https://discourse.elm-lang.org/u/hkgumbs)\
**Post date:** [July 6, 2019, 11:32pm UTC](https://discourse.elm-lang.org/t/trying-to-get-hold-of-webcomponent-dom-node-in-a-port-subscribe-on-javascript-called-from-update/3941/2 "2019-07-06T23:32:12Z")

</div>

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?](https://discourse.elm-lang.org/t/when-is-cmd-actually-processed/1008/2):
>
> 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…

---

_[View the full topic](https://discourse.elm-lang.org/t/trying-to-get-hold-of-webcomponent-dom-node-in-a-port-subscribe-on-javascript-called-from-update/3941)._