Blazor css isolation - EditForm css not applied

[KRXTCH]

Hello,

I found a bug on Blazor Css Isolation, the css seems not working on EditForm component.

Describe the bug

When I try to apply css on EditForm using css isolation, the style is not applied and the generated ID is not set to the form element.

As you can see, the first form does not have the ID, but the next form and the div with class "working-cssIsolation" have it.

To Reproduce

Just create a Blazor Server project and try to add css on an EditForm conponent using css isolation.

Index.razor

    <ul class="nav">
        <li>
            <p>EditForm tag</p>
        </li>
    </ul>
</EditForm>

<form class="not-working-cssIsolation mt-3">
    <ul class="nav">
        <li>
            <p>Form tag</p>
        </li>
    </ul>
</form>

Index.razor.css

.not-working-cssIsolation, .working-cssIsolation{
    width:50%;
    height: 50%;
    background-color: yellow;
}

Exceptions (if any)

Expect to css isolation works with EditForm component

Further technical details

• Project framework : ** net5.0
• Microsoft Visual Studio Professional 2019 Version 16.9.2

SDK .NET (reflétant tous les fichiers global.json) :
 Version:   5.0.300
 Commit:    2e0c8c940e

Environnement d'exécution :
 OS Name:     Windows
 OS Version:  10.0.19042
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\5.0.300\

Host (useful for support):
  Version: 5.0.6
  Commit:  478b2f8c0e

[javiercn]

@KRXTCH thanks for contacting us.

That's by design. CSS Isolation applies to HTML elements, not components. Otherwise you would be able to alter the styles of an isolated component from outside of it, which defeats the purpose.

Our recomendation is that you wrap the component in a tag on the consuming side of things and use a parent selector to apply styles to it.

[KRXTCH]

@javiercn thanks for your answer.

I wrapped the EditForm component using div like you mentioned. This case don't seems to be in the documentation, it will be cool to have it 😃.

[ghost]

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.