[Blazor] How to support both one-way (from parent to child) and two-way bindings at the same time

[FLAMESpl]

I have troubles implementing my blazor component, because whenever it is rendered changes it has made to own parameters are overwritten by parent. Why it is happening and why I should not mutate own [Parameter] properties have been described in:

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/data-binding?view=aspnetcore-8.0#bind-across-more-than-two-components

It provides two notable examples:

• no binding - value from property InitiallyExpanded is assigned in OnInitialized() lifecycle method so further rerenders do not mess with the state. Downside is that it cannot be modified from the outside.
• two way binding - value is rather consumed directly from [Parameter] property, but it is never assigned to. Instead, child component raises an event blindly believing that parent has made a two-way binding that will update parameter from outside.

Obviously second example is wrong, because I cannot expect that consumers will be always using two-way binding.
What is the correct pattern for handling component parameters that might change from the inside, react to changes from the outside and allow parnets to set init only values at the same time?

I am working on a tab set component and so far have following code:

-- Tabs.razor

<CascadingValue Value="this">
    @ChildContent
</CascadingValue>

<br style="margin: 0 200px; width: 100%"/>

@currentItem?.ChildContent

@code {

    private readonly List<TabsItem> items = [];
    private TabsItem? currentItem;

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    public async Task AddItem(TabsItem item)
    {
        if (!items.Contains(item))
        {
            items.Add(item);

            if (item.Selected)
                await SelectItem(item);
        }
    }

    public void RemoveItem(TabsItem item)
    {
        items.Remove(item);

        if (ReferenceEquals(currentItem, item))
            currentItem = null;

        StateHasChanged();
    }

    public async Task SelectItem(TabsItem item)
    {
        if (items.Contains(item))
        {
            Console.WriteLine($"Selecting {item.Name}");

            currentItem = item;

            foreach (var itemToDeselect in items.Where(other => !ReferenceEquals(other, item)))
                await itemToDeselect.Deselect();
        }
    }
}

-- TabsItem.razor

@implements IDisposable

<div style="@GetStyle()" @onclick="HandleClick">
    @Name - <span style="color: palevioletred">@Selected</span>
</div>

@code {

    [CascadingParameter]
    private Tabs? Container { get; set; } = null;

    [Parameter]
    public string Name { get; set; } = string.Empty;

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public bool Selected { get; set; }

    [Parameter]
    public EventCallback<bool> SelectedChanged { get; set; }

    public async Task Deselect()
    {
        Console.WriteLine($"Deselecting {Name}");
        await SelectedChanged.InvokeAsync(false);
    }

    public void Dispose()
    {
        Container?.RemoveItem(this);
    }

    public override async Task SetParametersAsync(ParameterView parameters)
    {
        Console.WriteLine($"Hitting {nameof(SetParametersAsync)} for {Name}");

        if (parameters.TryGetValue<bool>(nameof(Selected), out var isSelectedNow) &&
            isSelectedNow && isSelectedNow != Selected)
        {
            Console.WriteLine($"Selecting {Name} from {nameof(SetParametersAsync)}");
            await OnSelected();
        }

        await base.SetParametersAsync(parameters);
    }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        if (Container is not null)
        {
            await Container.AddItem(this);
        }
        else
        {
            Console.WriteLine($"Container was null for {Name}");
        }
    }

    private async Task HandleClick()
    {
        if (!Selected)
        {
            Console.WriteLine($"Handling click on {Name}");
            await OnSelected();
            await SelectedChanged.InvokeAsync(true);
        }
        else
        {
            Console.WriteLine($"Ignoring click on {Name}");
        }
    }

    private async Task OnSelected()
    {
        if (Container is not null)
            await Container.SelectItem(this);
    }

    private string GetStyle() => $"background-color: #1b6ec2; color: white; height: 2rem; width: {Name.Length + 10}ch; text-align: center; cursor: pointer";

}

-- Home.razor

@page "/"

<PageTitle>Home</PageTitle>

<Tabs>
    <TabsItem Selected Name="Tab 1">
        <p>This is Tab 1 content</p>
    </TabsItem>
    <TabsItem Name="Tab 2">
        <p>This is Tab 2 content</p>
    </TabsItem>
</Tabs>

[FLAMESpl]

I think I have figured it out:

-- TabsItem.razor

@implements IDisposable

<div style="@GetStyle()" @onclick="HandleClick">
    @Name - <span style="color: palevioletred">@selectedInternally</span>
</div>

@code {

    private bool selectedInternally;

    [CascadingParameter]
    private Tabs? Container { get; set; } = null;

    [Parameter]
    public string Name { get; set; } = string.Empty;

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public bool Selected { get; set; }

    [Parameter]
    public EventCallback<bool> SelectedChanged { get; set; }

    public async Task Deselect()
    {
        if (selectedInternally)
        {
            Console.WriteLine($"Deselecting {Name}");
            selectedInternally = false;
            await SelectedChanged.InvokeAsync(false);
        }
    }

    public void Dispose()
    {
        Container?.RemoveItem(this);
    }

    public override async Task SetParametersAsync(ParameterView parameters)
    {
        var hasSelectionChanged = parameters.TryGetValue<bool>(nameof(Selected), out var isSelectedNow) && isSelectedNow != Selected;

        await base.SetParametersAsync(parameters);

        Console.WriteLine($"Hitting {nameof(SetParametersAsync)} for {Name}");

        if (hasSelectionChanged)
        {
            selectedInternally = isSelectedNow;
            Console.WriteLine($"Toggling selection of {Name} from {nameof(SetParametersAsync)} to {selectedInternally}");
            await OnSelectionChange();
        }
    }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        selectedInternally = Selected;

        if (Container is not null)
        {
            await Container.AddItem(this);
        }
        else
        {
            Console.WriteLine($"Container was null for {Name}");
        }
    }

    private async Task HandleClick()
    {
        if (!selectedInternally)
        {
            Console.WriteLine($"Handling click on {Name}");
            selectedInternally = true;
            await OnSelectionChange();
            await SelectedChanged.InvokeAsync(true);
        }
        else
        {
            Console.WriteLine($"Ignoring click on {Name}");
        }
    }

    private async Task OnSelectionChange()
    {
        if (Container is not null)
            await (selectedInternally ? Container.SelectItem(this) : Container.DeselectItem(this));
    }

    private string GetStyle() => $"background-color: #1b6ec2; color: white; height: 2rem; width: {Name.Length + 10}ch; text-align: center; cursor: pointer";

}

I wonder whether it is the cleanest solution.