Question

我是初学者，此处使用的术语可能未正确应用。

我的应用有三个组件。来自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不适用于嵌套的component / custom-element。

当我使用ViewEncapsulation。原生时，它仅适用于Chrome和Opera浏览器。但不是在IE / Firefox / Safari中。

当我使用ViewEncapsulation。无时，工作正常但CSS会流失并影响searhform cmp样式。

我从在线阅读中了解到问题是关于Shadow DOM，只有Chrome支持Shadow DOM，而其他人则没有。我尝试使用webcomponents polyfill

index.html中的

<script src="../../../node_modules/webcomponents.js/webcomponents-hi-sd-ce.js"></script>（可能不是正确的方法）。

有人可以帮助我，我怎样才能将清晰度css和图标仅应用于组件，并且不会影响应用程序的其他部分？

如何将外部CSS应用于我的角度组件中的外部组件或仅将外部CSS应用于嵌套的外部组件

0 个答案: