Conditional "open" attribute on dialog element in razor component

Question

I am trying simply to toggle the visibility of my <dialog> element to <dialog open>. I found plenty of articles that will generate <dialog open="open"> but this doesn't work.

I am running ASP.NET Core v.7.0

I tried the enclosed code and other variant unsuccessfully.

<dialog class="dialog" @(paneOpen ? open : "")>
    <form>
    Content
    </form>
</dialog> 

@code {
    public bool paneOpen = true;
}

Answer 1

Is it what you want?

<dialog class="dialog" open=@paneOpen>
    <form>
        Content
    </form>
</dialog>

<button class="btn btn-primary" @onclick="Open">Open</button>

<button class="btn btn-primary" @onclick="Close">Close</button>
@code {

    public bool paneOpen = true;

    private void Open()
    {
        paneOpen = true;
    }
    private void Close()
    {
        paneOpen = false;
    }