1

我是初学者，这里使用的术语可能没有正确应用。

我的应用程序包含三个组件。来自Project Clarity的一个外部组件clr-datagrid

    <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>

在搜索结果组件中，

@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。Emulated、clearance- icons.min.css '、clearance-ui.min.css 不适用于嵌套组件/自定义元素。

当我使用 ViewEncapsulation。Native , 它只在 Chrome 和 Opera 浏览器中正常工作。但不在 IE/Firefox/Safari 中。

当我使用 ViewEncapsulation。None，工作正常，但 CSS 溢出并影响 searhform cmp 样式。

我从在线阅读中了解到，问题出在 Shadow DOM 上，只有 Chrome 支持 Shadow DOM，其他不支持。我尝试使用webcomponents polyfill

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

任何人都可以帮助我如何将清晰的 css 和图标仅应用于组件，并且不会影响应用程序的其他部分？

4

0 回答 0