Setting cell-output-ipywidget-background from an anywidget

[ManonMarchand]

Hi here,

I'd like to create a widget with a transparent background, and followed #11423 solution. A minimal example looks like this:

import anywidget

class DivWidget(anywidget.AnyWidget):
    _esm = """
    function render({ model, el }) {
      let myDiv = document.createElement("div");
      myDiv.classList.add("my-div");
      myDiv.style.height = '200px';
      el.appendChild(myDiv);
    }
	export default { render };
    """
    _css="""
    .my-div { background-color: transparent; }
    .cell-output-ipywidget { background-color: transparent; }
    """

my_div = DivWidget()
my_div

Executed in a cell and with anywidget installed.

The output is a white div. And when inspecting the css I see this:

.cell-output-ipywidget-background {
    background: transparent;
}
<style>
.cell-output-ipywidget-background {
    background: white!important;
}

What did I do wrong?

EDIT: looks related to #7161

[superstar54]

Hi @ManonMarchand, may I ask how you inspect the CSS? I also want to debug my anywidget inside VSCode, but I can't find a way to inspect the element and show the console outputs.

[ManonMarchand]

Sure, you use the Developer: Open Webview Developer Tools from the command palette

[superstar54]

Thanks! It works great!

[billti]

I've just been wrestling with this. This PR may be of interest to you: microsoft/qsharp#2120

[ManonMarchand]

Ahah yes, we could do a similar hack while waiting for a better solution ^^
Thanks!