sending messages to and from dock panel shadow root

[seanbirchall]

I've been working on creating an IDE and stumbled across this within Lumino issues, very cool, but I'm not very familiar with shadow roots.

Probably not needed, but for some more details this IDE is to the R programming language now that it has somewhat recently been compiled to WASM. I'm pretty far along already but feel like this package has some components / features I'm going to need in the future and even now.

It's easy enough for me to create an R Shiny app with hpcc-dockpanel

library(shiny)
library(bslib)

dockpanel <- function(...) {
  tag("hpcc-dockpanel", list(...))
}

my_ui <- tagList(
  dockpanel(
    style = "height:99.5vh;width:100%;padding:0px;margin:0px;gap:0px;",
    tags$div(
      id = "script.R",
      "data-label" = "script.R",
      "data-mode" = "split-left",
      "data-closable" = "true",
      style = "overflow:auto;min-width:48px;min-height:48px",
      style = "padding:0px;margin:0px;gap:0px;", 
      tags$h1("CCCC HTML Ipsum Presents"),
      tags$p("Lorem ipsum...")
    ),
    tags$div(
      id = "console",
      "data-label" = "Console",
      "data-mode" = "split-bottom",
      "data-closable" = "false",
      style = "overflow:auto;min-width:48px;min-height:48px",
      tags$h1("CCCC HTML Ipsum Presents"),
      tags$p("Lorem ipsum...")
    ),
    tags$div(
      id = "environment",
      "data-label" = "Environment",
      "data-mode" = "split-right",
      "data-closable" = "false",
      style = "overflow:auto;min-width:48px;min-height:48px",
      tags$h1("CCCC HTML Ipsum Presents"),
      tags$p("Lorem ipsum...")
    ),
    tags$div(
      id = "viewer",
      "data-label" = "Viewer",
      "data-mode" = "tab-after",
      "data-ref" = "environment",
      "data-closable" = "false",
      style = "overflow:auto;min-width:48px;min-height:48px",
      reactable(iris),
      onClick = "console.log('clicked')"
    )
  )
)

ui <- bslib::page(
  my_ui,
  includeScript(
    "https://cdn.jsdelivr.net/npm/@hpcc-js/wc-layout"
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

However what I'd like to be able to do is style the dockpanel (backgrounds, headers, tabs, handles) and programmatically click within the dockpanel (tabs). Is there some API to do that? I think I should probably just be reading up more about shadow root or just forking this repo at least for styling.