How to add Widget to an arbitrary HTMLElement?


I am trying to implement a custom Widget and put it on top of the Notebook widget in the main area. My current approach is to insert a new DIV element to the NotebookPanel element and give it position:absolute. I want to reuse some existing JupyterLab widgets, but from online resources I can only find ways to add them into some specific positions (left, right sidebars, main area, etc.).

I am wondering what’s the best way to add a Widget to an arbitrary HTMLElement? Some approaches I can think of:

  1. Insert the widget’s node into the new HTMLElement, but I think I will lose all data/model/event handlers associated with the widget :frowning_face:
  2. Convert the HTMLElement into an instance of Layout and then add the widget into it? If this is a promising approach, is there any tutorial/example for creating new Layouts?

Any suggestions are appreciated! Thank you in advance! :pray:


Are you trying to achieve something like this:


which was implemented in API for custom toolbars/headers in Notebook widgets by fasiha · Pull Request #9984 · jupyterlab/jupyterlab · GitHub?

If yes, see the example in this comment. If that’s useful for you, it would be a very valuable addition to the extension developement documentation (and helpful for anyone using it by ensuring that developers do not forget about this feature ;)).