I create a component named NavItem and modified the apps MainMenu. The base class is now SuitComponentBase. It contains the CssClass() and ChildCssClass() methods. The CssClass() is placed on the outer container element and supplies the components name to the CssClass list. The ChildCssClass() method has these code parmaeters in them. The double dash is the code for a parent child tied modifier. The source component is the parent MainMenu and the target is the child NavItem so it will expand out to MainMenu—Navitem. Inside of NavItem, we have defined the A element statement as a part named A. So, the [A]px3 will be added to the class list of the A statement inside of NavItem.

These functions allow us to easily create CssClass names that comply with the naming standards. These standards make it very clear what and where each Css filter definition is used. The NavItem class list will have:

NavItem MainMenu—NavItem px-3

The a element inside of NavDiv has a class A and a class named NavItem-A. All parts automatically create a Css class name with the name of the component and the part. If you wanted to add the same modifier to the A part as on the div you could code [A]—. To create a modifier with a different name you could add [A]—X. The result would be:

MainMenu—Navitem-A

whatever follows the second dash is added to the end.

In the NavItem source you will see that we created an instance of SuitComponentPart with the part name of A in the constructor. You will see that on the A statement we call @CssClass(A) to write out the class names. Each part instance has its own class names list. Class parameters with a part name prefix, get added to a part list and those without get added to the container class list.

Creating component parts

@inherits SuitComponentBase

<div class="@CssClass()">
    <div class="top-row ps-3 navbar navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="">@AppDomain.CurrentDomain.FriendlyName.Replace(".Client", "")</a>
        </div>
    </div>

    <input type="checkbox" title="Navigation menu" class="navbar-toggler" />
    <div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">

        <NavFlexMenu>
            <NavItem Class=@ChildCssClass("-- [A]px-3 px-3") Title="Home" SvgIcon="Blazicons.BootstrapIcon.HouseDoorFill" Href="">
            </NavItem>
            <NavItem Class=@ChildCssClass("-- [A]px-3 px-3") Title="Counter" SvgIcon="Blazicons.BootstrapIcon.PlusSquareFill" Href="counter">
            </NavItem>
            <NavItem Class=@ChildCssClass("-- [A]px-3 px-3") Title="Weather" SvgIcon="Blazicons.BootstrapIcon.ListNested" Href="Weather">
            </NavItem>
        </NavFlexMenu>
    </div>
</div>

@code {

}
@inherits SuitComponentBase
<div class="@CssClass()">
    <A Class="@CssClass(A)" Href="@Href"  Title="@Title" SvgIcon="@SvgIcon">
        @if (ChildContent is not null )
        {
            @ChildContent;
        }
    </A>
</div>
@code {

    [Parameter]
    public RenderFragment? ChildContent { get; set; }
    [Parameter]
    public SvgIcon? SvgIcon { get; set; }
    [Parameter]
    public string? Href { get; set; }
    [Parameter]
    public string? Title { get; set; }
    private SuitComponentPart? A;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        A = CreateComponentPart("A");
    }
}