Перевод (а точнее оригинал) моей статьи опубликованной здесь

Многие Angular разработчики и верстальщики, пишущие CSS/SCSS код в Angular-приложениях сталкивались с ситуацией, когда надо применить стили к компоненту вложенному в текущий и не до конца разобравшись как это работает, выключали инкапсуляцию стилей или добавляли ng-deep, при этом не учитывая некоторых нюансов, что в последствии приводит к проблемам. В данной статье я попытаюсь максимально просто и сжато изложить все детали.

Когда у компонента включена инкапсуляция стилей (по умолчанию она включена и в большинстве случаев стоит оставить ее включенной), стили содержащиеся в файле\файлах стилей компонента будут применяться только к элементам этого компонента. Это очень удобно, вам не нужно следить за уникальностью селекторов, не нужно использовать БЭМ или придумывать длинные имена классов и следить за их уникальностью, хотя вы по-прежнему можете это делать, если хотите. Во время компиляции проекта Angular сам добавит к каждому элементу уникальный атрибут, например, _ngcontent-ool-c142 и заменит ваш класс .my-class на .my-class[_ngcontent-ool-c142] (это в случае ViewEncapsulation.Emulated, которая включена по умолчанию, если вы укажете `ViewEncapsulation.ShadowDom`, поведение будет другое, но результат тот же).

Теперь давайте представим, что у нас есть компонент ComponentA

<div class="checkbox-container">
  <mat-checkbox>Check me</mat-checkbox>
</div>

в который вложен mat-checkbox из Angular material (это может быть и ваш собственный компонент, не обязательно компоненты из библиотек).

Внутри компонента mat-checkbox есть label,

<mat-checkbox>
	<label>...
</mat-checkbox>

к которому мы хотим добавить border. Если мы напишем в файле стилей компонента

mat-checkbox label {
  border: 1px solid #aabbcc;
}

то после применения ViewEncapsulation.Emulated селектор будет примерно таким

mat-checkbox[_ngcontent-uiq-c101]   label[_ngcontent-uiq-c101] {
  border: 1px solid #aabbcc;
}

т. е. border применится к label с атрибутом _ngcontent-uiq-c101, но у всех дочерних элементов внутри mat-checkbox будет другой атрибут, т. к. label находится внутри другого компонента, и у него либо будет атрибут с другим ID (id компонента mat-checkbox), либо его не будет вообще, если у компонента в свою очередь отключена инкапсуляция. В данном случае атрибута не будет совсем, т. к. у mat-checkbox как и у других компонентов из Angular Material ViewEncapsulation.None.

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

Если вам интересно, как именно работает Emulated инкапсуляция в Angular, вы можете найти множество подробных статей на эту тему, здесь же я приведу очень краткое описание, чтобы не раздувать статью. Итак, если у компонента есть инкапсуляция, то к самому компоненту добавится атрибут _nghost-ID, а к каждому вложенному элементу добавится атрибут _ngcontent-ID и ко всем стилям в этом компоненте в селектор добавится [_ngcontent-ID]. Таким образом все стили будут применяться ТОЛЬКО к элементам расположенным непосредственно внутри этого компонента.

Как же быть если нам надо применить стили к элементам внутри вложенного компонента (т. е. в нашем примере к label внутри mat-checkbox)

Для того чтобы применить стили, у нас есть три варианта:

• отключить инкапсуляцию стилей в ComponentA

• использовать ng-deep

• поместить css код в глобальные стили, т.е. стили в styles.(s)css или в других файлах указанных в секции styles в angular.json

Давайте рассмотрим их подробнее

Отключение инкапсуляции

В этом случае все стили внутри компонента станут «глобальными», причем это произойдет только после того, как компонент будет создан, т. е. после того как пользователь посетил тот раздел приложения, где используется данный компонент, что сильно затрудняет выявление данной проблемы. Давайте отключим инкапсуляцию стилей у нашего компонента

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

вспомним, что в файле стилей у нас

mat-checkbox label {   
  border: 1px solid #aabbcc; 
}

до тех пор пока пользователь не открыл страницу, где используется компонент ComponentА, все остальные mat- checkbox в приложении выглядят без рамки, но после того, как ComponentА создан, css код приведенный выше динамически добавится в секцию <style> в DOM дерево и после этого все mat-checkbox станут использовать эти стили.

