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