Вручную применить Angulars ViewEncapsulation.Emulated Shading на HTML - PullRequest
0 голосов
/ 01 июля 2019

Я недавно пытался внедрить HTML в мой угловой компонент.С помощью [innerHTML] и Angulars «bypassSecurityTrustHtml» -функции я быстро пришел к решению, которое работало для меня в 95% моих сценариев использования, но, к сожалению, не во всех.

Что такое HTML : HTML-код представляет собой электронное письмо (-Preview), которое обслуживается бэкэнд-сервисом.Это полный HTML-документ, содержащий фрагмент заголовка, который также может содержать специальные теги стиля.

В чем проблема : К сожалению, из-за природы HTML, определения внутритег в стиле электронной почты также применяется к приложению Angular.Таким образом, на мои угловые компоненты влияют эти определения стилей (иногда они имеют! Важный-флаг).Использование «ViewEncapsulation.ShadowDom» помогает, но не поддерживается IE11, что является обязательным!С другой стороны, «ViewEncapsulation.Emulated» по умолчанию не применяется к HTML, который связан с помощью [innerHTML].

Для решения этой проблемы в настоящее время я использую библиотеку Juice для встраивания стилей изтеги стиля в HTML-формате предварительного просмотра электронной почты.Это работает, но, с моей точки зрения, было бы лучше (пере) использовать поведение, которое Angular использует для эмуляции Shadow Dom.То есть добавить дополнительные атрибуты к узлам в DOM Email-Preview и переписать селекторы стиля в заголовке, чтобы выбрать только элементы с определенным атрибутом (ами).Поэтому мой вопрос заключается в том, могу ли я использовать функцию Angular или известную стороннюю библиотеку, чтобы эмулировать это теневое доминирование для данного документа HTML-String / JavaScript перед его привязкой через [innerHtml]

...