Для того, чтобы предотвратить такой явно нежелательный эффект, мы можем ограничить область действия стилей, применив более специфичный селектор. Например, добавим класс checkbox-container к элементу родителю mat-checkbox,

<div class="checkbox-container">   
   <mat-checkbox>Check me</mat-checkbox> 
</div>

и исправим селектор на такой

.checkbox-container mat-checkbox label {   
	border: 1px solid #aabbcc; 
}

теперь рамку получат только чекбоксы расположенные внутри элемента с классом checkbox-container. Но вместо того, чтобы добавлять класс с уникальным именем и следить за их неповторяемостью, гораздо проще использовать селектор компонента, т.к. он будет заведомо уникальным

app-component-a mat-checkbox label {   
  border: 1px solid #aabbcc; 
}

Вывод: если вы отключаете инкапсуляцию, не забывайте добавлять селектор компонента ко ВСЕМ стилям внутри компонента, в случае SCSS\SASS, просто оборачивайте весь код в:

app-component-a {   
  ... 
}

Псевдо-класс ng-deep

Теперь давайте включим инкапсуляцию обратно, убрав encapsulation: ViewEncapsulation.None из декоратора @Component, и добавим в css селектор ::ng-deep

::ng-deep mat-checkbox label {   
  border: 1px solid #aabbcc; 
}

ng-deep заставит фреймворк сгенерировать стили без добавления к ним атрибутов , в результате в DOM добавится код:

mat-checkbox label{border:1px solid #aabbcc}

который будет влиять на все mat-checkbox приложения, точно так же как если бы мы добавили это в глобальные стили или отключили инкапсуляцию, как мы делали ранее. Чтобы избежать этого поведения, мы можем опять ограничить область распространения селектором компонента

::ng-deep app-component-a mat-checkbox label {   
  border: 1px solid #aabbcc; 
}

или поступить еще проще и использовать псевдо-класс :host

:host ::ng-deep mat-checkbox label {   
  border: 1px solid #aabbcc; 
}

что гораздо удобнее и надежнее (представьте, что вы переименовали селектор компонента и забыли изменить его в коде css).

Как это работает? Очень просто - Angular сгенерирует в данном случае вот такие стили

[_nghost-qud-c101] mat-checkbox label{border:1px solid #aabbcc}

где _nghost-qud-c101 это атрибут добавленный к нашему ComponentA, т. е. border применится ко всем label внутри любого mat-checkbox, лежащего внутри элемента с атрибутом _nghost-qud-c101, который есть ТОЛЬКО у ComponentA.

<app-component-a _ngcontent-qud-c102 _nghost-qud-c101>

Вывод: если используете ::ng-deep ОБЯЗАТЕЛЬНО добавляйте :host или создайте mixin и везде используйте его

@mixin ng-deep {
  :host ::ng-deep {
    @content;
  }
}

@include ng-deep {
  mat-checkbox label {
    border: 1px solid #aabbcc;
  }
}

Многих смущает тот факт, что ng-deep уже давно помечен как deprecated. У команды Angular были планы отказаться от использования этого псевдо-класса, но позже это решение было отложено на неопределенный срок, по крайней мере до тех пор, пока не появятся новые альтернативы. Если сравнивать ng-deep и ViewEncapsulation.None, то в первом случае мы по крайней мере отключаем инкапсуляцию не для всех стилей компонента, а только для тех, которые нам нужны. Даже если у вас есть компонент, где все стили, предназначены для дочерних компонентов, ng-deep кажется более выигрышным, т. к. вы в последствии можете добавить стили для собственных элементов компонента, и в этом случае вы их просто напишете выше\ниже кода вложенного в :host ::ng-deep {} и они будут работать как обычно, а при отключенной инкапсуляции у вас уже нет такой возможности.

Напоследок хочу добавить пару слов о том, как «стилить» компоненты из библиотек. Если вам нужно изменить вид по умолчанию для, скажем, всех mat-select в вашем приложении, чаше всего лучше сделать это в глобальных стилях. Иногда, некоторые разработчики предпочитают поместить эти стили в отдельный SCSS файл и импортировать его везде где нужно, но в этом случае при сборке проекта, эти стили продублируются в каждом chank-е (скомпилированный js файл для каждого lazy- или shared-модуля), где хотя бы один из компонентов, попавших в этот chank использует этот файл стилей.