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

Angular гибкий фреймворк с большим количеством функционала и конфигураций. Одна из таких конфигураций это отключение encapsulation в компоненте. Может показаться что это хорошая опитимизация, но за этим скрывается критическая проблема добавления стилей.
Эту проблему я ракрыл в этом видео, это поможет вам избежать проблем на реальном проекте

==============================
Код готового урока:
==============================
Инструкция по установке angular проекта:
Вариант 1:
Вариант 2:
Загрузите зависимости (npm install)
Можно запускать проект (ng serve)
==============================

Выбор редактора код это дело каждого, но в этом плейлисте я использую webstorm. Как настроить один из популярнейших редакторов ниже:

Не забываем что SQL важен независимо чем планируешь заниматься при веб разработке, даже если планируешь быть менеджером проектов.

Спасибо что продолжаете смотреть меня и радовать комментариями.

---- Соц сети
Телеграм, где можно узнать о новых видео и получать доп контент
P.S. В youtube я отвечаю быстрее чем в telegram, буду рад комментам в youtube

----
Чтобы поддержать канал
1) Можно поставить лайк (или дизлайк, если не понравилось видео)
2) Оставить комментарий более 5 слов
3) Досмотреть видео до конца (так удержание будет выше и мне это поможет в продвижении)
4) Оставить отзыв в комментариях, что можно улучшить в видео, чтобы не хотелось его закрывать

#directives #angular #grommax

Материально поддержать канал можно следующим способом
2) Пройти опрос, чтобы помочь выбрать подходящие варианты поддержки

Оглавление
00:00 - Введение
04:45 - ViewEncapsulation.None
06:32 - ::ng-deep для глобальных стилей
07:21 - Глобальные стили в компоненте - зло
10:09 - не используй ::ng-deep без префикса
10:50 - Use Case для ViewEncapsulation.None
11:54 - Краткий гайд

[killxflip]

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

[vitaliit.]

Максим, и снова спасибо за видео!

Хотел бы добавить, что данная ошибка не всегда присуща начинающим разработчикам. У меня на проекте есть коллега, который типа senior-fullstack (с бекэнда начинал), так он жутко не любит конструкцию :host ::ng-deep .some-class из-за подсветки deprecated и отключает в своих компонентах инкапсуляцию, а стили переписывает как <имя-кастомного-тега> и в него все складывает🙂

[alexeyrusakov]

Максим, добрый день!) Наткнулся на ваш канал, много интересного и полезного контента, спасибо! Я немного знаком с ангуляром(основы) но хочу углубить знания и попрактиковаться. Подскажите, какие видео у вас лучше посмотреть?

[timurbirgalin]

Всем привет! У меня вопрос по ViewEncapsulation.None: у нас на проекте мы используем его в подавляющем большинстве компонентов, мы также используем две собственных UI-библиотеки. Я правильно понимаю, что в данном случае отключение инкапсуляции позволяет стилям библиотек применяться и корректироваться в самих компонентах? К слову, мы всегда ограничиваем область видимости рамками конкретного компонента, чтобы не было аффекта на внешний код.
P.S. Спасибо автору за работу, очень полезные и интересные видео:)

[tynoheaekbat]

в названии видео опечатка - "глоАБльных", вместо "глоБАльных" :) спасибо за видео!

[UCCGDMTjasAdhELHZlZNg]

Я так понимаю если задавать уникальные названия для классов и писать стили только в них, проблема не особо серьезная.

[RK-gmpd]

Спасибо за видео. На сколько прцентов Ангуляр "баг как таковой"? )) Почему не уберут из Ангуляра все єти неєкспектид бихєвиар и деприкейтет и викатят чистую версию? Учить Ангюлар - єто жах