removing Web UI tutorials, updating remaining 4 to current release, + review pass

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 29 matching lines @@
 
 <div class="tute-target-title">
 <h1>{{page.title}}</h1>
 <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">
+<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)
 * [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) 
-* [Querying the Shadow DOM](#in-the-shadows) 
 * [Styling a custom element](#scoped-css)
 * [Other resources](#other-resources)
+* [What next?](#what-next)
 
 ##An example
 
 In the example running below,
 the LemonChiffon area outlined in black
 is a custom element implemented using Polymer.
 
 <strong>Try it!</strong>
 Start and stop the stopwatch.
 Reset the stopwatch to 00:00 using the **Reset** button.
@@ skipping 193 matching lines @@
 The tute-stopwatch template uses a &lt;style&gt; tag, which is optional.
 These styles are scoped; they affect only
 the appearance of the custom element and the elements it contains.
 More about scoped CSS in [Styling a custom element](#scoped-css).
 
 The rest of the code within the &lt;template&gt; tag
 is normal HTML, with two exceptions:
 
 |---|---|
 | `{``{``counter}}` | Uses a Polymer syntax to [bind Dart data](#data-binding) to the HTML page. The double curly braces are commonly known as a "double mustache". |
-| `on-click` | Uses Polymer [declarative event mapping](#event-handlers), which allows you to set up event handlers for a UI element. `on-click` sets up an event handler for mouse clicks. Polymer has mappings for other event types, such as `on-change` for input change events. |
+| `on-click` | Uses Polymer [declarative event mapping](#event-handlers), which allows you to set up event handlers for a UI element. `on-click` sets up an event handler for mouse clicks. Polymer has mappings for other event types, such as `on-input` for changes to text fields. |
 {: .table}
 
 Let's take a look at the structure of the Dart code
 before we get into the details of data binding, event handlers,
 and scoped CSS.
 
 ##Providing a script for the custom element {#providing-a-script}
 
 On the Dart side, a class implements the behavior of the custom element.
 You associate the Dart class with the custom element using the `@CustomTag`
 annotation and the name of the custom element.
 
 ![Two parts to a custom element definition](images/polymer-element-definition.png)
 
 This diagram gives an overview of the TuteStopwatch class:
 
 ![The script code for the tute-stopwatch element](images/dart-script-code.png)
 
 Any Dart class that backs a Polymer element must subclass PolymerElement.
-If you want to use data binding, the class must also use ObservableMixin.
 
 {% comment %}
 [xx: more about PolymerElement]
-[xx: more about ObservableMixin]
 {% 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()`
 method&mdash;which is called when the element is inserted
 into the DOM&mdash;to initialize the app.
 
 The `start()` method is an event handler for the **Start** button.
 The event handler is declaratively connected to the button.
@@ skipping 14 matching lines @@
 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
 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.
-You'll notice that it gets the buttons by 
-[querying the custom element's shadow root](#in-the-shadows).
 
 {% prettify dart %}
 void inserted() {
   super.inserted();
-  startButton = getShadowRoot('tute-stopwatch').query('#startButton');
-  stopButton = getShadowRoot('tute-stopwatch').query('#stopButton');
-  resetButton = getShadowRoot('tute-stopwatch').query('#resetButton');
+  startButton = $['startButton'];
+  stopButton = $['stopButton'];
+  resetButton = $['resetButton'];
       
   stopButton.disabled = true;
   resetButton.disabled = true;
 }
 {% endprettify %}
 
+The code uses _automatic node finding_, a Polymer feature,
+to get a reference to each button.
+Every node in a custom element that is tagged with an `id` attribute
+can be referenced by its ID using the syntax: `$['ID']`.
+
 ##Using data binding {#data-binding}
 
 In the HTML definition of a custom element,
 use double curly brackets to embed Dart data into the webpage.
 In your Dart code, use the `@observable` annotation
 to mark the embedded data.
 Here, the data is a string called `counter`.
 
 ![One-way data binding](images/one-way-data-binding.png)
 
 The tute-stopwatch element uses a periodic
 <a href="https://api.dartlang.org/dart_async/Timer.html" target="_blank">Timer</a>
 to fire an event every second.
 When the Timer fires, it calls the `updateTimer()` method,
 which modifies the `counter` string.
 Polymer takes care of updating the HTML page with the new string.
 
 This type of binding is called _one-way data binding_
 because the data can change only on the Dart side.
 Polymer also supports two-way data binding.
 In two-way data binding, when data changes on the HTML side&mdash;for example
 with an input element&mdash;the value in the Dart code changes to match.
+For more information about two-way binding,
+plus examples of using it with a variety of
+HTML5 widgets, check out
+[Two-way data binding using Polymer](/docs/tutorials/forms/#binding-data).

[Kathy Walrath, 2013/10/11 16:36:03]

When I followed this link, I was a bit disoriented. The text made this sound
like a link to another tutorial or site. The capitalization made it seem like a
section within this page. Maybe:

check out [...]. -> check out the Forms tutorial section [...].

[mem, 2013/10/11 18:21:30]

Done.

 
 You can use expressions within the double curly brackets.
 <a href="http://pub.dartlang.org/packages/polymer_expressions"
    target="_blank">Polymer expressions</a>
 provide the default syntax. Examples of allowable expressions include:
 
 |---|---|
 | `{``{``myObject.aProperty}}` | Property access. |
 | `{``{``!empty}}` | Operators, like the logical not operator. |
 | `{``{``myList[3]}}` | List indexing. |
@@ skipping 19 matching lines @@
 <a href="https://api.dartlang.org/dart_html/Event.html" target="_blank">Event</a>
 that contains information about the event,
 such as its type and when it occurred.
 
 * The _detail_ object can provide additional, event-specific information.
 
 * The <a href="https://api.dartlang.org/dart_html/Node.html" target="_blank">Node</a>
 that fired the event&mdash;the **Start** button in this case.
 
 You can attach event handlers for other kinds of events.
-For example, you can use `on-change` to handle events for input text elements
-when the text changes.
+For example, you can use `on-input` to handle events
+for input text elements when the text changes.
 
 Refer to
 [Declarative event mapping](http://www.polymer-project.org/polymer.html#declarative-event-mapping)
 for further details.
 
+{% comment %}
 ##Querying the shadow root {#in-the-shadows}
 
 The Shadow DOM is key to encapsulation.
 The DOM subtree for a custom element is
 hidden from outside of the custom element.
 
 ![Shadow DOM for tute-stopwatch custom element](images/shadow-dom.png)
 
 You can programmatically get items from the Shadow DOM
 by querying a custom element's _shadow root_&mdash;a
 special node from which an instance of a custom element is rendered.
 
 {% prettify dart %}
 startButton = getShadowRoot('tute-stopwatch').query('#startbutton');
 stopButton = getShadowRoot('tute-stopwatch').query('#stopbutton');
 resetButton = getShadowRoot('tute-stopwatch').query('#resetbutton');
 {% endprettify %}
 
 Call `getShadowRoot()` with the name of the custom element.
 The `getShadowRoot()` method returns the shadow root element
 for this instance of the specified element.
 Use `query()` with a CSS selector to get the element(s) of interest.
 
 Note that this code uses `query()` to get each button by ID.
 By querying the shadow root object rather than the DOM,
 you are guaranteed to get the objects from within the custom element,
 not from anywhere else on the page.
+{% endcomment %}
 
 ##Styling a custom element {#scoped-css} 
 
 You can optionally include CSS styles for your custom element
 that apply only to the contents of the custom element.
 
 ![Scoped CSS styling](images/css-styling.png)
 
 The `@host` rule allows you to target and style an element internally,
 from within its definition.
 The `:scope` pseudo-class refers to the custom element itself.
-The only selectors that work in `@host` are those targeting the host element itself.
+The only selectors that work within `@host` are those contained
+in the host element itself.
 So you don't need to worry about naming conflicts on the page.
 Any CSS selectors within the template need to be unique only within the template.
 
 For further details about styling custom elements,
 refer to
 [A Guide to Styling Elements](http://www.polymer-project.org/articles/styling-elements.html)
 
 ##Other resources
 
 Use these other resources to learn more about Polymer:
 
 * The tutorial
 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web"
    target="_blank">github repo</a>
    contains many examples that use Polymer,
    including samples that have been converted from Web UI.
 
 * The
 <a href="http://www.dartlang.org/polymer-dart/"
    target="_blank">Polymer.dart</a> homepage provides information
    specific to the Dart port of the Polymer project.
 
 * The Polymer project website
 <a href="http://www.polymer-project.org/"
    target="_blank">polymer-project.org</a>
    contains information about the Polymer project as a whole.
 
+##What next?
+
+[Two-way data binding with Polymer](/docs/tutorials/forms/#binding-data)
+in the tutorial about forms shows how to use two-way data binding

[Kathy Walrath, 2013/10/11 16:36:03]

ah, I see you gave the context here. (just do the same above)

[mem, 2013/10/11 18:21:30]

Done.

+with various types of input elements such as text fields, color pickers,
+and so on.
+
+Check out these other tutorial examples that use Polymer.

[Kathy Walrath, 2013/10/11 16:36:03]

. -> :

[mem, 2013/10/11 18:21:30]

Done.

+
+* <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/fetchdata/its_all_about_you"
+    target="_blank">its_all_about_you</a>
+* <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/forms/slambook"
+    target="_blank">slambook</a>
+* <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/indexeddb/count_down"
+    target="_blank">count_down</a>
+
+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 %}