Attribute assignment with attr: is lost when component initially renders as () then as any element

[RougeEtoile]

Describe the bug
attr:* are not applied to Top Level elements rendered by components when component switches from rendering () then to any element. This can occur with <Show> if/else or match statements. This occurs in dev builds but not release builds. #[component(transparent)] also fixes the issue. I have only tested this in SSR mode with cargo-leptos.

Leptos Dependencies

leptos = { version = "0.8.12" }
wasm-bindgen = "=0.2.105"
leptos_router = { version = "0.8.9" }
leptos_meta = { version = "0.8.5" }
console_error_panic_hook = "0.1.7"
console_log = "1.0.0"
axum = "0.8.7"
tokio = { version = "1", default-features = false, features = ["rt-multi-thread", "macros"] }
leptos_axum = "0.8.6"

To Reproduce

use leptos::prelude::*;
use leptos::either::Either;

#[component]
pub fn TheBug() -> impl IntoView {
    let (show, set_show) = signal(false);
    
    Effect::new(move |_| {
        set_timeout(move || set_show.set(true), std::time::Duration::from_millis(100));
    });

    move || {
        if show.get() {
            Either::Left(view! { <div class="bugged">"I should be red"</div> })
        } else {
            Either::Right(())
        }
    }
}

#[component]
pub fn App() -> impl IntoView {
    view! {
        // Style is missing on the child div
        <TheBug attr:style="background-color: red;" />
    }
}

Next Steps

• I will make a PR
• [ x] I would like to make a PR, but need help getting started
• I want someone else to take the time to fix this
• This is a low priority for me and is just shared for your information

Additional context
Add any other context about the problem here.

[gbj]

I assume the debug vs release discrepancy is because you are using cargo-leptos (I assume) which turns on "component erasure" by default in debug mode (i.e., adds .into_any() onto every component to minimize compile times). This would be why #[component(transparent)] also works.

It's worth checking whether the same problem applies in release mode if you explicitly add .into_any() on the component. In that case, it would be an issue with AnyView forwarding its .add_any_attr() implementation onto its children.

Also worth testing: does it work consistently if show starts as true, or does it only work at first (but then fails when you go from () back to the other branch)

[RougeEtoile]

I have updated my dependencies to

leptos = { version = "0.8.14" }

It's worth checking whether the same problem applies in release mode if you explicitly add .into_any() on the component. In that case, it would be an issue with AnyView forwarding its .add_any_attr() implementation onto its children.

Confirmed the problem persists in release mode with into_any(). `

#[component]
pub fn TheBugInitTrueWithIntoAny(#[prop(into)] show: Signal<bool>) -> impl IntoView {
    view! {
        <Show when=show>
            <div class="bugged">"I should be cyan "</div>
        </Show>
    }.into_any()
}

Also worth testing: does it work consistently if show starts as true, or does it only work at first (but then fails when you go from () back to the other branch)

if Show starts as true it works the first time but subsequently fails when toggling between branches in dev mode. Works as expected in release.
#[component(transparent)] Does not fix this behavior in dev mode.

So this indicates an issue in AnyView and the add_any_attr() implementation?

[gbj]

I've investigated a bit more. This is basically a result of the hack we had to build with AddAnyViewWithAttrs to prevent the Rust compiler from dying in some kind of infinite loop on larger projects. Unfortunately it isn't really able to work through multiple layers of AnyView. The workarounds you've listed here are probably the best we can do for now (or in the foreseeable future).

[RougeEtoile]

Hey thanks for investigating this. I've been handling this by using a <TransparentShow> which is a copy of the <Show> component with #[component(transparent)] added and using that wherever I need conditional rendering. I can't find an explanation of #[component(transparent)] and its tradeoffs, but would adding it to all of the Show type components be appropriate as a general work around for everyone? I assume the cost would be that those components would no longer benefit from erasure?

[gbj]

Good idea. I've added it in #4519