1

I am a beginner, terminologies used here might be not properly applied.

My app has three components. One external component clr-datagrid from 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>

In searchresult component,

@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
})

The Problem is,

When I use ViewEncapsulation.Emulated, clarity-icons.min.css', clarity-ui.min.css are not applied to nested component/ custom-element.

When I use ViewEncapsulation.Native, It works properly only in Chrome and Opera browsers. But Not in IE/ Firefox/ Safari.

When I use ViewEncapsulation.None, works fine but CSS bleed out and affect searhform cmp styles.

What I have understood from online reading that the problem is about Shadow DOM, only Chrome support Shadow DOM, others not. I tried to use webcomponents polyfill

<script src="../../../node_modules/webcomponents.js/webcomponents-hi-sd-ce.js"></script> in index.html (may it was not the right way).

Could anyone plz help me that how can I apply clarity css and icons only to component, and will not affect other parts of the app ?

SayedRakib
  • 181
  • 1
  • 2
  • 10
  • A solution here: http://stackoverflow.com/a/37355195/4600982 – Supersharp Apr 08 '17 at 00:23
  • @Supersharp with ViewEncapsulation.Native, I tried your suggestion but did not work as expected. it loads the css in head tag but my shadow tree does not get styled. because styles get _ngcontent attribute but not my shadow elements. – SayedRakib Apr 10 '17 at 09:09
  • the – Supersharp Apr 10 '17 at 09:13

0 Answers0