dart - CSS不会应用在组件模板中

Question

我有以下表格组件，我正在使用angulardart 0.11和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);


       }
 }

模板有一些自举的css类，但是当它被渲染时css没有被应用到组件中，这就是我得到的

第一个表来自组件，第二个表来自html表，并且都应用了相同的css类，那么为什么不将css类应用于我的组件？

Answer 1

将Bootstrap CSS添加到页面后，它将无法使用。默认情况下，Angular.dart组件会在组件内容周围创建一个shadowDOM。 Bootstrap不支持shadowDOM，选择器也不会进入shadowDOM。

您可以设置属性useShadowDom: false(例如selector，publishedAs，...)，该属性创建的组件没有shadowDOM
或者，您可以使用属性cssUrl将Bootstrap CSS添加到组件中，从而使它们成为作用域样式。您需要将此添加到每个组件。浏览器每次都应该识别出相同的URL，但是只提取一次文件。