Styling the :host with

[kasperpeulen]

I have the following component:

@Component(
    selector: 'login',
    templateUrl: 'login.component.html',
    directives: const [CORE_DIRECTIVES, FORM_DIRECTIVES, DROPDOWN_DIRECTIVES],
    styleUrls: const ['login.component.css'],
    encapsulation: ViewEncapsulation.None
    )

With the following style:

:host {
  position: fixed;
  display: block;
  right: 10px;
  top: 10px;
  z-index: 1;
}

I assumed that this would turn into a global css style like:

login {
  position: fixed;
  display: block;
  right: 10px;
  top: 10px;
  z-index: 1;
}

But it is actually puts this .host selector as global style:

I'm not sure what the expected behaviour would be here, but I think this makes not much sense.

[ericmartinezr]

I think you need to read this article. Clearly ViewEncapsulation.None with :host doesn't make much sense together.

[kasperpeulen]

@ericmartinezr I know shadow dom etc. Maybe it doesn't make much sense, but maybe then raising an exception would be better?

I do think it would make more sense to convert :host to the actual component name, if used in combination with ViewEncapsulation.None. After thinking about it, I also could have just written

login {
  position: fixed;
  display: block;
  right: 10px;
  top: 10px;
  z-index: 1;
}

in the stylesheet in the first place. I forgot that this is just possible. Still I feel like it would be better to at least raise an exception, if people use :host in combination with ViewEncapsulation.None.

[ericmartinezr]

Yep, sorry, after a while I got the point here. I don't know if an exception would be good a idea, I mean, if I make a mistake in my CSS nothing really happens, it just doesn't work. Probably changing it to what you expect (changing :host to .selector or .selector-host so the user can see that it's mixing VE.None and :host) would make more sense. I'm really sorry for the noise...

[vicb]

ViewEncapsulation.None basically tells to include your unmodified CSS.

Because we don't follow includes in this case, there is no way we can catch errors

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}