Error with single submission with html and js that tries to manipulate the new elements

[colombod]

Describe the bug

A single submission that add html elements and then tries to manipulate them via js fails, if the submissions are in separate cells they work correctly.

This issue requires to wait for the html kernel to perform the relevant dom changes before moving to the next commands. A possible solution is to implement html as client side kernel like the javascript one

Please complete the following:

Which version of .NET Interactive are you using? (In a notebook, run the #!about magic command. ):

• OS
  • Windows 11
  • Windows 10
  • macOS
  • Linux (Please specify distro)
  • iOS
  • Android
• Browser
  • Chrome
  • Edge
  • Firefox
  • Safari
• Frontend
  • Jupyter Notebook
  • Jupyter Lab
  • nteract
  • Visual Studio Code
  • Visual Studio Code Insiders
  • Visual Studio
  • Other (please specify)

Screenshots

[housten]

omg, I just spent half a day trying to get this to work thinking I was doing something wrong.
I couldn't find much in the way of documentation. I finally found one private person's page, when I switch from Bing to Google, that shows the exact syntax above (html tag followed by a magic js block getting and setting the element), so I assume the syntax worked when that page was written 3 months ago.
Can we get this fixed? Perhaps a render wait? When I added a rest api call to the javascript before accessing the html element, then the javascript found it.
It isn't so intuitive in the notebook format to look above the code cell to see the output, as in the case of @colombod who got it to work by declaring the html, and then having the javascript in a separate cell and the natural time delay of the user triggering the javascript.