Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
1.0 Developer Guide
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 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
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.
pubspec.yaml file to depend on the
polymer package and
dependencies: polymer: ^1.0.0 web_components: ^0.12.0 transformers: - polymer: entry_points: - web/index.html
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
from the polymer_elements package:
<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>
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.
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
the user can navigate to.
transformers: - polymer: entry_points: web/index.html
pub build from the root of your project to generate a
> pub build
required to run the application. You can then deploy the
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.
Support and more
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.