Scope CSS to module only in Angular 5 to prevent bleeding into other parts of app

Question

How do I scope CSS to only a module in Angular? When I load a module lazily, and have ViewEncapsulation.None in that module, the CSS bleeds into other parts of my app. Any idea how to prevent that, or keep that CSS only for that module in Angular 5?

Answer 1

There is no such think as module CSS scope.

The default ViewEncapsulation.Emulated does that per component. With ViewEncapsulation.None you disable that. There are no other ways provided by Angular.

You can add a CSS class or attribute to every component in a module and add that class or attribute to every selector in that module to limit the CSS to components of that module.