Native

This strategy is like Emulated, but it disables global styles from entering the component. Leaving the style in the global style as it was, set the encapsulation to native:

@Component({  selector: 'app-child',  templateUrl: './child.component.html',  styleUrls: ['./child.component.css'], // Encapsulation: Native  encapsulation: ViewEncapsulation.Native})

Even though the global style sets the h3 color to pinkvioletred, the text color remains black because it couldn't penetrate the template:

Get TypeScript 2.x for Angular Developers now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.