I am trying out a Polymer Dart App under Cordova. So I started with the Dart Editor Sample App.
I use a recent version of Polymer so I had to edit the sample code. Here is my pubspec.yaml
name: cortst
description: Cordova Test Application
dependencies:
polymer: '>=0.15.1+3 <0.16.0'
transformers:
- polymer:
entry_points:
- web/cortst.html
And here is the combined HTML and Dart. I think the initialization uses the new/approved technique:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample App</title>
<link rel="import" href="clickcounter.html">
<link rel="stylesheet" href="cortst.css">
<script type="application/dart">
import 'dart:async';
import 'package:polymer/polymer.dart';
void main() {
initPolymer().run( () {
Polymer.onReady.then( (_) {
new Future( () {
// stuff goes here!
});
});
});
}
</script>
</head>
<body>
<h1>A Test</h1>
<div id="sample_container_id">
<click-counter count="5"></click-counter>
</div>
</body>
</html>
To generate stand-alone JavaScript I run dart2js via the command line:
pub build --mode=debug
And these are the results:
- Dartium (37.0.2062.120 (292122) via Dart Editor 1.7.2) - OK
- Run as JavaScript on Chrome (38.0.2125.111 m) - OK
- Run as JavaScript on Firefox (33.0.3) - OK
- dart2js and run on Chrome - no shadow DOM.
- dart2js and run on Firefox - OK
When it fails the click counter is rendered (invisibly) as
<click-counter count="5"></click-counter>
This Chrome problem matters because the standard web host on Android is Chrome.
For brevity, I have embedded the Dart script in the HTML. I get the same results when I use a separate .dart file.
Perhaps I have overlooked something - it wouldn't be the first time...
