link tag in middle of blazor components for CSS isolation

1
votes

since blazor doesn't support CSS isolation I found that the best way to isolate your CSS is to make a CSS file for each component you create and import it to the component .razor file but i wanted to know that if its right to add <link rel="stylesheet" href="css/..." /> tag in top of my blazor component file ?

1
c#htmlcss.netblazor
The <link> tag it's supposted to be in the _Host.cshtml. If you want to know what's that file looks like if you visit BlazorFiddle the file that Im telling is the second file, where you're able to see <!DOCTYPE html>. – LOL Jovem
yeah sure, I know where is <link> tag and im aware that it has to be there but in order to make CSS isolation it I have to add it to the component page. do you have a good suggestion on CSS isolation? – Khashayar Pakkhesal
What about @css block? Take a look in this issue here. – LOL Jovem
when I use this I get an errror "the name 'css' does not exist in the current context " – Khashayar Pakkhesal
I got that ideia fom the link that I send you, it was supposted to work. But as you can see in that issue they are appealing for that feature and some of the ASP.NET members are in that converstation, maybe they are working on it. So what I would suggest is go to the ASP.NET gitter conversation and ask there, maybe you will get a better awnser to your problem. I can't help more than this. Im sorry. – LOL Jovem

1 Answers

1
votes

According to this issue: https://github.com/dotnet/aspnetcore/issues/10170 They actually plan to implement such a feature after the release of dotnet 5.0 because they are simply fully engaged with the development of the next major release. As of now there is no specification how or whether it can be done in Blazor. There are some Libraries which try to accomplish a shadow-dom like functionality. BlazorStyled