CSS Isolation fails when @Layout is set to null #32491

msschl · 2021-05-07T13:44:02Z

Describe the bug

Using css isolation with a @Layout set to null results in css isolation failing.

To Reproduce

Create a new mvc project
Modify Index.cshtml to this version:

@{
    Layout = null;
    ViewData["Title"] = "Home Page";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - tmp</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />

    <link rel="stylesheet" href="tmp.styles.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">tmp</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            <div class="text-center">
                <h1 id="h1-main" class="display-4">Welcome</h1>
                <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
            </div>
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2021 - tmp - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</body>
</html>

Add a Index.cshtml.css

#h1-main h1 {
    color: red;
}

Results in the following:

<!DOCTYPE html>
 b-0pr8yvohll<html b-0pr8yvohll lang="en">
<head>
    <meta b-0pr8yvohll charset="utf-8" />
    <meta b-0pr8yvohll name="viewport" content="width=device-width, initial-scale=1.0" />
    <title b-0pr8yvohll>Home Page - tmp</title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/site.css" />

    <link b-0pr8yvohll rel="stylesheet" href="tmp.styles.css" />
</head>
<body>
    <header b-0pr8yvohll>
        <nav b-0pr8yvohll class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div b-0pr8yvohll class="container">
                <a class="navbar-brand" href="/">tmp</a>
                <button b-0pr8yvohll class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span b-0pr8yvohll class="navbar-toggler-icon"></span>
                </button>
                <div b-0pr8yvohll class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul b-0pr8yvohll class="navbar-nav flex-grow-1">
                        <li b-0pr8yvohll class="nav-item">
                            <a class="nav-link text-dark" href="/">Home</a>
                        </li>
                        <li b-0pr8yvohll class="nav-item">
                            <a class="nav-link text-dark" href="/Home/Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div b-0pr8yvohll class="container">
        <main b-0pr8yvohll role="main" class="pb-3">
            <div b-0pr8yvohll class="text-center">
                <h1 b-0pr8yvohll id="h1-main" class="display-4">Welcome</h1>
                <p b-0pr8yvohll>Learn about <a b-0pr8yvohll href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
            </div>
        </main>
    </div>

    <footer b-0pr8yvohll class="border-top footer text-muted">
        <div b-0pr8yvohll class="container">
            &copy; 2021 - tmp - <a href="/Home/Privacy">Privacy</a>
        </div>
    </footer>
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
<script src="/_framework/aspnetcore-browser-refresh.js"></script></body>
</html>

Further technical details

ASP.NET Core version:
ASP.NET Core in .NET 6 Preview 3
Include the output of dotnet --info

$ dotnet --info
.NET SDK (reflecting any global.json):
 Version:   6.0.100-preview.3.21202.5
 Commit:    aee38a6dd4

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.100-preview.3.21202.5\

Host (useful for support):
  Version: 6.0.0-preview.3.21201.4
  Commit:  236cb21e3c

.NET SDKs installed:
  2.1.814 [C:\Program Files\dotnet\sdk]
  3.1.408 [C:\Program Files\dotnet\sdk]
  5.0.103 [C:\Program Files\dotnet\sdk]
  5.0.201 [C:\Program Files\dotnet\sdk]
  5.0.202 [C:\Program Files\dotnet\sdk]
  5.0.300-preview.21180.15 [C:\Program Files\dotnet\sdk]
  6.0.100-preview.3.21202.5 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
  Microsoft.AspNetCore.All 2.1.26 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.All 2.1.27 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.App 2.1.26 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 2.1.27 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.13 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.14 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 5.0.3 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 5.0.4 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 5.0.5 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 6.0.0-preview.3.21201.13 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 2.1.26 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.1.27 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.13 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.14 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.3 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.4 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 6.0.0-preview.3.21201.4 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.WindowsDesktop.App 3.1.13 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 3.1.14 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 5.0.3 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 5.0.4 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 5.0.5 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 6.0.0-preview.3.21201.3 [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
vscode 1.56.0

The text was updated successfully, but these errors were encountered:

javiercn · 2021-05-10T13:06:01Z

@msschl thanks for contacting us.

#h1-main h1 {
    color: red;
}

