Making a Jupyter Lab widget for before/after image sliders also available in vscode-jupyter

[kolibril13]

I wrote a fully functional jupyter-splitview widget for Jupyter Lab, and I'd love to make it available in VS Code Notebooks as well.
But it seems VS Code can not load third party JavaScript.
Here is a minimal example to reproduce this problem:
The first codeblock displays the two images correctly in Jupyter Lab and in VS Code.

from IPython.core.display import HTML
from IPython.display import display

html_code = f"""
<div class="outer_layer" style="position: relative; padding-top: 300px;">
    <div class="juxtapose" data-startingposition="35%" style="height: 400px; width: 400px; top: 1%; left: 1%; position: absolute;">
        <img src="https://raw.githubusercontent.com/scikit-image/scikit-image/main/skimage/data/chelsea.png" />' <img src="https://raw.githubusercontent.com/scikit-image/scikit-image/main/skimage/data/coins.png" />'
    </div>
</div>
"""
display(HTML(html_code))

As soon as I add the third party JavaScript code for the split view slider, it does only work in Jupyter Lab, however VS Code does not show the slider:

from IPython.core.display import HTML
from IPython.display import display

html_code = f"""
<div class="outer_layer" style="position: relative; padding-top: 300px;">
    <div class="juxtapose" data-startingposition="35%" style="height: 400px; width: 400px; top: 1%; left: 1%; position: absolute;">
        <img src="https://raw.githubusercontent.com/scikit-image/scikit-image/main/skimage/data/chelsea.png" />' <img src="https://raw.githubusercontent.com/scikit-image/scikit-image/main/skimage/data/coins.png" />'
    </div>
</div>
<script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script>
<link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css" />
"""
display(HTML(html_code))

Any ideas how I can make this work?
Here is the corresponding HTML in the split view widget repo: https://github.com/kolibril13/jupyter-splitview/blob/main/jupyter_splitview/sw_cellmagic.py#L59
@DonJayamanne : Jason Grout said that you are an expert in this topic, that's why I would like to kindly ask you: Could you have a quick look on this issue?

[DonJayamanne]

@kolibril13
Thanks for trying to get this working in VS Code as well. I've tried to run this code sample and found some errors in the console window, see below

Looks like the code in setWrapperDimensions is falling over. I believe once you fix that, things should work as expected.

[kolibril13]

Thanks for having a look at this!
I'll start debugging from there.
One question: Where do I find this console window from your screenshot?
I cannot see this option to open it from the VS Code Notebook view.

[DonJayamanne]

You can access that via the command Developer: Toggle Developer Tools

[kolibril13]

Thanks for showing me!
I think I won't be able to fix this myself, but I've reported this issue again at NUKnightLab/juxtapose#178, let's hope that someone who is familiar with the juxtapose codebase can give advice on how to fix this :)
In case that no one has an idea, I might look for an alternative to juxtapose.