Angular Academy · Lección

Estilos del host y de Host-Context

Aplique estilos al elemento host del componente.

Estilos del host y de Host-Context es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Aplicación de estilos al elemento host

Un componente se representa dentro de su propio elemento host (la etiqueta de su selector). La pseudoclase especial :host permite aplicar estilos a ese elemento desde el CSS del componente.

El selector :host

Use :host para seleccionar el propio elemento del componente, por ejemplo, para establecer su visualización y espaciado.

/* card.component.css */
:host {
  display: block;
  padding: 16px;
}

Por qué se necesita :host

Sin :host, no puede aplicar estilos al elemento host desde dentro del componente, porque los selectores con ámbito solo coinciden con elementos que están dentro de la plantilla.

:host con una condición

Puede pasar un selector a :host() para aplicar estilos al host solo cuando coincida, por ejemplo, cuando tenga una clase.

:host(.active) {
  border: 2px solid green;
}

<!-- applies when host has class active -->
<app-card class="active"></app-card>

Vinculación de una clase del host

Combine :host() con una vinculación de clase del host para aplicar estilos al componente según su propio estado.

@Component({
  selector: "app-card",
  host: { "[class.selected]": "isSelected" },
  styleUrl: "./card.component.css"
})
export class CardComponent {
  isSelected = true;
}

El selector :host-context

:host-context() aplica estilos al componente según una condición de cualquier antecesor, no del propio host. Es ideal para aplicar temas.

:host-context(.dark-theme) {
  background: #222;
  color: #eee;
}

Ejemplo de aplicación de temas

Si un elemento padre situado más arriba en el árbol tiene la clase dark-theme, la regla se aplica, lo que permite que un antecesor cambie el aspecto de los componentes anidados.

<body class="dark-theme">
  <app-card></app-card>
  <!-- card uses dark styles -->
</body>

:host frente a :host-context

:host comprueba el propio elemento del componente; :host-context comprueba los antecesores. Use host para el estado propio y host-context para el contexto heredado, como los temas.

Combinación con descendientes

Puede encadenar :host-context con selectores descendientes para aplicar estilos a elementos internos según el contexto de sus antecesores.

:host-context(.compact) .title {
  font-size: 12px;
}

Valores predeterminados de display del host

De forma predeterminada, los hosts de elementos personalizados son elementos en línea. Establecer display: block en :host es una primera regla habitual para que el diseño se comporte de forma predecible.

:host {
  display: block;
}

Usos prácticos

Use los estilos del host para controlar el contenedor exterior de un componente, reaccionar a su propio estado y adaptarse a las clases de tema del entorno, manteniendo los estilos encapsulados pero flexibles.

Comprobación rápida

Compruebe su comprensión de los estilos del host.

Resumen

Use :host para aplicar estilos al propio elemento del componente y a su estado, y :host-context() para reaccionar a las clases de los antecesores al aplicar temas. Establecer display: block en el host es un valor predeterminado útil.

Preguntas frecuentes

¿La lección «Estilos del host y de Host-Context» es gratis?

Sí — el texto completo de «Estilos del host y de Host-Context» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Estilos del host y de Host-Context»?

Aplique estilos al elemento host del componente. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Estilos del host y de Host-Context»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy