Angular change style of host when custom attribute is set

Question

I would like to change the style of a custom Angular component based on an custom attribute (just the attribute, without key-value) on the host tag. But somehow the ':host[...]' selector is not used/does not change the style.

Does anyone know why this is not working? And how to make it work?

My custom component looks like

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <div>
      <p>Lorem ipsum dolor sit amet</p>
    </div>
  `,
  styleUrls: ['./my-component.component.scss'],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class MyComponentComponent {

}

The css/scss-file:

:host[custom] div {
  background: lightblue;
  border: 1px solid black;
  font-size: 20px;
  height: 150px;
  padding: 25px;
  width: 150px;
}

:host div {
  background: white;
  border: 1px solid black;
  font-size: 20px;
  height: 150px;
  padding: 25px;
  width: 150px;
}

The app.component.html

<div>
  <div style='margin: 25px'>
    <my-component></my-component>
  </div>

  <div style='margin: 25px'>
    <my-component custom></my-component>
  </div>

</div>

Result: