Question

我有一个角色组件

@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以外的其他浏览器中缺少什么？

Answer 1

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

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

1 个答案: