Angular 2: Como estilizar o elemento host do componente?

Eu tenho componente no Angular 2 chamado my-comp:

<my-comp></my-comp>

Como um estilo é o elemento host desse componente no Angular 2?

No polímero, você usaria o seletor ": host". Eu tentei no Angular 2. Mas não funciona.

:host {
  display: block;
  width: 100%;
  height: 100%;
}

Eu também tentei usar o componente como seletor:

my-comp {
  display: block;
  width: 100%;
  height: 100%;
}

Ambas as abordagens parecem não funcionar.

Obrigado.

Houve um erro, mas foi corrigido enquanto isso. :host { }funciona bem agora.

Também são suportados

• :host(selector) { ... }para selectorcorresponder atributos, classes, ... no elemento host

• :host-context(selector) { ... }para selectorcombinar elementos, classes, ... nos componentes pai

• selector /deep/ selector(o alias selector >>> selectornão funciona com o SASS) para que os estilos correspondam aos limites dos elementos

  • UPDATE: SASS está obsoleto /deep/.
    Angular (TS e Dart) adicionado ::ng-deepcomo um substituto que também é compatível com o SASS.

  • UPDATE2: ::slotted ::slotted agora é suportado por todos os novos navegadores e pode ser usado com o `ViewEncapsulation.ShadowDom
    https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

Consulte também Carregar estilo css externo no componente Angular 2

/deep/e não>>> são afetados pelos mesmos combinadores de seletor que no Chrome que foram preteridos.
Angular os emula (reescreve) e, portanto, não depende dos navegadores que os suportam.

É também por isso /deep/e >>>não fazer o trabalho com ViewEncapsulation.Nativeo que permite DOM sombra nativa e depende do apoio browser.

Eu encontrei uma solução como estilizar apenas o elemento componente. Não encontrei nenhuma documentação sobre como funciona, mas você pode colocar valores de atributos na diretiva component, na propriedade 'host', como esta:

@Component({
    ...
    styles: [`
      :host {
        'style': 'display: table; height: 100%',
        'class': 'myClass'
      }`
})
export class MyComponent
{
    constructor() {}

    // Also you can use @HostBinding decorator
    @HostBinding('style.background-color') public color: string = 'lime';
    @HostBinding('class.highlighted') public highlighted: boolean = true;
}

ATUALIZAÇÃO: Como Günter Zöchbauer mencionou, houve um erro e agora você pode estilizar o elemento host mesmo no arquivo css, assim:

:host{ ... }

Confira este problema . Eu acho que o bug será resolvido quando a nova lógica de pré-compilação do modelo for implementada. Por enquanto, acho que o melhor que você pode fazer é envolver seu modelo <div class="root">e estilizar isso div:

@Component({ ... })
@View({
  template: `
    <div class="root">
      <h2>Hello Angular2!</h2>
      <p>here is your template</p>
    </div>
  `,
  styles: [`
    .root {
      background: blue;
    }
  `],
   ...
})
class SomeComponent {}

Veja este plunker

No seu Component, você pode adicionar .class ao seu elemento host, se tiver alguns estilos gerais que deseja aplicar.

export class MyComponent{
     @HostBinding('class') classes = 'classA classB';

Para quem deseja estilizar elementos filho de um :hostaqui é um exemplo de como usar::ng-deep

:host::ng-deep <child element>

por exemplo :host::ng-deep span { color: red; }

Como outros disseram que /deep/está obsoleto

Experimente o: host> / deep /:

Adicione o seguinte ao arquivo parent.component.less

:host {
    /deep/ app-child-component {
       //your child style
    }
}

Substitua o componente filho do aplicativo pelo seletor filho