Как ссылаться на элемент хоста в CSS компонента Angular2?

Question

У меня есть компонент в Angular2, и я хочу установить прописку на элемент хоста.

@Component({ 
    selector: 'my-app', 
    template: 'Hello world' 
    styles: ['my-app {padding: 10px}'] 
}) 

в браузере, мой стиль выглядит следующим образом:

my-app[_ngcontent-icu-3] {padding: 10px;} 

в то время как мой хозяин элемент выглядит следующим образом:

<my-app _ngcontent-icu-1="" _nghost-icu-3=""> 
    <div class="content" _ngcontent-icu-3=""></div> 
</my-app> 

Как я понимаю, Angular2 добавляет эти _ng атрибуты так CSS ссылки на конкретные компоненты.

Но как я могу ссылаться на элемент хоста из CSS, определенного внутри компонента?

Answer 1

styles: [':host {padding: 10px}'] 

или

@Component({ 
    selector: 'my-app', 
    template: 'Hello world' 
    host: {'[style.padding.px]': '"10"'} 
}) 

Добавленной _ng... классов для эмуляции контекстных стилей (по умолчанию encapsulation: ViewEncapsulation.Emulated) аналогично тому, что тень DOM делает.