Change CSS style of external JavaScript script?

Question

Hey I am trying to change some CSS styles of an external JavaScript script (igv.js). I run this script embedded in an HTML file as suggested here.

<div id="igv_div">
<script type="module">
    import igv from "https://cdn.jsdelivr.net/npm/[email protected]/dist/igv.esm.min.js"
    const div = document.getElementById("igv_div")
    const config = {
            genome: "hg19"
    }
    const browser = await igv.createBrowser(div, config) 
</script>
</div>

I was able to change some colors globally at once using somtehing like this:

<style>
#igv_div {filter: invert(88%);}
</style>

However, nothing I try changes individual elements. When, I simply try to set the CSS style of an element in the HTML header it seems that this is completely ignored.

<style>
.igv-track-label {color: red;}
</style>

However, I can manipulate it using the selector in the browser directly, so I guess the style is hardcoded somewhere in the script itself and overrides my modified CSS. Is there a way of overriding the style of the script without changing the script itself, when running it from an HTML file?

Answer 1

Since Shadow DOM isolates the elements below it, you can't directly define them. You can change the style you want by injecting it directly into the DOM after loading Shadow DOM.

Note: The styles you want to overwrite will not be visible until the DOM is fully loaded.

<div id="igv_div">
<script type="module">
    import igv from "https://cdn.jsdelivr.net/npm/[email protected]/dist/igv.esm.min.js"
    const div = document.getElementById("igv_div")
    const config = {
            genome: "hg19"
    }
    const browser = await igv.createBrowser(div, config) 

    var style = document.createElement( 'style' )
    style.innerHTML = '.igv-track-label { color: red; }'
    div.shadowRoot.appendChild( style )
</script>

</div>

Answer 2

The igv.js is rendered via the shadow DOM, and it's styling is not part of the standard document CSS. You can create a CSSSTyleSheet object via JS, and apply it to the shadow root:

<div id="igv_div"></div>

<script type="module">
  import igv from "https://cdn.jsdelivr.net/npm/[email protected]/dist/igv.esm.min.js"
  const div = document.getElementById("igv_div")
  const config = {
    genome: "hg19"
  }
  const browser = await igv.createBrowser(div, config)

  // create style sheet
  const sheet = new CSSStyleSheet()

  // add rules to the stylesheet
  await sheet.replace(`
    .igv-track-label {
      color: red;
    }
  `)
  
  // apply stylesheet to shadow root
  div.shadowRoot.adoptedStyleSheets.push(sheet)
</script>