terrasea/clickcounter.html

## clickcounter.html
<!-- import polymer-element's definition -->
<link rel="import" href="packages/polymer/polymer.html">

<link rel="import"
          href="packages/paper_elements/paper_button.html">
<link rel="import"
          href="packages/core_elements/core_style.html">

<polymer-element name="click-counter" attributes="count">
  <template>
    <core-style ref="legacy-button"></core-style>
    <div>
      <paper-button on-tap="{{increment}}" label="Click me"></paper-button><br>
      <span>(click count: {{count}})</span>

    </div>
  </template>
  <script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>

## clickcountser.dart
import 'package:polymer/polymer.dart';

/**
 * A Polymer click counter element.
 */
@CustomTag('click-counter')
class ClickCounter extends PolymerElement {
  @published int count = 0;

  ClickCounter.created() : super.created() {
  }

  void increment() {
    count++;
  }
}

## index.html
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample app</title>

    <!-- include the web_components polyfills with support for Dart. -->
    <script src="packages/web_components/platform.js"></script>
    <script src="packages/web_components/dart_support.js"></script>

    <!-- import the click-counter -->
    <link rel="import" href="clickcounter.html">

    <link rel="import"
          href="packages/paper_elements/paper_dialog_transition.html">
    <link rel="import"
          href="packages/paper_elements/paper_dialog.html">
    <link rel="import"
          href="packages/paper_elements/paper_button.html">
    <link rel="import"
          href="packages/core_elements/core_style.html">

    <link rel="stylesheet" href="styled_paper.css">
  </head>
  <body>
    <core-style id="legacy-button">
      paper-button {
        text-transform: initial;
        font-family: {{g.fontFamily}};
        border: {{g.myColor}};
        padding: 2px 5px;
      }
      :host {
        background-color: blue;
      }
      button {
        color: blue;
      }
    </core-style>
    <script>
      CoreStyle.g.fontFamily = 'Times, sans-serif';
      CoreStyle.g.myColor = '5px orange solid';
    </script>
    <h1>Styled paper</h1>

    <p>Hello world from Dart!</p>
    <click-counter count="5"></click-counter>
    <!-- bootstrap polymer -->
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>
	<!-- import polymer-element's definition -->
	<link rel="import" href="packages/polymer/polymer.html">

	<link rel="import"
	href="packages/paper_elements/paper_button.html">
	<link rel="import"
	href="packages/core_elements/core_style.html">

	<polymer-element name="click-counter" attributes="count">
	<template>
	<core-style ref="legacy-button"></core-style>
	<div>
	<paper-button on-tap="{{increment}}" label="Click me"></paper-button><br>
	<span>(click count: {{count}})</span>

	</div>
	</template>
	<script type="application/dart" src="clickcounter.dart"></script>
	</polymer-element>
	import 'package:polymer/polymer.dart';

	/**
	* A Polymer click counter element.
	*/
	@CustomTag('click-counter')
	class ClickCounter extends PolymerElement {
	@published int count = 0;

	ClickCounter.created() : super.created() {
	}

	void increment() {
	count++;
	}
	}
	<!DOCTYPE html>

	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Sample app</title>

	<!-- include the web_components polyfills with support for Dart. -->
	<script src="packages/web_components/platform.js"></script>
	<script src="packages/web_components/dart_support.js"></script>

	<!-- import the click-counter -->
	<link rel="import" href="clickcounter.html">

	<link rel="import"
	href="packages/paper_elements/paper_dialog_transition.html">
	<link rel="import"
	href="packages/paper_elements/paper_dialog.html">
	<link rel="import"
	href="packages/paper_elements/paper_button.html">
	<link rel="import"
	href="packages/core_elements/core_style.html">

	<link rel="stylesheet" href="styled_paper.css">
	</head>
	<body>
	<core-style id="legacy-button">
	paper-button {
	text-transform: initial;
	font-family: {{g.fontFamily}};
	border: {{g.myColor}};
	padding: 2px 5px;
	}
	:host {
	background-color: blue;
	}
	button {
	color: blue;
	}
	</core-style>
	<script>
	CoreStyle.g.fontFamily = 'Times, sans-serif';
	CoreStyle.g.myColor = '5px orange solid';
	</script>
	<h1>Styled paper</h1>

	<p>Hello world from Dart!</p>
	<click-counter count="5"></click-counter>
	<!-- bootstrap polymer -->
	<script type="application/dart">export 'package:polymer/init.dart';</script>
	<script src="packages/browser/dart.js"></script>
	</body>
	</html>