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

Question

[Абра Кадабра]

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

Объявление компонента:

@Component({
    selector: 'dashboard',
    templateUrl: 'dashboard.html',
    styleUrls: ['dashboard.scss'],
})

Не рабочий стиль:

.dashboard {
    color: red;
}

Рабочий стиль:

:host {
    color: red;
}

Можно ли использовать `dashboard` селектор в `dashboard.scss`.

Answer 1

[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.

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

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

Comments

[Абра Кадабра]

Точно-точно.
Уже нашел, спасибо большое.