Style html,body from web component (Angular 2)

angular shadow-dom
Vivendi picture Vivendi · Jan 19, 2016 · Viewed 54.6k times · Source

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

Sasxa picture Sasxa · Jan 20, 2016

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,
  ...
})

Related questions

Render content between the component tags

When a component is rendered, content inside it is ignored, for example: import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: '<div>{{title}}</div>', }) export class AppComponent { title = 'app works!'; } Using it …

Read More
Does Angular 2 use Shadow DOM or a Virtual DOM?

What does Angular 2 use to update the DOM. Is it Shadow DOM or Virtual DOM ? Was there any such concept in Angular 1?

Read More
What does :host /deep/ selector mean?

Please explain in a straightforward way what :host /deep/ means: :host /deep/ .ui-autocomplete { width: 85%; }

Read More