[CSS isolation] attributes do not apply to components generated in code

[xperiandri]

If I do

let view (localizer : IStringLocalizer<Strings>) model dispatch = concat {
    comp<PageTitle> { localizer["CreateAccountPageTitle"] }
    lazyComp
        (fun model -> comp<EditForm> {
            "Model" => model
            attr.callback "OnValidSubmit" (fun (ctx : EditContext) -> FillAccount |> dispatch)
            attr.fragmentWith "ChildContent"

and

override _.CssScope = CssScopes.CreateAccountPage

then CSS isolation attributes are not applied to the form

[Tarmil]

Yes, that's how CSS isolation works in Blazor by default: it only applies to the elements directly inside the component, and not the ones in a nested component. To apply to all nested elements, you need to use the "deep" pseudo-element. So instead of this:

.some-element-inside-edit-form {
    color: red;
}

you can do:

::deep .some-element-inside-edit-form {
    color: red;
}

See https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation#child-component-support

[xperiandri]

But I use Bolero components in a different way.
I have a derived type that works as a page used from C# project

[xperiandri]

So it was a root level component