Eine Blazor App wird Web typisch in einer HTML Seite (:hosts.cshtml) gehostet. Dazu gehören die üblichen Ressourcen wie CSS und JavaScript. Beides muss in der HTML Seite referenziert werden. Das führt zu Problemen wenn man verstärkt auf Komponenten setzt. Diese bringen ihre eigenes Design mit. Diese Umstand löst Microsoft nun in Blazor 5 für JavaScript und CSS. Letzteres wird als CSS Isolation bezeichnet. Erfreulicherweise ist der Ansatz super einfach. Eine Blazor Componennt bekommt für den Design Inhalt einfach bei identen Namen die Datei Erweiterung .CSS.
Die Komponenten spezifische CSS Datei enthält dabei praktisch nicht, außer ein Style
1: h3 {
2: color:tomato;
3: }
Diese Komponente bekommt noch eine weitere Component1 ohne CSS Style spendiert um einen Effekt zu demonstrieren.
1: <h3>Component</h3>
2: <Component1></Component1>
Keine CSS Include, Component wird nun in z.B. Index.razor per <Component> genutzt. Interessant ist der Output im Browser.
Der Style wird nicht an die Kind Komponente geerbt. Man nennt das Scoped Style und macht auch Sinn im Kontext einer Komponente. Allerdings bietet Blazor 5 auch die Option die Regel durchzureichen, indem man ::deep dem H3 Style Element voranstellt. Seltsamerweise bei mir nur mit H3 groß geschrieben werden um den Effekt zu sehen. (rc1)
1: ::deep H3 {
2: color: tomato;
3: }
Dann wird auch Component1 rot. Für den nächsten Schritt fahren wir ohne deep fort.
Wie löst Microsoft auf HTML Ebene das Problem der scoped CSS Regeln? Ein Blick per F12 in die Browser Tools offenbart eine neue virtuelle CSS Datei
<link href="_content/BlazorApp5Server/_framework/scoped.styles.css" rel="stylesheet">
Das HTML Element selbst wird mit einem automatisch generierten Attribut ausgeliefert.
<h3 b-9dnwpe5pza="">Component</h3>
Entsprechend muss auch der automatisch generierte CSS Code ausgestaltet sein um die CSS Regel samt Attribut Selektor zu deklarieren.
/* _content/BlazorApp5ServerPages/Component.razor.rz.scp.css */
h3[b-9dnwpe5pza] {
color: tomato;
}