Angular 2: ¿Cómo diseñar el elemento host del componente?

Tengo un componente en Angular 2 llamado my-comp:

<my-comp></my-comp>

¿Cómo se estiliza el elemento host de este componente en Angular 2?

En Polymer, usaría el selector ": host". Lo probé en Angular 2. Pero no funciona.

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

También intenté usar el componente como selector:

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

Ambos enfoques no parecen funcionar.

Gracias.

Hubo un error, pero se corrigió mientras tanto. :host { }funciona bien ahora.

También se admiten

• :host(selector) { ... }para selectorhacer coincidir atributos, clases, ... en el elemento host

• :host-context(selector) { ... }para selectorunir elementos, clases, ... en componentes principales

• selector /deep/ selector(el alias selector >>> selectorno funciona con SASS) para que los estilos coincidan a través de los límites de los elementos

  • ACTUALIZACIÓN: SASS está en desuso /deep/.
    Angular (TS y Dart) agregado ::ng-deepcomo reemplazo que también es compatible con SASS.

  • ACTUALIZACIÓN2: ::slotted ::slotted ahora es compatible con todos los navegadores nuevos y se puede usar con `ViewEncapsulation.ShadowDom
    https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

Consulte también Cargar estilo css externo en el componente Angular 2

/deep/y >>>se no se ve afectado por los mismos combinadores selector que en Chrome, que están en desuso.
Angular los emula (reescribe) y, por lo tanto, no depende de los navegadores que los admitan.

Esta es también la razón /deep/y >>>no funciona con lo ViewEncapsulation.Nativeque permite el DOM nativo nativo y depende del soporte del navegador.

He encontrado una solución para diseñar solo el elemento componente. No he encontrado ninguna documentación sobre cómo funciona, pero puede poner valores de atributos en la directiva del componente, bajo la propiedad '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;
}

ACTUALIZACIÓN: Como mencionó Günter Zöchbauer, hubo un error, y ahora puede diseñar el elemento host incluso en el archivo css, de esta manera:

:host{ ... }

Mira este tema . Creo que el error se resolverá cuando se implemente la nueva lógica de precompilación de plantillas . Por ahora, creo que lo mejor que puedes hacer es envolver tu plantilla <div class="root">y diseñar esto div:

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

Ver este saqueador

En su Componente, puede agregar .class a su elemento host si desea aplicar algunos estilos generales.

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

Para cualquiera que quiera diseñar elementos secundarios de un :hostaquí, hay un ejemplo de cómo usar::ng-deep

:host::ng-deep <child element>

p.ej :host::ng-deep span { color: red; }

Como otros dijeron /deep/está en desuso

Pruebe el: host> / deep /:

Agregue lo siguiente al archivo parent.component.less

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

Reemplace el componente app-child por su selector child