[jupyter-book] Susceptibility to conflicting css/javascript from rich javascript objects in code output

[mmcky]

Over the past month we have had two cases of an issue that occurs when importing rich javascript objects as code-cell outputs into the website. In both cases it broke the theme rendering of the jupyter-book for both sphinx-book-theme and quantecon-book-theme.

One of the packages was: pyLDAvis

In this case the output overwrote some css and svg styles. So in quantecon-book-theme it has incomplete svg icons and changed some styles, in sphinx-book-theme it changed some code-cell styles to make the code-cells extra wide for the entire document

https://60d2cb5b8a1c969372850ccc--nervous-villani-f8256d.netlify.app/applications/working_with_text.html#topic=0&lambda=1&term=

Question:

Not a web developer, so thought I would ask the community if there is a way we can wrap these objects in a container of some kind so any styles introduced by them don't interact with the theme. I wonder how jupyter notebook handles this?

[damianavila]

I wonder how jupyter notebook handles this?

Well, you can easily break the notebook stuff when you somehow inject CSS, so I guess we are not managing it well 😉
Not sure how is the situation in JupyterLab, though...

When I needed to fix things like this, I frequently ended up asking in the upstream project to be less "aggressive" and more specific in their CCS stuff or, alternatively, forking it.

I am not a web dev either, so I might be missing new stuff that solves this problem, hopefully?

[choldgraf]

Yep usually this needs to be fixed upstream. We have had similar issues with xarray