shadow dom - Style html,body from web component (Angular 2)

Question

I'm working on a LoginComponent in Angular 2 that should "restyle" the html and body tags, so I can put in a background image specific for the login page.

But just adding a style for the html, body in my login.css doesn't seem to work.

Is there a way to override the style on the html, body from a component? Or any element for that matter.

I've tried things like:

:host(.btn) { ... }
:host(.btn:host) { ... }
.btn:host { ... }

to style an element from outside the Login component. But nothing seems to work.

Answer 1

You need to change the way your component serves css using ViewEncapsulation. By default it's set to Emulated and angular will

add an attribute containing surrogate id and pre-process the style rules

To change this behavior import ViewEncapsulation from 'angular2/core' and use it in component's metadata:

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
  ...
})