Mixing the two

HTML and widgets on one screen planned

Both vocabularies are in the crate today, and an rsx! block uses one of them. Putting both on one screen is decided and not built. This page describes the design so you can see where it is going; none of it works yet.

Today

An app picks one prelude. dioxus_compose::html::prelude::* names the HTML elements and dioxus_compose::prelude::* names the widgets, each as dioxus_elements, so a block of rsx! sees one set or the other. The widget path draws today; the HTML path is laid out and planned but not drawn (#43), and mixing builds on that bridge.

One node, one world

Every node will belong to exactly one world, decided by its element name: a widget name this crate defines is a widget, and anything else is HTML. The two meet only at placeholder nodes, so neither world has to understand the other's rules.

HTML inside a widget

An HtmlView widget will hold an HTML island. Its size comes from the Compose layout around it, and the Host lays the HTML out at that width. When the window resizes, only that island is laid out again.

rsx! {
    Column {
        fill_max_width: true,
        TopAppBar { title: "Release notes" }
        HtmlView {
            weight: 1.0,
            article { class: "notes",
                h1 { "Version 0.2" }
                p { "Screens written with HTML and CSS are drawn." }
            }
        }
    }
}

Widgets inside HTML

A widget inside HTML will be a box whose contents CSS does not know, like an image. Its natural size will be asked of the renderer during layout, with the same synchronous call that measures text, so a TextField or a DatePicker sits on a line at the size Compose gives it and the text around it flows past.

The rules across the seam

• CSS styles the HTML world only. A widget node takes the properties that place its box (position, size, margins), and its inside is drawn by the design system.
• Events follow each world. HTML hit-testing stops at a widget's box, and Compose handles what is inside it. A click on a widget inside a div reaches the widget's handler first and then bubbles to the div's onclick, as CSS event flow says.
• Scroll, focus and selection belong to the renderer in both worlds, and a field follows the same input method rules in both.
• One theme. Both worlds will use the same colour roles, with CSS variables tied to them, so a theme change reaches both in the same frame.

Status

planned The design is settled and is scheduled after the HTML path draws on screen. #59 tracks it; it builds on #43.