I would like to render my object as HTML inside jupyter notebook, and my HTML needs to be interactive, using JavaScript to manipulate divs and the like.
On a normal HTML page that would work by simply having IDs for the nodes I need to manipulate with Javascript, but for embedding in a notebook, each HTML has to have its own set of unique ids. More generally, all the names could clash: HTML class names and ids.
What is a standard/recommended way to make this work? What ids and classes does Ipython use?
OK, I think I solved this by actually prefixing all ids and classes in the HTML with a random prefix and making the JavaScript functions use that prefix. Not pretty but works.
The Notebook and/or JupyterLab docs could list which DOM IDs are reserved.
https://ipywidgets.readthedocs.io/en/latest/migration_guides.html has info on how to depend on jupyter-widgets/@base
In quickly reviewing https://github.com/jupyter-widgets/ipywidgets , I wasn’t able to determine whether or how they avoid using reserved DOM IDs.
1 Like