How do I reference host element in CSS of an Angular2 component?

Question

I have a component in Angular2 and I want to set the padding on the host element.

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

in browser, my style looks like this:

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

while my host element looks like this:

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

As I understand it, Angular2 adds these _ng attributes so CSS references specific components.

But how do I reference the host element from the CSS defined inside the component?

Answer 1

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

or

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

The added _ng... classes are for emulating scoped styles (default encapsulation: ViewEncapsulation.Emulated) similar to what shadow DOM does.