dotnet / razor

Compiler and tooling experience for Razor ASP.NET Core apps in Visual Studio, Visual Studio for Mac, and VS Code.
https://asp.net
MIT License
502 stars 193 forks source link

Scoped CSS identifier is not applied to some html elements #9565

Closed nvmkpk closed 2 weeks ago

nvmkpk commented 2 years ago

Describe the bug

Scoped CSS generated identifier is not applied to body or header html tags. It is still applied to footer tag though.

To Reproduce

  1. Create a new Asp.net razor pages project using dotnet new razor command.
  2. Edit Pages\_Layout.cshtml.css file to add below code to the top of the file:
    
    body {
    background-color: #dfdfdf;
    }

header { background-color: #afafaf; }

footer { background-color: #afafaf; }

3. Run the project with `dotnet run`
4. Observe the opened browser page for the backgound color of page and header, it stays the default of white color but background color of footer changes.
5. Inspect the HTML using dev tools `Elements` panel, the generated scoped css identifier is not applied to `body` or `header` elements but it is still applied to `footer` element.
6. Look at the generated scoped css bundle in `Sources` panel, it adds the identifier to all three style rules.

### Exceptions (if any)
_None_

### Further technical details
- Output of `dotnet --info`

.NET SDK (reflecting any global.json): Version: 6.0.101 Commit: ef49f6213a

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

Host (useful for support): Version: 6.0.1 Commit: 3a25a7f1cc

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

.NET runtimes installed: Microsoft.AspNetCore.App 5.0.12 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 6.0.1 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.NETCore.App 3.1.20 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.12 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 6.0.1 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.WindowsDesktop.App 3.1.20 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.12 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 6.0.1 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

To install additional .NET runtimes or SDKs: https://aka.ms/dotnet-download


- The IDE (VS / VS Code/ VS4Mac) you're running on, and its version: For this repro, I did not use any IDE.
dotnet-issue-labeler[bot] commented 2 years ago

I couldn't figure out the best area label to add to this issue. If you have write-permissions please help me learn by adding exactly one area label.

jjonescz commented 2 weeks ago

Looks like a duplicate of https://github.com/dotnet/razor/issues/9034. CSS scoping doesn't apply to tag helpers, and I think both body and head have tag helpers. If you opt-out these elements from tag helper discovery like <!body>...</!body>, CSS scoping should work.