Proliferation of redundant containers

[sprig]

Hello,
I recently discovered bonito and have been really enjoying the general approach. However;

When playing around with Bonito, especially considering it for various projects, I'm especially wary of past experiences with various frameworks in regard to visual layout, and particularly in browsers, where it was always a hot mess. Considering myself a non-expert in layout design, I still think it is possible to get reasonably precise layout fairly easily for a range of use cases in many scenarios, if whatever UI kit I'm using does not make it cumbersome.

In this regard, the primary hindrance IMHO to simple design is unexpected containers, especially anonymous classless ones, since every additional container is an opportunity for styling to break. This especially when mixing in other framework that rely on specific assumptions regarding their layout, and in particular to anything that uses Canvas such as WGLMakie (but likewise for Plotly and others) where sizing to parent container can break.

As a simple example, consider

using WGLMakie
using Bonito

WGLMakie.activate!(resize_to=:parent)
fullpage=CSS(
    "background"=>"Gray",
    "height"=>"100%",
    "width"=>"100%",
    "position"=>"fixed",
    "margin"=>"0",
    "padding"=>"0",
    "top"=>"0",
    "left"=>"0",
  )

## Doesn't work
App() do; scatter(rand(10),rand(10)) end
## Does work
App() do; DOM.div(scatter(rand(10),rand(10)),style=fullpage) end
## Doesn't work
App() do; DOM.div(Observable(scatter(rand(10),rand(10))),style=fullpage) end

In my browser this does not resize to the full height of the page, despite my expectations that it should in all three cases. This may be a bit contrived since supposedly one could/should make a specific type with overloaded jsrender to wrap the observable. However, if even frameworks that are deeply integrated with Bonito can't do this right, this is a bad sign.

I propose to reduce to a bare minimum any containers that Bonito creates beyond those that the user explicitly specifies (specifically in regards to Observables, but any other types that do not have an explicit jsrender methos). For those that are absolutely necessary, i propose to make them classed for simple styling, and to explicitly enumerate cases where they appear to reduce the element of surprise. I would happily participate in making the changes, as I really like Bonito otherwise and would find it useful - but I might need some guidance.

Is there support for this?

[sprig]

I would add to the above, it is not just that example where something specifically breaks;

I looked at the dom produced and it is littered with containers upon containers, divs with nothing in them, or nothing but a style and a script, or a span, nested deep inside what should have been user dom.