Home
Note: This is a guide for Polymer 1.0, which is not yet released. You can play around with it today by using a git dependency on the 1.0.0-rc.2 branch of this repo. For information on Polymer <=0.16.x, visit the archive of dartlang.org/polymer-old.
Use Polymer Dart—a Dart port of Polymer—to build structured, encapsulated, client-side web apps with Dart and web components.
With Polymer Dart (also known as polymer.dart), you can:
- Use Polymer custom elements.
- Design your own HTML tags to encapsulate style, structure, and behavior.
- Create live, two-way bindings between Dart objects and DOM nodes.
- Use emerging web standards—Custom Elements, HTML Imports, Shadow DOM, and more—today.
## Structuring your app
Apps that use Polymer Dart follow the
pub package layout conventions.
As a consequence, the source code for a Polymer Dart app
starts with a top directory containing a
pubspec.yaml file and a web directory:
The web directory contains HTML files that are
entry points—pages that users can visit.
Other files (Dart files, CSS, images, and so on)
can also be in the web directory.
The pubspec.yaml file has metadata about the app,
such as the pub packages that it depends on.
Learn more at Imports and Your App's Directory Structure.
## Installing Polymer Dart
Get Polymer Dart from pub.dartlang.org, the Dart package hosting service.
Edit your pubspec.yaml file to depend on the polymer package and
use the polymer transformer:
dependencies:
polymer: ^1.0.0
web_components: ^0.12.0
transformers:
- polymer:
entry_points:
- web/index.html
Then, run pub get to download the package and link it into your app.
## Using custom elements
Here's an example of some HTML code
that uses a <paper-input> element
from the polymer_elements package:
index.html:
<head>
...
<link rel="import" href="packages/polymer_elements/paper_input.html">
...
</head>
<body unresolved>
<paper-input label="Type something..."></paper-input>
...
<script type="application/dart" src="index.dart"></script>
</body>index.dart:
export 'package:polymer/init.dart';For more information, see Using Elements.
## Creating custom elements
You can extend the lexicon of HTML with your own custom elements, as described in the Feature Overview.
### Building
Use pub build to compile your Polymer Dart app into JavaScript so that
it can run across the modern web. The build process also concatenates files
for faster loading.
You can use entry_points to specify which pages under web
the user can navigate to.
For example:
transformers:
- polymer:
entry_points: web/index.htmlRun pub build from the root of your project to generate a build
directory.
> pub buildThe build directory contains the HTML, JavaScript, and other assets
required to run the application. You can then deploy the build directory
to your favorite web server.
Learn more about pub build.
You can view sample source code that uses Polymer Dart, as well as the source code that implements Polymer Dart.
polymer-dart-patterns: Small, useful samples that show how to do things the Polymer Dart way.
Polymer Dart is open source. You can view and contribute to the source of Polymer Dart and its many component packages on github.
- dart-lang/polymer-dart
- dart-lang/polymer_elements
- dart-lang/polymer_interop
- dart-lang/web-components
- dart-lang/custom-element-apigen
We actively encourage your feedback and questions.
- Ask your how-to questions on StackOverflow.
- Join the general discussion about Polymer Dart on our mailing list.
- Send feedback on the web components family of specifications to the polymer-dev mailing list. (Note: That list isn't Dart specific.)
- Please file bugs and feature requests for Polymer Dart.
Keep an eye on this page for the latest information about Polymer Dart.