Turning the background color red using the :host selector?

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 :

According to documentation on MDN:

The :host CSS pseudo-class selects the shadow host of the shadow DOM
containing the CSS it is used inside — in other words, this allows you
to select a custom element from inside its shadow DOM.

So something like

  :host {
      background-color: red;
    }

Will have no effect because it is used outside a shadow DOM.