如何使样式NgComponent在Chrome / Firefox中运行,

时间:2014-02-15 16:17:17

标签: dart angular-dart

我有一个角色组件

@NgComponent(
  selector: 'mycomponent',
  template: r''' ... some markup ...''',
  cssUrl: 'packages/myapp/components/mycomponent/mycomponent.css'
)
class MyComponent {
}

mycomponent.css包含许多样式,例如

:host div.someclass {
  border: 3px solid #aeaeae;
  /*... and some other */
}

index.html包含

<head>
    <title>MyApp</title>
    <script src="packages/shadow_dom/shadow_dom.debug.js"></script>
    <!-- shadow_dom.min.js doesn't work with firefox
         https://github.com/Polymer/ShadowDOM/issues/372 
       <script src="packages/shadow_dom/shadow_dom.min.js"> -->
</head>

这在Dartium中运作良好。

当我运行pub build并在Chrome或Firefox中运行结果时,将忽略所有样式。 检查Chrome和Firefox中的元素显示是否已将包含所有样式的样式标记添加到<mycomponent>标记的第一个子项。

我在Dartium以外的其他浏览器中缺少什么?

1 个答案:

答案 0 :(得分:1)

我认为您可能在pubspec文件(shadow_dom: any)中缺少对影子dom的依赖。您还需要html(<script src="packages/shadow_dom/shadow_dom.min.js"></script>)中的脚本。我尝试从angular.dart.tutorial项目运行示例,特别是Chapter_04,它在Chrome和FF中运行良好。