how to target component styles from host component angular 2

Question

I have this :

@Component({
    selector: 'host-element',
    template: `<elementA></elementA>`,
    styles:[''] //styles here
})

export class hostElement {}

How do I target the styles of elementA component from host-element?

Thanks in advance!!

Answer 1

:host elementA {
  // style here
}

Answer 2

Angular has a special css operator /deep/, you can read about it here.

To make a style go beyond your component, put in your css (sass, less):

/deep/ .elemet-a-class {
   ... your style;
}

Or if you want to put it locally, just

styles: ['/deep/ .element-a-class { ... }']