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

Мы создали новый веб-компонент, используя 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 внешней библиотеки


angular web-component angular-elements
person Rahul Singh    schedule 08.09.2018    source источник
comment
попробуйте изучить свойство компонента ViewEncapsulation. Если я правильно помню, это либо ShadowDom, либо None.   -  person Yousuf Jawwad    schedule 15.09.2018
comment
это не работает, я говорю здесь о веб-компонентах с угловым   -  person Rahul Singh    schedule 15.09.2018

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

person Collin Stevens    schedule 27.10.2018
comment
есть ли что-то известное как ViewEncapsulation.ShadowDOM в Angular, не могли бы вы указать некоторые ссылки в ANgular Doc, так как я не вижу никаких ссылок на это - person Rahul Singh; 29.10.2018
comment
Хорошо, плохо, есть что-то вроде этого недавно добавленного, я думаю, это причина, по которой они говорят следовать документу, вот ссылка, если кому-то это нужно ССЫЛКА - person Rahul Singh; 29.10.2018