EditForm is not included in css isolation

[BISmb]

Describe the bug

Styles that are created with the css isolation feature in Blazor are not applying to the <form> tag in EditForm.

To Reproduce

Create a server-side blazor application. Make a razor component with an element. Add a css class to the EditForm element and define the class in the *.razor.css file.

I made an example repo here. The issue is in the Form.razor file.

https://github.com/BISmb/BlazorCssEditFormIssue

Exceptions (if any)

There is a workaround I found, I can add the element Id manually in my component.

Further technical details

• .NET5.0

`.NET SDK (reflecting any global.json): Version: 5.0.100 Commit: 5044b93829

Runtime Environment: OS Name: Windows OS Version: 10.0.19042 OS Platform: Windows RID: win10-x64 Base Path: C:\Program Files\dotnet\sdk\5.0.100\

Host (useful for support): Version: 5.0.0 Commit: cf258a14b7

.NET SDKs installed: 5.0.100 [C:\Program Files\dotnet\sdk]

.NET runtimes installed: Microsoft.AspNetCore.All 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All] Microsoft.AspNetCore.App 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 3.1.3 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 3.1.4 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 3.1.9 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.NETCore.App 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 3.1.3 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 3.1.4 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 3.1.9 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.0 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.WindowsDesktop.App 3.1.3 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 3.1.4 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 3.1.9 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.0 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]`

• Microsoft Visual Studio Community 2019 16.8.2
• ASP.NET CORE Razor Language Server 16.1.0.2052803.
• I am not using the experimental Razor Editor (preview feature).
• I was not able to get the css isolation to work the same way with Blazor WASM (will look more into later)

[musictopia2]

I found the problem is even worse. If using css isolation and using the inputtext or any built in component that works with EditForm, has the same issue. I previously submitted a related problem where if using a custom component, same issue but was ignored.

[pranavkm]

You likely need to use the ::deep css selector. See https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0#child-component-support.

[musictopia2]

That is okay. However, I tried that in my repository here https://github.com/musictopia2/CssIsolationNotWorking but that still did not work. For the sample, I created a custom div component. When i send that to the component, still did not work though.

[musictopia2]

Good news is i was able to fix the issue with the editform. The solution is as follows:

1. for the css, you need this code ::deep .query-form { background-color: red; }

::deep .my-text { background-color: lightblue; }

2. for the form.razor, you need something like this. @page "/form"

   If css isolation is applied correctly the form (.query-form) background should be red and this p element should be lightblue

   The unique id that the above @("

   ") element has is not present in the @("

   "). The css is included in BlazorApp1.styles.css like it should but the id is not included in the served html.

@code { public BlazorApp1.Data.WeatherForecast DummyModel = new Data.WeatherForecast(); }

I downloaded the repository and tried the 2 things and it worked perfectly.

[BISmb]

Hi Everyone, thanks for the help. I worked around this issue by styling a div in front of the EditForm component.