It appears that my Polymer Dart custom elements that were once working now stopped firing. Dartium displays in localhost the h1 tag but not my custom elements.
The only Dart Editor error/warning I get is:
"(from html5lib) Unexpected start tag (link). Expected DOCTYPE. See http://goo.gl/5HPeuP#polymer_40 for details."
This warning message appears on every
<link rel="import" href="packages/polymer/polymer.html">
but as best I can see this is a known issue which should not impede application execution.
My troubleshooting efforts to date include: - Running pub cache repair from command line - Manually deleting package cache directory and running pub get again. - Downloading and running polymer-and-dart-codelab-master.zip (I get the same behavior)
How can I diagnose this issue?
Pubspec.yaml contents:
name: mpower
description: Sample app built with the polymer.dart package
environment:
sdk: '>=1.2.0 <2.0.0'
dependencies:
polymer: '>=0.15.1 <0.16.0'
dev_dependencies:
unittest: '>=0.10.0 <0.11.0'
transformers:
- polymer:
entry_points:
- web/index.html
Index.html Contents:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mosaic mPower</title>
<link rel="import" href="est_list.html">
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>Mosaic mPower</h1>
<est-list></est-list>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>
est-list.html
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="est_form.html">
<link rel="import" href="est_element.html">
<polymer-element name="est-list">
<template>
<style>
select {
margin-bottom: 30px;
display: inline;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 2px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
</style>
<div>
<label>Filter: </label>
<select value="{{filterValue}}" on-change="{{filter}}">
<option template repeat="{{filter in filters}}">
{{filter}}
</option>
</select>
</div>
<div on-estvalidated="{{addEst}}"
on-formnotneeded="{{resetForm}}">
<est-form est="{{newEst}}"></est-form>
</div>
<div on-deleteest="{{deleteEst}}"
on-levelchanged="{{filter}}">
<template repeat="{{est in filteredEsts}}">
<est-element est="{{est}}"></est-element>
</template>
</div>
</template>
<script type="application/dart" src="est_list.dart"></script>
est-list.dart
import 'package:polymer/polymer.dart';
import 'model.dart' show Est;
import 'dart:html' show Event, Node;
/*
* Class to represent a collectionon-est of Est objects.
*/
@CustomTag('est-list')
class EstList extends PolymerElement {
static const ALL = "all";
/*
* Field for a new Est object.
*/
@observable Est newEst = new Est();
/*
* Collection of ests. The source of truth for all ests in this app.
*/
@observable List<Est> ests = toObservable([]);
/*
* Sets the new est form to default to the intermediate level.
*/
String get defaultCustomer => Est.CUSTOMERS[0];
/*
* List of filter values. Includes the levels defined in the model, as well
* as a filter to return all ests.
*/
final List<String> filters = [ALL]..addAll(Est.CUSTOMERS);
/*
* String that stores the value used to filter ests.
*/
@observable String filterValue = ALL;
/*
* The list of filtered ests.
*/
@observable List<Est> filteredEsts = toObservable([]);
/*
* Named constructor. Sets initial value of filtered ests and sets
* the new est's customer to the default.
*/
EstList.created() : super.created() {
filteredEsts = ests;
newEst.customer = defaultCustomer;
}
/*
* Replaces the existing new Est, causing the new est form to reset.
*/
resetForm() {
newEst = new Est();
newEst.customer = defaultCustomer;
}
/*
* Adds a est to the ests list and resets the new est form. This
* triggers estsChanged().
*/
addEst(Event e, var detail, Node sender) {
e.preventDefault();
ests.add(detail['est']);
resetForm();
}
/*
* Removes a est from the ests list. This triggers estsChanged().
*/
deleteEst(Event e, var detail, Node sender) {
var est = detail['est'];
ests.remove(est);
}
/*
* Calculates the ests to display when using a filter.
*/
filter() {
if (filterValue == ALL) {
filteredEsts = ests;
return;
}
filteredEsts = ests.where((est) {
return est.customer == filterValue;
}).toList();
}
/*
* Refreshes the filtered ests list every time the ests list changes.
*/
estsChanged() {
filter();
}
}
<!DOCTYPE html>to your component? – Günter Zöchbauer