Почему внутри стилей компонента :host работает, а его селектор(компонента) — нет?

Angular 6.0
Создаю внутренние стили для компонента, но не могу использовать его селектор(компонента) внутри .scss файла.
Причем этот селектор не выбирается, как внутри стилей компонента, так и глобальных стилях.

Объявление компонента:
@Component({
    selector: 'dashboard',
    templateUrl: 'dashboard.html',
    styleUrls: ['dashboard.scss'],
})


Не рабочий стиль:
.dashboard {
    color: red;
}


Рабочий стиль:
:host {
    color: red;
}


Можно ли использовать `dashboard` селектор в `dashboard.scss`.
  • Вопрос задан
  • 360 просмотров
Решения вопроса 1
0xD34F
@0xD34F
Можно ли использовать `dashboard` селектор в `dashboard.scss`.

Нельзя.

Читайте документацию, так всё сказано:

The :host selector is the only way to target the host element. You can't reach the host element from inside the component with other selectors because it's not part of the component's own template. The host element is in a parent component's template.


Хотя... если нельзя, но очень хочется - то можно, не так ли?

Если отключить инкапсуляцию стилей компонента, то заработает так, как вам хочется. Правда, я бы этого делать не стал.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы