CSS Isolation in Blazor Components

[JustinCouto]

First of all, we love Blazor!

The only thing keeping us from moving to Blazor as our core front-end technology is the lack of CSS Isolation in Blazor Components. We currently use Angular and it has awesome support for CSS Isolation. This feature has changed the way we develop UI and we could never go back to not having it. We like the unopinionated approach you are taking with Blazor, but this is a feature we believe is essential and worth adding. We don't believe you need to have full web component support, but we do believe having the ability to turn on CSS Isolation at a component level or in an entire project would be an amazing addition that would enable better apps, app management, and a nicer experience for developers. Please add this feature.

@danroth27 @shanselman @SteveSandersonMS

[RemiBou]

IMO, CSS selector already provide enough complexity with selectors so you don't need this kind of feature.

And this adds coupling between the framework, the css extension you choose (less, sass) and the css building tool you choose (webpack). An external project might be a better fit as every Blazor user won't get all the dependencies this feature needs.

[JustinCouto]

@RemiBou I totally disagree. Using CSS without this feature is like writing code without namespaces. Sure, I can write super long and specific class names in code and not use namespaces, but that is an awful way to work. CSS Isolation is something that once you use it, like namespaces, you never want to go back to not using it. I think this is a feature that would be a great addition.

[brianmtreese]

@RemiBou yeah with CSS there's a lot you can do for sure but what we're referring to here is really support of Shadow DOM from the Web Components specification (https://www.w3.org/TR/css-scoping-1/#shadow-dom). It would be awesome to see these standards baked into the framework itself with the ability to toggle it on or off if you didn't want to use it.

[Lupusa87]

I am sure it will be good what you offer but for now I build dynamic css and load it as part of blazor component so I don't need any isolation because css is constructed for particular component and loaded/unloaded with component.

Here is POC repo which is not updated to latest version I use in my blazor virtual grid.

[JustinCouto]

@Lupusa87 unfortunately, that doesn;t provide CSS Isolation. That means you still get CSS bleed and all the other issues of Global Scoped CSS.

[ruicraveiro]

I use CSS grids to define my pages' layouts. Each page or component will have a different css grid layout, which will also be responsive. CSS isolation is important for this use case to prevent me from having to guarantee each style has an application-wide unique name.

I agree with this request. I convert an Angular app to Blazor and missed this feature. Thank you for considering adding the opt-in capability.

[alexandrereyes]

Here is a workaround https://github.com/alexandrereyes/BlazorScopedCss

[vertonghenb]

why not use the style we already have, for example add the @css block?

In 1 file

Component.razor

<h1>My Component/h1>

@code{
// code goes here
}

@css{
// scoped css
)

In multi files

• Component.razor
• Component.razor.cs
• Component.razor.css

[buehler]

@vertonghenb I totally love it!
I'd just add the js edition as well:

@script {

}

So you could add the scoped javascript code as well. This should then be packed into the javascript that is loaded from blazor and should be accessible through JSInterop.