Child Component Support in Blazor CSS isolation

The CSS isolation is only applied to the component level by default but you can extend it to the child component using “::deep” attribute in the CSS file. This attribute is the Blazor attribute so, it only understands and parses by the Blazor engine. When “::deep” attribute used in the CSS file, the Blazor engine also applied scope identifier to all descendants of components.

ChildComponent.razor

<hr />
<p>
    paragraph:: This is child component content
</p>
<div>
    div:: This is child component content
</div>
<hr />
@code {
}

ParentComponent.razor

@page "/parentcomponent"
<h3>Parent Component</h3>
<div>
    <p>paragraph:: This is Parent Component content</p>
    <ChildComponent></ChildComponent>
    <div>
        div:: This is parent component content
    </div>
</div>
@code {
}

ParentComponent.razor.css

p {
    color: red
}
::deep div {
    color:orange;
    font-weight:bold;
}

References
https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-6.0
https://www.c-sharpcorner.com/article/css-isolation-in-blazor/