Question

我遇到了这个奇怪的问题，这让我疯了。它看起来像一个bug，但我不知道我是否做错了。

通过 cssUrl 附加到组件的CSS无法在 Internet Explorer 上工作。如果我向html模板添加一些内容并使用CSS中的类，那么这些类不会在IE中应用。但是，相同的代码在Dartium，Chrome和Firefox中运行良好。

我在github中创建了一个示例项目，显示错误： https://github.com/gonzalopezzi/ie-angulardart-shadowdom-bug

该项目具有以下依赖项：

dependencies:
  browser: 0.10.0+2
  angular: 0.11.0
  shadow_dom: 0.10.0

（我试图避免＆＃34;任何＆＃34;但这些是此类软件包的最新版本）

我有一个非常简单的组件：

import 'package:angular/angular.dart';

@Component(selector: 'internet-explorer-bug', 
        templateUrl:'internet-explorer-bug/internet-explorer-bug.html', 
        cssUrl:'internet-explorer-bug/internet-explorer-bug.css',
        useShadowDom: true,
        publishAs: 'cmp')
class InternetExplorerBug {
}

这是css文件（internet-explorer-bug.css）：

.red-div {
  background-color: red;
}

这是模板（internet-explorer-bug.html）

<div id="main-div">
  <div class="red-div">Red background?</div>
</div>

该组件可在Dartium，Chrome和Firefox中正常运行。但它并没有在Internet Explorer中显示红色背景。

我已在 Internet Explorer 10和11 中对其进行了测试。结果如下：

红色背景 未显示
浏览器下载 css 文件（我可以在IE开发工具中看到）
如果我检查 DOM ，我会看到一个奇怪的css属性分配给div，名称为＆＃34; background-color：red＆＃34; 和没有价值：

.red-div { background-color：红色：; }

我在邮件列表中发布了相同的问题（here）。如果我有人帮助我，我也会在这里发布解决方案。

任何帮助将不胜感激。提前致谢。

Answer 1

我想这一行会导致问题

<script src="packages/shadow_dom/shadow_dom.min.js"></script>

这已被弃用。你应该使用

<script src="packages/web_components/platform.js"></script>

您还需要更改pubspec.yaml（shadow_dom至web_components）

Angular Dart组件：cssUrl在Internet Explorer中不起作用

1 个答案: