I am creating a (very large) select element that needs to be added in several places on a single page. Instead of recreating it for every instance I am making a single prototype and then doing a deep clone on it for each instance and adding some new properties to the new instance.
Everything works as expected in Dart but fails when I compile it to JavaScript.
Below is the minimum steps to reproduce the problem:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="application/dart">
import "dart:html";
main()
{
List<String> languages = ["Japan", "Ireland", "Spain"];
SelectElement langSelect = new SelectElement();
for (int i = 0; i < languages.length; i++) {
OptionElement option = new OptionElement();
option.text = languages[i];
print("Before Assigning child");
langSelect.children.add(option);
print("After Assignment");
}
}
</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<p id="text">Test</p>
</body>
</html>
The expected output is for "Before Assigning child" and "After Assignment" to be printed three times. This is the case when run in Dart. After compiling to JavaScript I get "Before Assigning child" printed and then I get the following error when run in Dartium:
Uncaught Error: Assertion failed shadow_dom.debug.js:1437
assert shadow_dom.debug.js:1437
assertIsNodeWrapper shadow_dom.debug.js:2592
mixin.appendChild shadow_dom.debug.js:2780
VG.h html_dart2js.dart:7928
E2 test.html.0.dart:17
Iq test.html_bootstrap.dart:11
aX.vV isolate_helper.dart:248
Rq isolate_helper.dart:66
(anonymous function) test.html_bootstrap.dart.js:4350
init.currentScript test.html_bootstrap.dart.js:4330
(anonymous function) test.html_bootstrap.dart.js:4344
(anonymous function)
Dart Editor: version 0.8.7_r29341 Dart SDK: version 0.8.7.0_r29341
I got this working by updating the Dart editor to version 0.8.10_r30036, Dart SDK to version 0.8.10.6_r30036 and running pub update.