Why is this component not applying the css rule?

Question

I have a component called app-list-container, the structure of which is as follows:

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

With this I generate the items (<li>) inside this component ... Now I don't understand why it is not applying this css rule.

The rule is only applied when I insert it in his father (app-list-container), for me it does not make sense to also insert the style through the father.

Notice in the image below that the css is being applied to the html element, but if it is applied to the <ul> it doesn't work, but it works if it is applied to the parent (<app-list-containr>):

What to do? (Note: I like to do and know the CORRECT mode).

Answer 1

For those who want to know, I did it as follows:

TS:

export class ListContainerComponent implements OnInit {
    @HostBinding('attr.styleName') hostStyleName: IListStyleName;
    @Input() styleName: IListStyleName;
    @Input() flexGrow = ICssFlexGrow.INITIAL;

    constructor() {}

    ngOnInit(): void {
        this.checkInput();
        this.setHostStyleName(this.styleName);
    }

    protected checkInput(): void {
        if (!IListStyleName[this.styleName.toUpperCase()]) {
            throw new Error(`The inserted style: "${this.styleName}" does not exist in this component!`);
        }

        if (!ICssFlexGrow[this.flexGrow.toUpperCase()]) {
            throw new Error(`The inserted flex-grown: "${this.flexGrow}" does not exist in this component!`);
        }
    }

    protected setHostStyleName(styleName: IListStyleName): void {
        this.hostStyleName = styleName;
    }
}

SCSS:

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