Render order in components

[yukkop]

Steps To Reproduce run this code:

#[allow(unused_imports)]
use log::{debug, error, info, trace, warn};
use yew::prelude::*;

#[function_component(PageWithTable)]
pub fn page_with_table() -> Html {
    let paginator = html!(
                <div>
                    <button onclick={Callback::from(move |_| { })}>
                        {">>"}
                    </button>
                </div>
            );
            html!(
                <div style="margin-top: 20px; width:auto; align-items: center; display: flex; flex-direction: column;">
                    {paginator.to_owned()}
                    <TableBlock></TableBlock>
                    {paginator}
                </div>
            )
}

#[function_component(TableBlock)]
pub fn table_block() -> Html {
    html!(
        <div id="table">
            <div>{"table-block"}</div>
        </div>
    )
}

fn main() {
    yew::Renderer::<PageWithTable>::new().render();
}

Expected behavior table between divs with buttons

Actual behavior Both of the divs under the table

Screenshots

Environment:

• Yew version: yew = { version = "0.20", features = ["csr"] }
• Rust version: 1.72.0-nightly (37998ab50 2023-06-11)
• Target: wasm32-unknown-unknown
• Build tool: trunk
• OS, if relevant: Linux yukkop-hplaptop15seq2xxx 6.1.31-2-MANJARO #1 SMP PREEMPT_DYNAMIC Sun Jun 4 12:31:46 UTC 2023 x86_64 GNU/Linux

[yukkop]

One workaround is to wrap {paginator}s in divs

html!(
    <div style="margin-top: 20px; width:auto; align-items: center; display: flex; flex-direction: column;">
        <div>
            {paginator.to_owned()}
        </div>
        <TableBlock></TableBlock>
        <div>
            {paginator}
        </div>
    </div>
)