Found `ViewEncapsulation.None`JS-0593

When using this encapsulation strategy, you’re telling Angular to not encapsulate at all. Meaning it doesn’t use the Shadow DOM and all styles applied to the component are appended to the document head. The styles apply to the entire document and thus are applied globally. This is the only strategy that allows CSS to cross component boundaries.

Using ViewEncapsulation.None, It leak stylings to other parts of the website.

Bad Practice

@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'app-foo-bar',
})
export class Test {}

Recommended

@Component({
    encapsulation: ViewEncapsulation.Emulated,
    selector: 'app-foo-bar'
})
export class Test {}

@NgModule({
    bootstrap: [Foo]
})
export class Test {}