Содержит стиль моего углового веб-компонента, чтобы он не сливался с компонентом, для которого он используется

Question

Мы создали новый веб-компонент, используя Angular v6.Теперь проблема в том, что когда я использую компонент в пустом приложении, он работает безупречно, но когда я использую его в существующем приложении, он полностью разрушает CSS.

Причина, по которой я могу найти, заключается в том, что я запускаю программу начальной загрузки для сборкимое существующее приложение, а также использующее загрузчик для создания этого веб-компонента, оно вызывает совпадение _ngcontent- * для обоих этих компонентов и затем сливается друг с другом.как row.[_ngcontent-c1] один такой пример Как мы можем убедиться, что он не кровоточит?

Я даже вручную пытался изменить стиль файла js веб-компонента с [ngcontent-%COMP%] на [ngcontent-mine%COMP%], но ничего не работаетизменить даже в источниках

Источники, которые я отлаживал:

https://github.com/angular/angular/pull/17745?#issuecomment-385561001 и https://github.com/angular/angular/pull/17745#issuecomment-418658799 ... чтобы помочь себе.

Также смотрел на Angular Elements - CSS внешней библиотеки

Answer 1

Если вы используете стили из своего углового компонента, которые вы представили как веб-компонент, используя @ angular / elements, у вас истекает кровью, вам нужно установить ViewEncapsulation на ViewEncapsulation.ShadowDom, который использует спецификацию ShadowDOM v1 в Angular. компонент, который передается в createCustomElement.

Обратите внимание, что ShadowDOM v1 НЕ поддерживается в IE11, и вы должны соответственно заполнить его.

Любые стили в вашем веб-компоненте будут находиться внутри корневого каталога теней и не будут влиять на внешний вид.

https://angular.io/api/core/ViewEncapsulation