无法使用 @HostBinding 和 shadow dom 封装样式

Question

我有以下 angular 组件

@Component({
    selector: 'app-bar',
    templateUrl: './bar.component.html',
    styleUrls: ['./bar.component.scss'],
    encapsulation: ViewEncapsulation.ShadowDom,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class BarComponent {
    @Input() @HostBinding('class') cls;
}

所以我想，如果我将 cls 设置为 'hide-me' 我会隐藏它。我将以下内容添加到 bar.component.scss:

:host {
    &.hide-me {
       display:  none;
    }
}

DEMO

这没有任何作用，它与阴影 dom 封装有关。如果您删除该行，它将按预期再次运行。为什么这不再适用于 shadowDom 有什么建议吗？有没有办法通过启用阴影 dom 来解决这个问题 ;)

Answer 1

将你的 scss 改成这样应该可行

:host(.hide-me) {
     display:  none;
}

参考了解更多信息

无法使用 @HostBinding 和 shadow dom 封装样式

Cannot style with @HostBinding and shadow dom encapsulation

sass

shadow-dom

angular