So I have two components, both of them use ::ng-deep to modify background color of the body tag
In the About Us component, the SCSS file has:
::ng-deep body {
background-color: red;
}
And in the Contact Us component, the SCSS file has:
::ng-deep body {
background-color: blue;
}
However, if i move to the About Us Page then go to the Contact Us Page, the following is shown in inspect
background-color: blue is overwritten by backrgound-color: red
However, it should be the otherway around since the Contact Us page should have a background-color of blue.
The inverse also leads to the same problem - bg color red is overwritten by bg color blue if i go from the Contact Us page to the About Us page.
When on the page and refreshing the browser, the problem resolves but this is not good enough for users.
I have found another SO question where the answer was to use :host but when i do this, the rule does not apply at all, it does not get recognised in the inspector.