update polymer related info to 0.8.7

src/site/docs/tutorials/polymer-intro/index.markdown

 ---
 layout: default
 title: "Define a Custom Element"
 description: "Create a custom HTML element using Polymer."
 has-permalinks: true
 tutorial:
   id: polymer-intro
 next: fetchdata
 next-title: "Fetch Data Dynamically"
 prev: shared-pkgs
@@ skipping 31 matching lines @@
 <h3>Create a custom HTML element using Polymer</h3>
 </div>
 
 A custom element is an HTML element you can define yourself,
 encapsulating appearance and/or behavior
 within semantically meaningful HTML.
 
 <aside class="alert">
 <strong>Version Note:</strong> The code sample and the content
 of this tutorial are compatible with
-<a href="https://pub.dartlang.org/packages/polymer#versions">polymer.dart 0.8.1</a>.
+<a href="https://pub.dartlang.org/packages/polymer#versions">polymer.dart 0.8.7</a>.
 </aside>
 
 <aside class="alert alert-info">
   Custom elements are one feature of
 <a href="http://www.polymer-project.org/"
    target="_blank">Polymer</a>,
 a new type of library for the web based on Web Components.
 <a href="http://www.dartlang.org/polymer-dart/"
    target="_blank">Polymer.dart</a>
 is the Dart implementation of Polymer.
 (Note: Polymer supersedes Web UI.)
 </aside>
 
 * [An example](#an-example)
 * [Installing Polymer.dart](#getting-polymer-dart) 
 * [Including Polymer.dart in your application](#bootstrap)
+* [Initializing Polymer](#initializing-polymer)
 * [Instantiating a custom element](#instantiating) 
 * [Defining a custom element](#define-element) 
 * [Providing a template for the custom element](#providing-a-template) 
 * [Providing a script for the custom element](#providing-a-script) 
 * [Overiding life-cycle methods](#life-cycle-methods)
 * [Using data binding](#data-binding) 
 * [Setting up event handlers declaratively](#event-handlers) 
 * [Styling a custom element](#scoped-css)
 * [Other resources](#other-resources)
 * [What next?](#what-next)
@@ skipping 97 matching lines @@
 If you are using command line tools,
 you can run it with the command `pub install`.
 
 ##Including Polymer.dart in your application {#bootstrap}
 
 To use Polymer.dart features such as custom elements,
 you need to include Polymer in both
 the HTML side and the Dart side of your app.
 
 * In the primary HTML file for your app,
-include `packages/polymer/boot.js`
+include the `packages/browser/dart.js` bootstrap script
 in the &lt;head&gt; section.
-When using this script,
-you do not need to define a top-level `main()` function,
-although you can.
-**Note:** Use this script instead of `packages/browser/dart.js`.
 
   ![Include the Polymer bootstrap script](images/bootstrap-script.png)
 
 * In your Dart code, import the Polymer library:
 
   ![Import the Polymer library](images/polymer-library.png)
 
+##Initializing Polymer {#initializing-polymer}
+
+The `main()` function for the stopwatch example, defined
+in `index.dart`, calls `initPolymer()` to initialize Polymer.

[Kathy Walrath, 2013/10/30 17:00:50]

index.dart or index.html? This is the only mention I can find of index.dart, so
it surprised me. (Looking at the source, I see that there is indeed an
index.dart file, but it's not mentioned anywhere else on the page.)

+
+{% prettify html %}
+import 'package:polymer/polymer.dart';
+     
+void main() {
+  initPolymer();

[sethladd, 2013/10/30 17:02:14]

According to Messerly, this isn't the best practice. We should instead import
package:polymer/init.dart from the main HTML page.

What you have works, but probably not what we want to show.

+}
+{% endprettify %}
+
+You can initialize Polymer using other techniques,
+but this is the most straightforward.

[Kathy Walrath, 2013/10/30 17:00:50]

what is "this"? calling initPolymer()? having the code in main? having main in a
separate index.dart file?

+
 ##Instantiating a custom element {#instantiating}
 
 To create an instance of a custom element,
 use the name of the custom element just as you would any normal HTML tag.
 In this example, the tag name is `tute-stopwatch`.
 
 ![Instantiate a custom element with a custom tag](images/polymer-element-instantiation.png)
 
 Using best practices,
 the custom element definition is in a separate file.
@@ skipping 98 matching lines @@
 ![The script code for the tute-stopwatch element](images/dart-script-code.png)
 
 Any Dart class that backs a Polymer element must subclass PolymerElement.
 
 {% comment %}
 [xx: more about PolymerElement]
 {% endcomment %}
 
 The class can respond to life-cycle milestones
 by overriding [life-cycle methods](#life-cycle-methods).
-For example, the TuteStopwatch class overrides the `inserted()`
+For example, the TuteStopwatch class overrides the `enteredView()`
 method—which is called when the element is inserted
 into the DOM—to initialize the app.
 
 The `start()` method is an event handler for the **Start** button.
 The event handler is declaratively connected to the button.
 Refer to [Setting up event handlers declaratively](#event-handlers) to see how.
 
 ##Overriding life-cycle methods {#life-cycle-methods}
 
 A custom element has four life-cycle methods
 that it can override:
 
 |---|---|
 | `created()` | Called when an instance of a custom element is created. |
-| `inserted()` | Called when an instance of a custom element is inserted into the DOM. |
-| `removed()` | Called when an instance of a custom element is removed from the DOM. |
+| `enteredView()` | Called when an instance of a custom element is inserted into the DOM. |
+| `leftView()` | Called when an instance of a custom element is removed from the DOM. |
 | `attributeChanged()` | Called when an attribute, such as `class`, of an instance of the custom element is added, changed, or removed. |
 {: .table}
 
 You can override any of these life-cycle methods.
 The overriding method
 *must* call the super class method first.
 
-The Stopwatch app overrides the `inserted()` method because it
+The Stopwatch app overrides the `enteredView()` method because it
 needs a reference to each of the three buttons
 so that it can enable and disable them.
 When a tute-stopwatch custom element is inserted into the DOM
 the buttons have been created, so the references to them
-will be available when the inserted() method is called.
+will be available when the enteredView() method is called.
 
 {% prettify dart %}
-void inserted() {
-  super.inserted();
+void enteredView() {
+  super.enteredView();
   startButton = $['startButton'];
   stopButton = $['stopButton'];
   resetButton = $['resetButton'];
       
   stopButton.disabled = true;
   resetButton.disabled = true;
 }
 {% endprettify %}
 
 The code uses _automatic node finding_, a Polymer feature,
@@ skipping 151 matching lines @@
 
 The next tutorial,
 [Fetch Data Dynamically](/docs/tutorials/fetchdata/),
 shows you how to fetch data
 and use JSON to encode and decode
 that data.
 
 {% endcapture %}
 
 {% include tutorial.html %}