CSS doesn't get applied in a component template

Question

i have the following table component and i am using angulardart 0.11 and dart 1.4

     @Component(
            selector: 'table-component',
            publishAs: 'ctrl',
            template: '''<table class="table table-striped table-bordered table-condensed">
                            <thead>
                               <tr>
                                 <th ng-repeat="col in ctrl.ItemsSource.ColumnDefs">{{col.displayName}}</th>
                               </tr>
                            </thead>
                             <tbody>
                               <tr ng-repeat="item in ctrl.ItemsSource.Items">
                                 <td ng-repeat="col in ctrl.ItemsSource.ColumnDefs">
                                    {{item.properties[col.name].value}} 
                                 </td>
                               </tr>
                            </tbody>
                         </table>'''
        )
        class TableComponent {

             Scope scope;
             ItemsCollection ItemsSource;

         TableComponent(this.scope) {

           var columnDefs =[new ColumnDef(name:"id",displayName:"ID",isPrimaryKey:true),
                            new ColumnDef(name:"firstname",displayName:"First Name"),
                            new ColumnDef(name:"lastname",displayName:"Last Name"),
                            new ColumnDef(name:"language",displayName:"Language")];

           var items = [new DynamicItem({'id':new DynamicProperty<int>('id',0),
                                         'firstname':new DynamicProperty<String>('firstname','Some'),
                                         'lastname':new DynamicProperty<String>('lastname','One'),
                                         'language':new DynamicProperty<String>('language','English')}),
                        new DynamicItem({'id':new DynamicProperty<int>('id',1),
                                         'firstname':new DynamicProperty<String>('firstname','Another'),
                                         'lastname':new DynamicProperty<String>('lastname','One'),
                                         'language':new DynamicProperty<String>('language','Italian')})];

           this.ItemsSource = new ItemsCollection(columnDefs,items);


       }
 }

the template has some bootstrap css classes applied, but when it get rendered the css doesnt get applied in the component and here is what i get

the first table is from the component and the second is an html table and both have same css classes applied, so why doesnt the css classes get applied to my component?

Answer 1

When you have added the Bootstrap CSS to the page it won't work. The Angular.dart components by default create a shadowDOM around your components content. Bootstrap doesn't support shadowDOM and the selectors won't reach into the shadowDOM.

You can either set the attribute useShadowDom: false (like selector, publishedAs, ...) which creates components without shadowDOM
or you can add the Bootstrap CSS to the component using the attribute cssUrl which makes them scoped styles. You need to add this to every component. The browser should recognize it's the same URL every time and fetch the file only once though.