Does not match anything on the page. You likely want to say h1#h1-main. Your selector is saying match a descendant h1 element of an element with id=h1-main

msschl · 2021-05-10T14:10:49Z

Oh, sry my bad. I mixed #h1-main h1 and h1#h1-main up. Nevertheless it results in the same behviour. There is still a text added in the html source beneath the doctype:

<!DOCTYPE html>
 b-0pr8yvohll<html b-0pr8yvohll lang="en">
<head>
    <meta b-0pr8yvohll charset="utf-8" />
    <meta b-0pr8yvohll name="viewport" content="width=device-width, initial-scale=1.0" />
    <title b-0pr8yvohll>Home Page - tmp</title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/site.css" />

    <link b-0pr8yvohll rel="stylesheet" href="tmp.styles.css" />
</head>
<body>
    <header b-0pr8yvohll>
        <nav b-0pr8yvohll class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div b-0pr8yvohll class="container">
                <a class="navbar-brand" href="/">tmp</a>
                <button b-0pr8yvohll class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span b-0pr8yvohll class="navbar-toggler-icon"></span>
                </button>
                <div b-0pr8yvohll class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul b-0pr8yvohll class="navbar-nav flex-grow-1">
                        <li b-0pr8yvohll class="nav-item">
                            <a class="nav-link text-dark" href="/">Home</a>
                        </li>
                        <li b-0pr8yvohll class="nav-item">
                            <a class="nav-link text-dark" href="/Home/Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div b-0pr8yvohll class="container">
        <main b-0pr8yvohll role="main" class="pb-3">
            <div b-0pr8yvohll class="text-center">
                <h1 b-0pr8yvohll id="h1-main" class="display-4">Welcome</h1>
                <p b-0pr8yvohll>Learn about <a b-0pr8yvohll href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
            </div>
        </main>
    </div>

    <footer b-0pr8yvohll class="border-top footer text-muted">
        <div b-0pr8yvohll class="container">
            &copy; 2021 - tmp - <a href="/Home/Privacy">Privacy</a>
        </div>
    </footer>
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
<script src="/_framework/aspnetcore-browser-refresh.js"></script></body>
</html>

msschl · 2021-05-10T14:17:57Z

Sry I was a bit inaccurate while describing the issue I was having. The issue was not that CSS isolation isn't working, but rather there is a bit of text added after the doctype. I am sry, I should have been a bit clearer with what I meant.

javiercn · 2021-05-10T14:47:18Z

@msschl thanks for the clarification

I've figured that was a possible interpretation and I opened a separate issue for it with more details #32542

I'm going to close this issue in favor of the other one I just referenced.

msschl · 2021-05-10T14:48:44Z

Ok thanks 👍🏽

javiercn added the area-mvc Includes: MVC, Actions and Controllers, Localization, CORS, most templates label May 7, 2021

javiercn added the feature-css-isolation This issue is related to CSS Isolation feature label May 10, 2021

javiercn mentioned this issue May 10, 2021

[Mvc] CSS isolation fails with some HTML constructs #32542

Closed

javiercn added ✔️ Resolution: Answered Resolved because the question asked by the original author has been answered. question labels May 10, 2021

ghost added the Status: Resolved label May 10, 2021

javiercn closed this as completed May 10, 2021

ghost locked as resolved and limited conversation to collaborators Jun 9, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS Isolation fails when @Layout is set to null #32491

CSS Isolation fails when @Layout is set to null #32491

msschl commented May 7, 2021

javiercn commented May 10, 2021

msschl commented May 10, 2021

msschl commented May 10, 2021

javiercn commented May 10, 2021

msschl commented May 10, 2021

CSS Isolation fails when @Layout is set to null #32491

CSS Isolation fails when @Layout is set to null #32491

Comments

msschl commented May 7, 2021

Describe the bug

To Reproduce

Results in the following:

Further technical details

javiercn commented May 10, 2021

msschl commented May 10, 2021

msschl commented May 10, 2021

javiercn commented May 10, 2021

msschl commented May 10, 2021