Turning the background color red using the :host selector?

Issue

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?

Solution

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

Answered By - H3AR7B3A7