为什么此组件不应用CSS规则？

Question

我有一个称为app-list-container的组件，其结构如下：

HTML

<ul [attr.styleName]="styleName" [style.flexGrow]="flexGrow">
    <!-- ITEM <li> -->
    <ng-content></ng-content>
</ul>

SCSS

@import 'placeholders/scrollbar';

ul {
    &[styleName='CHAT_MESSAGE'],
    &[styleName='CHAT_LAST_MESSAGE'] {
        @extend %scrollbar-y;
    }
}

由此，我在该组件内部生成了项目（<li>）...现在我不明白为什么它不应用此css规则。

[仅当我将规则插入他的父亲（app-list-container）时才应用该规则，对我来说，通过父亲插入样式也没有意义。

下图中的通知是，css已应用于html元素，但如果将其应用于<ul> 不起作用，但是如果将其应用于父元素，它将起作用（[<app-list-containr>）：

怎么办？ （注意：我喜欢这样做，并且知道正确的模式）。