Angular scss не работает $self из-за shadowcsshost?

Angular scss, или SASS (Syntactically Awesome Style Sheets), один из самых популярных инструментов для создания стилей в Angular приложениях. Однако иногда может возникнуть проблема, когда переменные, определенные в scss файле, не видны внутри компонента из-за проблемы с shadow DOM.

Shadow DOM — это новая технология, предоставляемая браузерами, которая позволяет изолировать стили и элементы веб-компонента. Каждый компонент Angular создает свой собственный внутренний shadow DOM, который изолирует стили и элементы компонента от других компонентов и глобального стиля приложения.

Вот почему переменные, определенные в scss файлах, становятся недоступными внутри компонента. Однако Angular предлагает несколько решений для этой проблемы. Вот некоторые из них:

1. Использование ::ng-deep. Оно позволяет обойти изоляцию shadow DOM и применить стили к элементам вложенных компонентов. Например, вы можете использовать ::ng-deep чтобы сделать переменные доступными внутри компонента:

::ng-deep {
  $self: red;
}

.some-element {
  color: $self;
}

2. Использование encapsulation: ViewEncapsulation.None. По умолчанию Angular использует ViewEncapsulation.Emulated (или шаблонную модель) для создания shadow DOM. Однако, если вы установите encapsulation: ViewEncapsulation.None для компонента, стили вашего компонента не будут изолированы в shadow DOM и переменные scss будут доступны внутри компонента:

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class MyComponentComponent {}

3. Использование глобальных стилей. Если вы хотите, чтобы переменные scss были доступными во всех компонентах вашего приложения, вы можете определить эти переменные в файле стилей (например, styles.scss) и импортировать его в главном файле styles.css:

// styles.scss
@import 'variables';

// variables.scss
$self: red;

// app.component.scss
.some-element {
  color: $self;
}

В итоге, с помощью этих методов вы сможете обойти проблему с доступом к переменным scss внутри компонента из-за shadow DOM в Angular.