El aislamiento de CSS de Blazor es un mecanismo que limita los estilos al marcado generado por un componente.
En proyectos medianos o grandes, una regla global puede arreglar un botón y romper otro elemento lejos de allí. El CSS global es propenso a colisiones de nombres y efectos secundarios.
Con el aislamiento buscamos mantener juntos el componente y sus estilos y evitar que dos clases con el mismo nombre entren en conflicto.
Blazor resuelve esto de forma nativa mediante CSS Isolation.
Cómo crear estilos aislados
El mecanismo se basa en una convención de nombres de archivo.
Si tienes un componente llamado Counter.razor, simplemente crea un archivo en la misma carpeta llamado Counter.razor.css.
Visual Studio anidará automáticamente el archivo CSS debajo del componente. Todo lo que escribas en ese archivo CSS solo afectará a ese componente específico.
Ejemplo práctico
Supongamos que quieres que todos los <h1> de Counter sean de color rojo.
Counter.razor.css
/* Solo afectará a los h1 dentro de Counter.razor */
h1 {
color: red;
font-family: 'Courier New';
}Counter.razor
<h1>Contador</h1>
<p>Valor actual: ...</p>Aunque tengas otros <h1> en el resto de la aplicación (en el MainLayout o en Home), no se verán afectados. Permanecerán con su estilo original. Esto nos permite usar selectores genéricos y sencillos sin miedo a “contaminar” el resto de la web.
Cómo funciona internamente
Blazor no usa Shadow DOM (como los Web Components nativos) para esto, sino una técnica de reescritura de atributos en tiempo de compilación.
Cuando compilas el proyecto, Blazor genera un identificador único para cada componente (algo tipo b-3x98z1a2b).
- En el HTML: Añade ese identificador como atributo a todos los elementos HTML del componente.
<h1 b-3x98z1a2b>Contador</h1>- En el CSS: Reescribe tus selectores para que requieran ese atributo.
h1[b-3x98z1a2b] { color: red; }De esta forma, el navegador solo aplica el estilo si el elemento tiene la “marca” (el scope identifier) correcta.
El archivo bundle (.styles.css)
Seguramente te preguntes: “¿Y dónde va todo ese CSS? ¿Se inyecta en línea?”
No. Blazor coge todos los archivos .razor.css de tu proyecto, los procesa y los empaqueta en un único archivo estático llamado NombreDeTuProyecto.styles.css.
Para que el aislamiento funcione, debes asegurarte de que tu App.razor (o index.html en WASM puro) tiene referenciado este archivo.
<head>
<link href="MiProyectoBlazor.styles.css" rel="stylesheet" />
</head>Si tus estilos aislados no se aplican, el 90% de las veces es porque falta esta línea o el nombre del proyecto ha cambiado y el link está roto.
Aplicar estilos a componentes hijos con ::deep
Un caso habitual aparece cuando un componente padre necesita aplicar un estilo al HTML que genera un hijo.
El aislamiento CSS de Blazor aplica el identificador único solo a los elementos HTML propios del componente, no a los elementos dentro de los componentes hijos.
Para desplazar el atributo de ámbito al elemento padre y alcanzar sus descendientes, usamos el pseudoelemento ::deep.
Ejemplo: Queremos que todos los botones, incluso los que están dentro de componentes hijos, sean verdes.
Parent.razor.css
/* Esto NO funcionará en componentes hijos */
button { background-color: green; }
/* Esto SÍ funcionará: Aplica el scope al padre, y busca cualquier button descendiente */
::deep button {
background-color: green;
}Para que ::deep funcione, debe haber un elemento HTML “padre” en tu componente que tenga el identificador de scope. Si tu componente solo contiene otros componentes <Hijo />, envuélvelos en un <div> para que el ::deep tenga donde “agarrarse”.
CSS Isolation en bibliotecas de componentes (RCL)
Si estás creando una Razor Class Library (RCL) para compartir componentes, el aislamiento también funciona. Durante la compilación, el bundle de la aplicación importa automáticamente los estilos aislados de la biblioteca:
@import '_content/NombreDeLaLibreria/NombreDeLaLibreria.bundle.scp.css';