无法使用 @HostBinding 和 shadow dom 封装进行样式设置答案

【问题标题】：Cannot style with @HostBinding and shadow dom encapsulation无法使用 @HostBinding 和 shadow dom 封装进行样式设置
【发布时间】：2020-12-11 05:29:53
【问题描述】：

我有以下角度分量

@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 设置为“隐藏我”，我会隐藏它。我在 bar.component.scss 中添加了以下内容：

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

DEMO

这没有任何作用，它与 shadow dom 封装有关。如果您删除该行，它会按预期再次工作。任何建议为什么这不再适用于 shadowDom？当然，有没有办法在启用 shadow dom 的情况下解决这个问题；）

【问题讨论】：

标签： angular sass shadow-dom

【解决方案1】：

改变你的 scss 看起来像这样应该可以工作

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

更多信息请参考this question

【讨论】：