我有一个 Angular 组件
@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中可以正常工作。
当我在Chrome或Firefox中运行
pub build并运行结果时，所有样式都将被忽略。Inspect元素在Chrome和Firefox中显示，包含所有样式的样式标签已添加到
<mycomponent>标记的第一个子项中。我想在Dartium以外的其他浏览器中实现此功能的目的是什么？
最佳答案
我认为您可能在pubspec文件(shadow_dom: any)中缺少对影子dom的依赖。您还需要在html中添加脚本(<script src="packages/shadow_dom/shadow_dom.min.js"></script>)。我尝试从angular.dart.tutorial项目(特别是Chapter_04)运行示例，它在Chrome和FF中运行良好。
关于dart - 如何使NgComponent样式在Chrome/Firefox中工作，，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21800149/