Angular 2: Как стилизовать хост-элемент компонента?

У меня есть компонент в Angular 2 под названием my-comp:

<my-comp></my-comp>

Как можно стилизовать хост-элемент этого компонента в Angular 2?

В Polymer вы должны использовать селектор ": host". Я попробовал это в Angular 2. Но это не работает.

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

Я также попытался использовать компонент в качестве селектора:

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

Оба подхода не работают.

Спасибо.

Была ошибка, но она была исправлена. :host { }сейчас работает нормально.

Также поддерживаются

• :host(selector) { ... }для selectorсопоставления атрибутов, классов, ... в элементе хоста

• :host-context(selector) { ... }для selectorсопоставления элементов, классов, ... на родительских компонентах

• selector /deep/ selector(псевдоним selector >>> selectorне работает с SASS), чтобы стили соответствовали границам элементов

  • ОБНОВЛЕНИЕ: SASS устарела /deep/.
    Angular (TS и Dart) добавлен ::ng-deepв качестве замены, который также совместим с SASS.

  • UPDATE2: ::slotted ::slotted теперь поддерживается всеми новыми браузерами и может использоваться с `ViewEncapsulation.ShadowDom
    https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

См. Также Загрузка внешнего стиля CSS в Angular 2 Component.

/deep/и >>>которые не затрагиваются теми же комбинаторах селекторных , что в Chrome которые являются устаревшими.
Angular эмулирует (переписывает) их и поэтому не зависит от браузеров, поддерживающих их.

Это также объясняет , почему /deep/и >>>не работают с , ViewEncapsulation.Nativeчто позволяет родной теневую DOM и зависит от поддержки браузера.

Я нашел решение, как стилизовать только элемент компонента. Я не нашел никакой документации о том, как это работает, но вы можете поместить значения атрибутов в директиву компонента под свойством 'host' следующим образом:

@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;
}

ОБНОВЛЕНИЕ: Как упоминал Гюнтер Цохбауэр, была ошибка, и теперь вы можете стилизовать элемент хоста даже в файле css, например так:

:host{ ... }

Проверьте эту проблему . Я думаю, что ошибка будет решена, когда будет реализована новая логика прекомпиляции шаблона . Сейчас я думаю, что лучшее, что вы можете сделать, - это обернуть ваш шаблон <div class="root">и стилизовать это div:

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

Смотрите этот плункер

В вашем Компоненте вы можете добавить .class к вашему элементу host, если у вас есть общие стили, которые вы хотите применить.

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

Для тех, кто ищет стиль дочерних элементов, :hostвот пример того, как использовать::ng-deep

:host::ng-deep <child element>

например :host::ng-deep span { color: red; }

Как говорили другие, /deep/не рекомендуется

Попробуйте: host> / deep /:

Добавьте следующее в файл parent.component.less

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

Замените app-child-component вашим дочерним селектором