How to apply CSS on custom tag in Angular 2/5?

Question

I've installed the Google ReCaptcha (ng-recaptcha) component to my app, and was wondering if there is a way to apply some styles to children elements of the generated, in my case, <re-captcha></re-captcha> element.

For example:

re-captcha{
    border: 1px solid #ccc; /*works*/
}

re-captcha div{
    border: 1px solid #ccc; /*doesn't work*/
} 

Could you please share some experience of achieving the desired result?

UPDATE:

The following works however, if set directly in DevTools...

re-captcha div{
    border: 1px solid #ccc; 
} 

Answer 1

This is caused by the view encapsulation setting of the component.

You can use a /deep/ or ::ng-deep selector to target child components in Native or Emulated (which is default) modes, in which abbasak's answer will work.