Как применить внешний CSS к внешнему компоненту в моем угловом компоненте или использовать внешний CSS только для вложенного внешнего компонента
Я новичок, терминология, используемая здесь, может быть неправильно применена.
Мое приложение состоит из трех компонентов. Один внешний компонент clr-datagrid из Project Clarity
<body>
<app-root>
<app-searchform>
<ss-multiselect-dropdown>
external library for making Dropdown Multiselect with bootstrap CSS
</ss-multiselect-dropdown>
</app-searchform>
<app-searchresult>
<clr-datagrid> external component for displaying result list </clr-datagrid>
</app-searchresult>
</app-root>
</body>
В компоненте searchresult,
@Component({
selector: 'app-searchresult',
templateUrl: './searchresult.component.html',
styleUrls: ['./searchresult.component.css',
'../../../node_modules/clarity-icons/clarity-icons.min.css',
'../../../node_modules/clarity-ui/clarity-ui.min.css'
],
encapsulation: ViewEncapsulation.Emulated
})
Проблема в,
Когда я использую ViewEncapsulation.Эмулированные, clarity-icons.min.css', clarity-ui.min.css не применяются к вложенному компоненту / пользовательскому элементу.
Когда я использую ViewEncapsulation.Родной, работает нормально только в браузерах Chrome и Opera. Но не в IE/ Firefox/ Safari.
Когда я использую ViewEncapsulation.Нет, работает нормально, но CSS не работает и влияет на стили cmp для поиска.
Из онлайн-чтения я понял, что проблема в Shadow DOM, только Chrome поддерживает Shadow DOM, другие нет. Я пытался использовать веб-компоненты polyfill
<script src="../../../node_modules/webcomponents.js/webcomponents-hi-sd-ce.js"></script> в index.html (возможно, это был не правильный путь).
Может ли кто-нибудь PLZ помочь мне, как я могу применить ясность CSS и значки только для компонента, и не повлияет на другие части приложения?