O que significa: host /deep/ selector?
por favor, explique de uma forma simples o que :host /deep/ significa:
:host /deep/ .ui-autocomplete {
width: 85%;
}
1 answers
É usado para permitir o estilo de componentes infantis ao usar {[[0]} ver encapsulação.
Mais sobre isso pode ser encontrado aqui:Https://angular.io/guide/component-styles
Btw /deep/ o selector está agora desactualizado:
O combinador descendente de piercing de sombras está desactualizado e o suporte está a ser removido dos principais navegadores e ferramentas. Como tal, planejamos baixar o suporte em Angular (para todos os 3 de /deep/, >>> e ::ng-deep). Até então ::ng-deep deve ser preferível para uma compatibilidade mais ampla com as ferramentas.
:host é usado para endereçar o elemento de hospedagem - que é o que você usa para adicionar o componente em algum lugar (por exemplo <app-component>).
Utilize o selector de pseudo-classe host para os estilos-alvo no elemento que hospeda o componente (em oposição aos elementos de alvo dentro do modelo do componente).
Então o selector :host /deep/ .ui-autocomplete significa " no elemento de hospedagem actual, ir mais fundo (procurar nos componentes-filhos too) and look for elements with class ui-autocomplete.
Aqui estão algumas informações adicionais sobre a funcionalidade de encapsulação de vistas:
Https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html