Использование глобального файла style.scss для управления :host каждого компонента Angular. ⇐ CSS

[Anonymous]

Я заметил, что каждое представление в моем приложении имеет файл стиля, начинающийся вот так.

Код: Выделить всё

:host {
display: flex;
background-color: blue;
}
div.foo {
background-color: red;
}

Это казалось мудрым решением уменьшить избыточность и перенести общее определение в styles.scss. При этом я заметил, что, хотя стиль DIV продолжал работать должным образом, эффект псевдоселектора исчез.
Поиск в Google дал мне то, чего я не могу достичь. элемент хоста из внутри компонента, но он ничего не говорит об изменении его снаружи (что, конечно, мой глобальный styles.scss является). Я также нашел блог об инкапсуляции представлений Angular, где подробно обсуждаются детали, однако без упоминания глобального styles.scss.
Подводя итог, я нашел много информации об обработке :host и много информации о применении глобального styles.scss. Однако я видел довольно ограниченное пересечение между ними. Такое отсутствие явного подтверждения часто подразумевает, что это неосуществимо или, по крайней мере, крайне не рекомендуется.
Неужели я неправильно понял мысль, изложенную в документах? Если да, то как я могу управлять speudo-классом :host из моего глобального styles.scss? Или это особый случай «нет-нет», и это невозможно сделать?

Подробнее здесь: https://stackoverflow.com/questions/627 ... -component