Turning the background color red using the :host selector?

Question

In this stackblitz demo the background turns red with this selector:

  styles: [
    `
    :host .background-div {
      background-color: red;
    }
  `,
  ]

However if we remove the .background-div part of the selector and only use the :host selector like this:

    :host {
      background-color: red;
    }

The background of the element is not turned red. Just curious why?

why are you surprised? if your remove background-div it's another selector selecting another element — Temani Afif, Aug 15 '22 at 20:21
I was thinking that `:host` is synonymous with the `button-overview-example` component element ... so using the `:host:` selector as expressed would turn the background red ... — Ole, Aug 15 '22 at 20:22
@TemaniAfif I don't understand your argument, why isn't red color being applied to the host component? The OP meant the background of the element being created by Angular, `` — Ruan Mendes, Aug 15 '22 at 20:28
@JuanMendes I am not seeing any element here. I see two different selector selecting two different element so I won't be surprised if the result is not the same. We need to see a working code to know why the last one is not doing anything — Temani Afif, Aug 15 '22 at 20:32
If you examine the HTML, you'll see an attribute applied to the host, `_nghost-amx-c311` and the corresponding style `[_nghost-amx-c311] { background-color: red; }` The whole node should have a red background but there's something interfering. — Ruan Mendes, Aug 15 '22 at 20:34
@JuanMendes I don't open external links, the OP is required to add all the relevant code inside the question. — Temani Afif, Aug 15 '22 at 20:36
I'm letting you know that I did open the link, and that your comment doesn't really apply, then The OP posted a link to working code, which cannot be reproduced inside StackOverflow. And I thought I was a stickler. — Ruan Mendes, Aug 15 '22 at 20:39
*which cannot be reproduced inside StackOverflow* --> then the question is off-topic because that link will one day die or get updated with something else — Temani Afif, Aug 15 '22 at 20:42
Indeed ... We can't post running SASS webcontainer code inside SO ... All Angular MVCE must run in a web container or stackblitz browser environment ... — Ole, Aug 15 '22 at 20:43
Also, as noted here https://blog.angular-university.io/angular-host-context/ , the semantics for `host` in Angular are a little different because of the way Angular goes about style encapsulation ... — Ole, Aug 16 '22 at 00:39
@TemaniAfif I put an update comment in the question crediting your insight. — Ole, Aug 16 '22 at 14:50

score 1 · Accepted Answer · edited Aug 17 '22 at 16:35

1

As @Temani Afif pointed out in the comment, the :host element is not rendering the red background because the display property for it is set to inline.

If we change the display property to something other than inline, like block, the background will be rendered red as expected.

Here is a demo: https://stackblitz.com/edit/angular-mdbamb-9p84h4?file=src%2Fapp%2Fbutton-overview-example.ts

edited Aug 17 '22 at 16:35

Ole

41,793
59
191
359

answered Aug 15 '22 at 21:22

H3AR7B3A7

4,366
2
14
37

4

I think your answer is not very accurate. The issue is that the custom element is by default an inline element that contain a block element. Related: https://stackoverflow.com/a/72454494/8620333 – Temani Afif Aug 16 '22 at 00:26
@TemaniAfif You are right, thank you. I adjusted the answer, but I still can't tell where the component is set to `inline` though. Feel free to add to or correct the answer further. – H3AR7B3A7 Aug 16 '22 at 16:49
Thanks @TemaniAfif ! This question was bothering me, especially all the wrong answers that others were suggesting that misunderstood `:host` (including all the stuff previously in this question). I did miss the fact that the element was inline. It would be good to point out that `:host` has nothing to do with the problem. You should never have a block element inside an inline element. I am guessing you gave in, realized this was a valid question and did look into the link, eh? – Ruan Mendes Aug 19 '22 at 12:28

Turning the background color red using the :host selector?

1 Answers1