Is there any better solution for Blazor CSS isolation?

Is your feature request related to a problem? Please describe.

Blazor only adds the scope attribute to native html elements. If the root element of your component is a custom component instead of a native HTML element, such as <div>, then the scope attribute will not be added, so the ::deep modifier will not work as expected.

Describe the solution you’d like

1. For native element, write css in {ComponentName}.razor.css
2. To applay css in child component, parent component needs to add a native html element to wrap it self.

But this is more like a trick, If the existed style requires the child component must be a child, not grand child, the solution may break the style.

Example:

• Test.razor

@page "/test"
<div>
    <Layout Class="layout">
        <Header>
            <div class="logo" />
            <Menu Theme="MenuTheme.Dark" Mode="MenuMode.Horizontal" DefaultSelectedKeys=@(new[]{"2"})>
                <MenuItem Key="1">nav 1</MenuItem>
                <MenuItem Key="2">nav 2</MenuItem>
                <MenuItem Key="3">nav 3</MenuItem>
            </Menu>
        </Header>
        <Content Style="padding: 0 50px;">
            <Breadcrumb Style="margin: 16px 0;">
                <BreadcrumbItem>Home</BreadcrumbItem>
                <BreadcrumbItem>List</BreadcrumbItem>
                <BreadcrumbItem>App</BreadcrumbItem>
            </Breadcrumb>
            <div class="site-layout-content">Content</div>
        </Content>
        <Footer Style="text-align: center; ">Ant Design ©2018 Created by Ant UED</Footer>
    </Layout>
</div>

• Test.razor.css

::deep .site-layout-content {
    background: #fff;
    padding: 24px;
    min-height: 280px;
    color: red;
    font-size: 36px;
}
::deep .ant-layout-footer {
    background-color: #2f54eb;
}

• In Pages/_Host.cshtml, add <link href="{PROJECT NAME}.styles.css" rel="stylesheet">

• Result

[MrDach]

Would love to see this fixed. Also not being able to target components in the CSS files is somewhat unexpected.

[TanayParikh]

Thanks for reporting this issue, I’m closing it out as a duplicate of https://github.com/dotnet/razor-tooling/issues/7606.