Estilização do host e do contexto do host
Estilize o elemento host do componente.
Estilização do host e do contexto do host é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
Estilizando o elemento host
Um componente é renderizado dentro do próprio elemento host (a tag do seu seletor). A pseudoclasse especial :host permite estilizar esse elemento a partir do CSS do componente.
O seletor :host
Use :host para direcionar o próprio elemento do componente, por exemplo, para definir sua exibição e seu espaçamento.
/* card.component.css */
:host {
display: block;
padding: 16px;
}Por que :host é necessário
Sem :host, não é possível estilizar o elemento host de dentro do componente, pois os seletores com escopo só correspondem a elementos dentro do modelo.
:host com uma condição
Você pode passar um seletor para :host() a fim de estilizar o host somente quando ele corresponder ao seletor, por exemplo, quando tiver uma classe.
:host(.active) {
border: 2px solid green;
}
<!-- applies when host has class active -->
<app-card class="active"></app-card>Vinculando uma classe do host
Combine :host() com uma vinculação de classe do host para estilizar o componente com base no próprio estado.
@Component({
selector: "app-card",
host: { "[class.selected]": "isSelected" },
styleUrl: "./card.component.css"
})
export class CardComponent {
isSelected = true;
}O seletor :host-context
:host-context() estiliza o componente com base em uma condição de qualquer ancestral, e não do próprio host. Ele é ideal para temas.
:host-context(.dark-theme) {
background: #222;
color: #eee;
}Exemplo de tema
Se um elemento pai acima na árvore tiver a classe dark-theme, a regra será aplicada, permitindo que um ancestral altere a aparência dos componentes aninhados.
<body class="dark-theme">
<app-card></app-card>
<!-- card uses dark styles -->
</body>:host vs :host-context
:host verifica o próprio elemento do componente; :host-context verifica os ancestrais. Use host para o estado do próprio componente e host-context para um contexto herdado, como temas.
Combinando com descendentes
Você pode encadear :host-context com seletores descendentes para estilizar elementos internos com base no contexto de um ancestral.
:host-context(.compact) .title {
font-size: 12px;
}Padrões de exibição do host
Por padrão, os hosts de elementos personalizados são exibidos em linha. Definir display: block em :host é uma regra inicial comum para que o layout se comporte de maneira previsível.
:host {
display: block;
}Usos práticos
Use a estilização do host para controlar a caixa externa de um componente, reagir ao próprio estado e adaptar-se às classes de tema ao redor, mantendo os estilos encapsulados e flexíveis.
Verificação rápida
Teste sua compreensão da estilização do host.
Recapitulação
Use :host para estilizar o próprio elemento e o estado do componente, e :host-context() para reagir às classes de ancestrais em temas. Definir display: block no host é um padrão útil.
Perguntas Frequentes
A aula “Estilização do host e do contexto do host” é grátis?
Sim — o texto completo de “Estilização do host e do contexto do host” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Estilização do host e do contexto do host”?
Estilize o elemento host do componente. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Angular Academy?
Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Estilização do host e do contexto do host”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Angular Academy?
Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Estilos com escopo de componente
- Modos de encapsulamento da visualização
- Estilização do host e do contexto do host
- Classes e estilos dinâmicos