Make my object render as HTML in notebook: multiple outputs, javascript, node ids and classes?

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