Angular :host <selector> is not working

From the docs:

Use the :host pseudo-class selector to target styles in the element that hosts the component (as opposed to targeting elements inside the component's template).

So

:host {
  display: block;
  border: 1px solid white;
}

will set the style for the whole host, so your element will just inherit of that style.

Here you are setting a class style .active but :host is not taken in consideration.

:host .active {
  display: block;
  border: 1px solid white;
}

Do

:host(.active) {
  display: block;
  border: 1px solid white;
}

:host will not take effect if you have encapsulation: ViewEncapsulation.None in the component's definition as shown below.

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss'],
  encapsulation: ViewEncapsulation.None
})