New Razor syntax

[datdefboi]

I think the "killer feature" of Blazor should be the following syntax of razor controllers.

// Component.razor
<Container>
    <Header Size="12">
          <Congratulation>Jack</Congratulation>
    </Header>
</Container>

@css { // simple css, injected immediately 
    background:red;
}

@css red { // named css, injected immediately 
    ...
}

//tags is a scoped components that automatically generates tag as described below
@tag Container:Div { // inherits predefined tag
     @css{
         ...
     }

     @code{
        ...
     }
}

@tag Header:H1 {
    @id someId
    
    @onclick Clicked

    @code{

        [Parameter]
        public int Size { get; set; }
    
        void Clicked()
        {

        }

    }

    @css {
        font-size:@Size;
    }
}

@component Congratulation { // that is a regular component
    <span>Dear, @content. Thanks!</span> // directly provides content

    @css {
        background:red;
    }
}

@component BtnBase {
    <btn @onclick="OnClick">@content</btn>

    @code {

        void OnClick()
        {
        }

    }

    @css btnStyle {
        ...
    }
    @css:hover { // elements's selector
        ...
    }
    
    @tag Badge { // scoped in BtnBase
        ...
    }
    
    @component BtnRed:BtnBase { // Scoped and inherited
        @style red; // includes named css
        @css {
            ... // this css merges with or replaces parent's css, 
        }
    }
}

@component BtnBlack:BtnBase { // just inherits
    @css {
        ... // this css merges with or replaces parent's css, 
    }
}

It solves most cases of frontend development and should be implemented in future releases.
The main idea of components id similarity to "components" in /Pages dir.
Tags just provides fast and scoped way to write

and their css or scss styling.
It seems that layout components are an obsolete way of providing @content slots (as it called in Vue).
Just provide an opportunity to use it everywhere.

[mkArtakMSFT]

Thanks for contacting us, @datdefboi.
This is not something we plan to do. We do plan to review and potentially improve CSS support / interaction in the future.