Criei o componente toolbar
com o seguinte decorator:
@Component({
selector: 'app-toolbar',
templateUrl: './toolbar.component.html',
styleUrls: ['./toolbar.component.scss']
})
Repare que o componente está a utilizar o seletor app-toolbar
.
Adicionei o seguinte CSS no arquivo toolbar.component.scss
:
app-toolbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2;
}
Porém o elemento não ficou fixo no topo. Ao inspecionar o elemento no browser, verifiquei que o mesmo recebeu os seguintes atributos:
<app-toolbar _ngcontent-c0 _nghost-c1>
//...
</app-toolbar>
Ao verificar o CSS gerado, o mesmo está sendo aplicado ao elemento app-toolbar
porém com um atributo diferente:
app-toolbar[_ngcontent-c1] {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2;
}
Ou seja, o elemento é renderizado com o atributo _ngcontent-c0
e o CSS com o atributo _ngcontent-c1
.
O que está errado? Por quê o contexto do elemento é diferente do contexto do CSS?