After switching from `CanvasBasedWindow` to `Compo...

# compose-web

[pierbezuhoff]

After switching from CanvasBasedWindow to ComposeViewport i found that after pressing Tab the canvas becomes focused and gains a distracting white outline (on chrome). Is there a way to apply CSS to the canvas? It's under shadow-root so normal stylesheets don't affect it.

[Vidmantas Kerbelis]

Previously you could just add this to the `style.css`:

canvas {
  outline: none;
}

From the latest Compose version, the <canvas> is now part of a #shadow-root, and it does not directly get all of the CSS styling, unless I just don't know how to.
I found a workaround for this, which is:

ComposeViewport { 
  LaunchedEffect(Unit) {
    main.shadowRoot?.let { shadowRoot ->
      val style = document.createElement("style") as HTMLStyleElement
      style.textContent = """
        canvas {
           outline: none;
        }
      """.trimIndent()
      shadowRoot.appendChild(style)
    }
  }
}

This appends the canvas style in the shadowRoot once it is created, and removes the focus and the outline

[Oleksandr Karpovich [JB]]

Thanks for reporting this.

Going to be fixed in 1.10.0 - https://youtrack.jetbrains.com/issue/CMP-9040

[Rok Oblak]

Maybe related?
https://kotlinlang.slack.com/archives/C01F2HV7868/p1758801882126079

[Oleksandr Karpovich [JB]]

@Rok Oblak replied in your thread

[Alex Styl]

@Vidmantas Kerbelis what is 'main' in your code? (main.shadowRoot)

[Vidmantas Kerbelis]

@Alex Styl The container that you use for the ComposeViewport,

val main = document.body!!.getElementsByTagName("main")[0]!!
ComposeViewport(main) { }

Sorry, quickly typed the snippet up, assumed that this part was implicitly evident

[Alex Styl]

Thanks that worked. I'm using the default ComposeTarget id so in my case I had to use:

val composeTarget = document.getElementById("ComposeTarget") ?: error("No ComposeTarget")

        ComposeViewport(composeTarget) {
            LaunchedEffect(Unit) {
                composeTarget.shadowRoot?.let { shadowRoot ->
                    val style = document.createElement("style") as HTMLStyleElement
                    style.textContent = """
                            canvas {
                               outline: none;
                            }
                          """.trimIndent()
                    shadowRoot.appendChild(style)
                }
            }