Embedding json item inside a shadow dom

Hi, is there a way where I can use bokeh embed_item on javascript in a shadow dom element?
Right now, from what I understand is that the embed_item uses document.getElementByID which makes it throw an error, since the element that I want the graph to be embedded in is inside a shadow dom.

I’m using lit element and nodejs, thanks!

You can attempt to use add_document_standalone or add_document_from_session directly - they accept an instance of a DOM element.

embed_item() is indeed incompatible with shadow DOM, though that can be fixed easily. Assuming that you have to work with JSON serialized bokeh objects, then you can replicate what underlying implementation does with:

const doc = Document.from_json(JSON.parse(...))
await add_document_standalone(doc, target_element, [])

where target_element is a DOM element reference under your web component’s shadow DOM.

Thanks for the solution, it worked. But the box select tool is anchored at the upper left side of the graph. See attached file.

Also, the tools aren’t showing.

PS. Is there a way to plot an image with a base64 string? Thanks!
PPS. Is there bokeh events in the bokehjs 2.0.1 npm package?

@alfonsogab Would it be possible to get a minimal complete example from you? One of the other core devs @mateusz is working on making improvements shadow DOM integration. Those might be a bit more medium-term but it you can provide a test script to work with now hey might be able to figure out an immediate workaround for what you are seeing above.

Hi @Bryan, sorry I may not be able to give a minimal example working. But I just made the app from js and without using python and the output is the same. I tried it with reactjs and it works although when I use nodejs it does not.