设置自定义属性时主机的角度变化样式

问：

我想根据主机标签上的自定义属性（只是属性，没有键值）更改自定义 Angular 组件的样式。但不知何故，'：host[...]' 选择器没有被使用/没有改变样式。

有谁知道为什么这不起作用？以及如何让它发挥作用？

我的自定义组件如下所示

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 {

}

css/scss-文件：

: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;
}

app.component.html

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

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

</div>

结果：