Angular Dart Components: cssUrl not working in Internet Explorer

Question

I have come across this strange problem and it is driving me nuts. It looks like a bug, but I don't know if maybe I am doing someting wrong.

The CSS attached to a component via cssUrl doesn't work on Internet Explorer. If I add some content to the html template and I use classes from the CSS, those classes are not applied in IE. However, the same code works fine in Dartium, Chrome and Firefox.

I have created a sample project in github showing the error: https://github.com/gonzalopezzi/ie-angulardart-shadowdom-bug

The project has the following dependencies:

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

(I have tried to avoid "any" but those are the latest versions of such packages)

I have a very simple component:

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 {
}

This is the css file (internet-explorer-bug.css):

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

And this is the template (internet-explorer-bug.html)

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

The component works properly in Dartium, Chrome and Firefox. It doesn't show the red background in Internet Explorer, though.

I have tested it in Internet Explorer 10 and 11. These are the results:

The red background is not displayed
The browser downloads the css file (I can see that in IE dev tools)
If I inspect the DOM, I see a strange css attribute assigned to the div with the name "background-color:red" and no value:

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

I have posted the same question in the mailing list (here). If I somebody helps me there I will post the solution here too.

Any help will be appreciated. Thanks in advance.

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2014-06-02T13:11:30

I guess this line causes the problem

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

This is deprecated. You should use

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

You need to change your pubspec.yaml too (shadow_dom to web_components)

Angular Dart Components: cssUrl not working in Internet Explorer

1 Answers