Tukukkk

I want to apply CSS to my child components that are called from a parent component using the trick it works fine

Encapsulation: ViewEncapsulation.None

But when i Navigate to other routes or pages it picks the style of the component whose Encapsulation is none weird behaiour

i.e when I hit route
http://localhost:4200/example

and Example component has

@Component({

  selector: 'app-example',

  templateUrl: './example.component.html',

  styleUrls: ['./example.component.css'],

  encapsulation: ViewEncapsulation.None



})

on this route there are two other components

example.component.html

<app-example1></app-example1>



<app-example2></app-example2>

css is apllied to the respective childerns

but when i hit example2 it also picks the css of example1

@Component({

      selector: 'app-example2',

      templateUrl: './example2.component.html',

      styleUrls: ['./example2.component.css'],





    })

when i remove the encapsulation property it doesn't pick for example2 route

or when i access directly the route http://localhost:4200/example2

it works fine and css only pick up the example2 css but when i navigate to example1 and naviagtes to example2

it picks the style of example 1 component because of

 encapsulation: ViewEncapsulation.None

when i remove this property or directly access the route it works fine, what exactly is the issue I dont know why it is behaving like this

and example1 and example2 are two different modules and have its own routes

View encapsulation defines whether the template and styles defined within the component can affect the whole application or vice versa.

For ViewEncapsulation None - styles from the component propagate back to the main HTML and therefore are visible to all components on the page. Be careful with apps that have None and Native components in the application. All components with None encapsulation will have their styles duplicated in all components.

If you remove ViewEncapsulation propertythen it will take default one which is Emulated

In this case styles from main HTML propagate to the component. Styles defined in this component's @Component decorator are scoped to this component only.

simple old css hack

Add a unique class like
.app-component to the top most element of your component, and make sure all other styles are child of this class.

Better yet if you are using any kind of css preprocessors.

Info:

When using ViewEncapsulation.None, the defined styles are added to the html page using style tag in the head element.

So by ancient conventions, your styles get cascaded.

Hence when you have time invest your time in css styling conventions like BEM or something else.

Ciao!