Мы создали веб-компонент, используя пользовательские элементы с Angular 8. Часть компонента - показать некоторые пользовательские значки (разработанные и упакованные как другое приложение). Как вы можете видеть в предыдущем вопросе , нам удалось связать все css в файл и показать их в автономном приложении, используя :host ::ng-deep, но без использования теневого DOM.
После переключения на теневой DOM (encapsulation: ViewEncapsulation.ShadowDom) в моем веб-компоненте и удаления устаревших ::ng-deep шрифты в приложении выглядят испорченными.
Единственное решение, которое я нахожу здесь и здесь , предполагает, что объявление шрифта должно происходить вне shadowDOM, например, внутри файла html, который включает в себя пользовательский файл компонента js (как отдельное приложение). В моем случае шрифты упакованы как другое приложение, и пользовательский веб-компонент будет использоваться во многих проектах с разными технологиями, которые могут не иметь возможности его включать.
Есть ли другой способ для пользовательских иконки (@ font-face) для работы в теневом DOM?