Razor Panel Structure and Syntax

// MyHud.razor
@inherits PanelComponent

<root>
    <div class="health-bar">
        <div class="fill" style="width: @(HealthPercent)%"></div>
    </div>
    <label>@PlayerName</label>
</root>

@code {
    [Property] public float HealthPercent { get; set; }
    [Property] public string PlayerName { get; set; }
}

Code/
  UI/
    MyHud.razor        // Panel markup
    MyHud.razor.scss   // Auto-linked stylesheet
    HealthBar.razor    // Child panel

<root>
    <div class="container">
        <label>Health: @Health</label>
    </div>
</root>

// HealthBar.razor
@inherits Panel

<root>
    <div class="bar">
        <div class="fill" style="width: @(Percent)%"></div>
    </div>
    <label>@Label</label>
</root>

@code {
    public float Percent { get; set; }
    public string Label { get; set; }
}

// MyHud.razor
@inherits PanelComponent

<root>
    <HealthBar Percent="@Health" Label="@"HP"" />
</root>

<root>
    @if (IsAlive)
    {
        <div class="hud">
            <label>Health: @Health</label>
        </div>
    }
    else
    {
        <div class="death-screen">
            <label>You Died</label>
            <button @onclick="@Respawn">Respawn</button>
        </div>
    }
</root>

<root>
    <div class="inventory">
        @foreach (var item in InventoryItems)
        {
            <div class="slot" @onclick="@(() => SelectItem(item))">
                
                <label>@item.Name</label>
            </div>
        }
    </div>
</root>