From e6d4b3788bdf897b2f89c5ff696daab8c1bbb13c Mon Sep 17 00:00:00 2001
From: Arthur Evans <arthure@google.com>
Date: Thu, 10 Jul 2014 13:46:14 -0700
Subject: [PATCH 1/6] Add inferred tag name

---
 docs/polymer/polymer.md | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/docs/polymer/polymer.md b/docs/polymer/polymer.md
index 491a0a12e8..68c533e2b2 100644
--- a/docs/polymer/polymer.md
+++ b/docs/polymer/polymer.md
@@ -23,6 +23,21 @@ At the heart of {{site.project_title}} are [Custom Elements](/platform/custom-el
       <script>Polymer('tag-name');</script>
     </polymer-element>
 
+The `Polymer` method registers the element. If the first argument to `Polymer` is a string, it specifies
+the tag name being registered. You can omit this argument if both of the following are true:
+
+*   The `Polymer` call is made in an inline script inside the `<polymer-element>` tag.
+*   The element is defined in an HTML import, not in the main document.
+
+For example, assuming that `tag-name` is defined in an HTML import, its definition can be simplified to:
+
+    <polymer-element name="tag-name" constructor="TagName">
+      <template>
+        <!-- shadow DOM here -->
+      </template>
+      <script>Polymer();</script>
+    </polymer-element>
+
 ### Attributes
 
 {{site.project_title}} reserves special attributes to be used on `<polymer-element>`:
@@ -104,6 +119,11 @@ which calls `Polymer('tag-name')`:
       </template>
     </polymer-element>
 
+**Important:** If the script comes before or after the element definition,
+the first argument to `Polymer` must be the tag name. 
+{: .alert .alert-error }
+
+
 #### Imperative registration {#imperativeregister}
 
 Elements can be registered in pure JavaScript like so:
@@ -129,9 +149,8 @@ Custom Elements polyfill picks it up.
 
 ### Adding public properties and methods {#propertiesmethods}
 
-If you wish to define methods/properties on your element (optional), pass an object
-as the second argument to `Polymer()`. This object is used to define
-the element's `prototype`.
+To define methods/properties on your element, pass an object argument to `Polymer()`. 
+This object is used to define the element's `prototype`. 
 
 The following example defines a property `message`, a property `greeting`
 using an ES5 getter, and a method `foo`:
@@ -152,6 +171,12 @@ using an ES5 getter, and a method `foo`:
 **Note:** `this` references the custom element itself inside a {{site.project_title}} element. For example, `this.localName == 'tag-name'`.
 {: .alert .alert-info }
 
+A custom element's prototype is assembled in this order:
+
+-   The base prototype is copied from the DOM object that the custom element extends (by default, `HTMLElement`).
+-   {{site.project_title}} adds a set of built-in methods and properties (see [Built-in element methods](#builtin)).
+-   The properties and methods defined in the proto-object are added into the element's prototype. 
+
 **Important:** Be careful when initializing properties that are objects or arrays. Due to the nature of `prototype`, you may run into unexpected "shared state" across instances of the same element. If you're initializing an array or object, do it in the `created` callback rather than directly on the `prototype`.
 
     // Good!

From 4a076676dcbecd1f388c2d6198c3e403ba1b6b04 Mon Sep 17 00:00:00 2001
From: Arthur Evans <arthure@google.com>
Date: Mon, 14 Jul 2014 12:58:03 -0700
Subject: [PATCH 2/6] Move inferred tag-name to its own section. More tweaks to
 "adding properties and methods" section.

---
 docs/polymer/polymer.md | 81 ++++++++++++++++++++++++++---------------
 1 file changed, 51 insertions(+), 30 deletions(-)

diff --git a/docs/polymer/polymer.md b/docs/polymer/polymer.md
index 68c533e2b2..93f5731acf 100644
--- a/docs/polymer/polymer.md
+++ b/docs/polymer/polymer.md
@@ -23,20 +23,6 @@ At the heart of {{site.project_title}} are [Custom Elements](/platform/custom-el
       <script>Polymer('tag-name');</script>
     </polymer-element>
 
-The `Polymer` method registers the element. If the first argument to `Polymer` is a string, it specifies
-the tag name being registered. You can omit this argument if both of the following are true:
-
-*   The `Polymer` call is made in an inline script inside the `<polymer-element>` tag.
-*   The element is defined in an HTML import, not in the main document.
-
-For example, assuming that `tag-name` is defined in an HTML import, its definition can be simplified to:
-
-    <polymer-element name="tag-name" constructor="TagName">
-      <template>
-        <!-- shadow DOM here -->
-      </template>
-      <script>Polymer();</script>
-    </polymer-element>
 
 ### Attributes
 
@@ -94,8 +80,18 @@ This also means that any of the below examples will also work:
     <name-tag NAMECOLOR="red" name="Red Name"></name-tag>
     <name-tag NAMEcolor="green" name="Green Name"></name-tag>
 
+
+
 ### Alternate ways to register an element {#altregistration}
 
+There are several alternative ways to register elements:
+
+-   [Separating script from markup](#separatescript).
+-   [Inferring the tag name](#inferredtagname) to eliminate extra boilerplate.
+-   [Registering imperatively](#imperativeregister) using JavaScript.
+
+#### Separate script from markup {#separatescript}
+
 For convenient decoupling of script and markup, you don't have to inline your script.
 {{site.project_title}} elements can be created by referencing an external script
 which calls `Polymer('tag-name')`:
@@ -119,10 +115,27 @@ which calls `Polymer('tag-name')`:
       </template>
     </polymer-element>
 
-**Important:** If the script comes before or after the element definition,
-the first argument to `Polymer` must be the tag name. 
-{: .alert .alert-error }
+#### Inferred tag name {#inferredtagname}
+
+If the first argument to `Polymer` is a string, it specifies
+the tag name being registered. 
 
+You can _omit_ the tag name argument if **both of the following are true**:
+
+*   The `Polymer` call is made **in an inline script** inside the `<polymer-element>` tag.
+*   The element is defined **in an HTML import**, not in the main document.
+
+For example, assuming that `tag-name` is defined in an HTML import, its definition can be simplified to:
+
+    <polymer-element name="tag-name" constructor="TagName">
+      <template>
+        <!-- shadow DOM here -->
+      </template>
+      <script>Polymer();</script>
+    </polymer-element>
+
+If {{site.project_title}} can't infer the tag name, it logs a warning to the console, and element
+registration fails.
 
 #### Imperative registration {#imperativeregister}
 
@@ -149,8 +162,13 @@ Custom Elements polyfill picks it up.
 
 ### Adding public properties and methods {#propertiesmethods}
 
-To define methods/properties on your element, pass an object argument to `Polymer()`. 
-This object is used to define the element's `prototype`. 
+To define methods/properties on your element, pass an object argument to `Polymer()`: 
+
+<pre>
+Polymer(<em class="nocode">tag-name</em>, <em class="nocode">proto-object</em>);
+</pre>
+
+Where both _tag-name_ and _proto-object_ are optional. The _proto-object_ is used to define the element's `prototype`. 
 
 The following example defines a property `message`, a property `greeting`
 using an ES5 getter, and a method `foo`:
@@ -175,7 +193,10 @@ A custom element's prototype is assembled in this order:
 
 -   The base prototype is copied from the DOM object that the custom element extends (by default, `HTMLElement`).
 -   {{site.project_title}} adds a set of built-in methods and properties (see [Built-in element methods](#builtin)).
--   The properties and methods defined in the proto-object are added into the element's prototype. 
+-   The properties and methods defined in the _proto-object_ are added into the element's prototype. 
+
+Avoid defining a property or method with the same name as a native DOM property or method, such as `id`, `children` or 
+`focus`; the results are unpredictable.
 
 **Important:** Be careful when initializing properties that are objects or arrays. Due to the nature of `prototype`, you may run into unexpected "shared state" across instances of the same element. If you're initializing an array or object, do it in the `created` callback rather than directly on the `prototype`.
 
@@ -363,7 +384,7 @@ As an example, here's an element that publishes three public properties, `foo`,
 
     <polymer-element name="x-foo" attributes="foo bar baz">
       <script>
-        Polymer('x-foo');
+        Polymer();
       </script>
     </polymer-element>
 
@@ -371,7 +392,7 @@ And here's one using the `publish` object:
 
     <polymer-element name="x-foo">
       <script>
-        Polymer('x-foo', {
+        Polymer({
           publish: {
             foo: 'I am foo!',
             bar: 5,
@@ -407,7 +428,7 @@ By default, properties defined in `attributes` are initialized to `null`:
     <polymer-element name="x-foo" attributes="foo">
       <script>
         // x-foo has a foo property with default value of null.
-        Polymer('x-foo');
+        Polymer();
       </script>
     </polymer-element>
 
@@ -417,7 +438,7 @@ You can provide your own default values by explicitly specifying the default val
 
     <polymer-element name="x-foo" attributes="bar">
       <script>
-        Polymer('x-foo', {
+        Polymer({
           // x-foo has a bar property with default value false.
           bar: false
         });
@@ -428,7 +449,7 @@ Or you can define the whole thing using the `publish` property:
 
     <polymer-element name="x-foo">
       <script>
-        Polymer('x-foo', {
+        Polymer({
           publish: {
             bar: false
           }
@@ -442,7 +463,7 @@ created for each instance of the element:
 
     <polymer-element name="x-default" attributes="settings">
       <script>
-        Polymer('x-default', {
+        Polymer({
           created: function() {
             // create a default settings object for this instance
             this.settings = {
@@ -503,7 +524,7 @@ includes an unlikely combination of all three:
 
     <polymer-element name="hint-element" attributes="isReady items">
       <script>
-        Polymer('hint-element', {
+        Polymer({
 
           // hint that isReady is a Boolean
           isReady: false,
@@ -614,7 +635,7 @@ For example, we can define a `name-tag` element that publishes two properties,
         Hello! My name is <span style="color:{%raw%}{{nameColor}}{%endraw%}">{%raw%}{{name}}{%endraw%}</span>
       </template>
       <script>
-        Polymer('name-tag', {
+        Polymer({
           nameColor: "orange"
         });
       </script>
@@ -665,7 +686,7 @@ It uses special <code>on-<em>event</em></code> syntax to trigger this binding be
         <button on-click="{% raw %}{{buttonClick}}{% endraw %}"></button>
       </template>
       <script>
-        Polymer('g-cool', {
+        Polymer({
           keypressHandler: function(event, detail, sender) { ...},
           buttonClick: function(event, detail, sender) { ... }
         });
@@ -693,7 +714,7 @@ All properties on {{site.project_title}} elements can be watched for changes by
 
     <polymer-element name="g-cool" attributes="better best">
       <script>
-        Polymer('g-cool', {
+        Polymer({
           better: '',
           best: '',
           betterChanged: function(oldValue, newValue) {

From 59545904393e3b2e5819211302c05dd3407bd0d6 Mon Sep 17 00:00:00 2001
From: Arthur Evans <arthure@google.com>
Date: Wed, 16 Jul 2014 16:13:30 -0700
Subject: [PATCH 3/6] Fix typo

---
 docs/polymer/polymer.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/polymer/polymer.md b/docs/polymer/polymer.md
index 93f5731acf..b2c1e9a4d7 100644
--- a/docs/polymer/polymer.md
+++ b/docs/polymer/polymer.md
@@ -467,7 +467,7 @@ created for each instance of the element:
           created: function() {
             // create a default settings object for this instance
             this.settings = {
-              textColor: 'blue';
+              textColor: 'blue'
             };
           }
         });

From fb2f893030ceaa4bf8fef731165f2936429e3b3d Mon Sep 17 00:00:00 2001
From: Arthur Evans <arthure@google.com>
Date: Tue, 29 Jul 2014 12:27:19 -0700
Subject: [PATCH 4/6] Updated to address comments.

---
 docs/polymer/polymer.md | 23 ++++++++++-------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/docs/polymer/polymer.md b/docs/polymer/polymer.md
index b2c1e9a4d7..e53b2871bc 100644
--- a/docs/polymer/polymer.md
+++ b/docs/polymer/polymer.md
@@ -134,9 +134,6 @@ For example, assuming that `tag-name` is defined in an HTML import, its definiti
       <script>Polymer();</script>
     </polymer-element>
 
-If {{site.project_title}} can't infer the tag name, it logs a warning to the console, and element
-registration fails.
-
 #### Imperative registration {#imperativeregister}
 
 Elements can be registered in pure JavaScript like so:
@@ -195,8 +192,8 @@ A custom element's prototype is assembled in this order:
 -   {{site.project_title}} adds a set of built-in methods and properties (see [Built-in element methods](#builtin)).
 -   The properties and methods defined in the _proto-object_ are added into the element's prototype. 
 
-Avoid defining a property or method with the same name as a native DOM property or method, such as `id`, `children` or 
-`focus`; the results are unpredictable.
+Avoid defining a property or method with the same name as a native DOM property or method, such as `id`, `children`,
+`focus`, `title` and `hidden`; the results are unpredictable.
 
 **Important:** Be careful when initializing properties that are objects or arrays. Due to the nature of `prototype`, you may run into unexpected "shared state" across instances of the same element. If you're initializing an array or object, do it in the `created` callback rather than directly on the `prototype`.
 
@@ -392,7 +389,7 @@ And here's one using the `publish` object:
 
     <polymer-element name="x-foo">
       <script>
-        Polymer({
+        Polymer('x-foo', {
           publish: {
             foo: 'I am foo!',
             bar: 5,
@@ -428,7 +425,7 @@ By default, properties defined in `attributes` are initialized to `null`:
     <polymer-element name="x-foo" attributes="foo">
       <script>
         // x-foo has a foo property with default value of null.
-        Polymer();
+        Polymer('x-foo');
       </script>
     </polymer-element>
 
@@ -438,7 +435,7 @@ You can provide your own default values by explicitly specifying the default val
 
     <polymer-element name="x-foo" attributes="bar">
       <script>
-        Polymer({
+        Polymer('x-foo', {
           // x-foo has a bar property with default value false.
           bar: false
         });
@@ -449,7 +446,7 @@ Or you can define the whole thing using the `publish` property:
 
     <polymer-element name="x-foo">
       <script>
-        Polymer({
+        Polymer('x-foo', {
           publish: {
             bar: false
           }
@@ -463,7 +460,7 @@ created for each instance of the element:
 
     <polymer-element name="x-default" attributes="settings">
       <script>
-        Polymer({
+        Polymer('x-foo', {
           created: function() {
             // create a default settings object for this instance
             this.settings = {
@@ -524,7 +521,7 @@ includes an unlikely combination of all three:
 
     <polymer-element name="hint-element" attributes="isReady items">
       <script>
-        Polymer({
+        Polymer('hint-element', {
 
           // hint that isReady is a Boolean
           isReady: false,
@@ -635,7 +632,7 @@ For example, we can define a `name-tag` element that publishes two properties,
         Hello! My name is <span style="color:{%raw%}{{nameColor}}{%endraw%}">{%raw%}{{name}}{%endraw%}</span>
       </template>
       <script>
-        Polymer({
+        Polymer('name-tag', {
           nameColor: "orange"
         });
       </script>
@@ -686,7 +683,7 @@ It uses special <code>on-<em>event</em></code> syntax to trigger this binding be
         <button on-click="{% raw %}{{buttonClick}}{% endraw %}"></button>
       </template>
       <script>
-        Polymer({
+        Polymer('g-cool', {
           keypressHandler: function(event, detail, sender) { ...},
           buttonClick: function(event, detail, sender) { ... }
         });

From 8ea01641a29ed8318fe06c99ceef37a8b743eb46 Mon Sep 17 00:00:00 2001
From: Arthur Evans <arthure@google.com>
Date: Thu, 31 Jul 2014 13:46:50 -0700
Subject: [PATCH 5/6] Fix typo

---
 docs/polymer/polymer.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/polymer/polymer.md b/docs/polymer/polymer.md
index e53b2871bc..b8da67feff 100644
--- a/docs/polymer/polymer.md
+++ b/docs/polymer/polymer.md
@@ -460,7 +460,7 @@ created for each instance of the element:
 
     <polymer-element name="x-default" attributes="settings">
       <script>
-        Polymer('x-foo', {
+        Polymer('x-default', {
           created: function() {
             // create a default settings object for this instance
             this.settings = {

From b426d8f2e00e78b29978cfe6480457708f7b0e2f Mon Sep 17 00:00:00 2001
From: Arthur Evans <arthure@google.com>
Date: Fri, 22 Aug 2014 16:55:48 -0700
Subject: [PATCH 6/6] Update to reflect new support for inferred tag name.

---
 docs/polymer/polymer.md | 132 +++++++++++++++++++++++++---------------
 1 file changed, 83 insertions(+), 49 deletions(-)

diff --git a/docs/polymer/polymer.md b/docs/polymer/polymer.md
index b8da67feff..927118fa5f 100644
--- a/docs/polymer/polymer.md
+++ b/docs/polymer/polymer.md
@@ -20,9 +20,20 @@ At the heart of {{site.project_title}} are [Custom Elements](/platform/custom-el
       <template>
         <!-- shadow DOM here -->
       </template>
-      <script>Polymer('tag-name');</script>
+      <script>
+        Polymer({
+          // properties and methods here
+        });
+      </script>
     </polymer-element>
 
+The element declaration includes:
+
+-   The `name` attribute specifies the name of the new custom element.
+-   The optional `<template>` tag defines HTML content that is 
+    cloned into the shadow DOM of each instance of the element.
+-   The `Polymer` method, which _registers_ the element, so it's
+    recognized as a custom element by the browser.
 
 ### Attributes
 
@@ -42,7 +53,7 @@ At the heart of {{site.project_title}} are [Custom Elements](/platform/custom-el
     <td><code>extends</code></td><td>optional</td><td>Used to <a href="#extending-other-elements">extend other elements</a>.</td>
   </tr>
   <tr>
-    <td><code>noscript</code></td><td>optional</td><td>For simple elements that don't need to call <code>Polymer()</code>. See <a href="#altregistration">Alternate ways to register an element</a>.</td>
+    <td><code>noscript</code></td><td>optional</td><td>For simple elements that don't need to call <code>Polymer()</code>. See <a href="#altregistration">Element registration</a>.</td>
   </tr>
   <tr>
     <td><code>constructor</code></td><td>optional</td><td>The name of the constructor to put on the global object. Allows users to create instances of your element using the <code>new</code> operator (e.g. <code>var tagName = new TagName()</code>).</td>
@@ -56,7 +67,7 @@ on each instance of the element. For example:
 
     <polymer-element name="tag-name" class="active" mycustomattr>
       <template>...</template>
-      <script>Polymer('tag-name');</script>
+      <script>Polymer();</script>
     </polymer-element>
 
 When an instance of `<tag-name>` is created, it contains `class="active" mycustomattr`
@@ -82,19 +93,41 @@ This also means that any of the below examples will also work:
 
 
 
-### Alternate ways to register an element {#altregistration}
+### Element registration {#altregistration}
+
+The `Polymer` method is used to register an element:
+
+<pre>
+Polymer(<em class="nocode">tag-name</em>, <em class="nocode">proto-object</em>);
+</pre>
+
+Where:
+
+*   _tag-name_ matches the `name` attribute in the `<polymer-element>` tag.
+    _tag-name_ is **optional** as long as **the `<script>` tag that calls `Polymer` 
+    is placed inside the `<polymer-element>` tag.** 
+
+*   _proto-object_ defines properties and methods to add to the 
+    elements prototype. See [Adding public properties and methods](#propertiesmethods).
+    _proto-object_ is always optional.
+
+The simplest way to invoke `Polymer` is to place an inline script inside
+your `<polymer-element>` tag:
+
+    <polymer-element name="simple-tag">
+      <script>Polymer();</script>
+    </polymer-element>
 
 There are several alternative ways to register elements:
 
 -   [Separating script from markup](#separatescript).
--   [Inferring the tag name](#inferredtagname) to eliminate extra boilerplate.
 -   [Registering imperatively](#imperativeregister) using JavaScript.
 
 #### Separate script from markup {#separatescript}
 
 For convenient decoupling of script and markup, you don't have to inline your script.
 {{site.project_title}} elements can be created by referencing an external script
-which calls `Polymer('tag-name')`:
+which calls `Polymer`:
 
     <!-- 1. Script referenced inside the element definition. -->
     <polymer-element name="tag-name">
@@ -108,6 +141,15 @@ which calls `Polymer('tag-name')`:
       <template>...</template>
     </polymer-element>
 
+In case #2, where the script is invoked before the `<polymer-element>` tag, 
+the call to `Polymer` **must include the tag name**:
+
+    // tagname.js
+    Polymer('tag-name', ... );
+
+For elements that don't require custom properties or methods, you can
+use the `noscript` attribute:
+
     <!-- 3. No script -->
     <polymer-element name="tag-name" constructor="TagName" noscript>
       <template>
@@ -115,28 +157,15 @@ which calls `Polymer('tag-name')`:
       </template>
     </polymer-element>
 
-#### Inferred tag name {#inferredtagname}
+The `noscript` attribute is equivalent to including:
 
-If the first argument to `Polymer` is a string, it specifies
-the tag name being registered. 
-
-You can _omit_ the tag name argument if **both of the following are true**:
-
-*   The `Polymer` call is made **in an inline script** inside the `<polymer-element>` tag.
-*   The element is defined **in an HTML import**, not in the main document.
-
-For example, assuming that `tag-name` is defined in an HTML import, its definition can be simplified to:
-
-    <polymer-element name="tag-name" constructor="TagName">
-      <template>
-        <!-- shadow DOM here -->
-      </template>
-      <script>Polymer();</script>
-    </polymer-element>
+    <script>
+    Polymer();
+    </script>
 
 #### Imperative registration {#imperativeregister}
 
-Elements can be registered in pure JavaScript like so:
+Elements can be registered in pure JavaScript like this:
 
     <script>
       Polymer('name-tag', {nameColor: 'red'});
@@ -154,18 +183,22 @@ Elements can be registered in pure JavaScript like so:
 
     <name-tag name="John"></name-tag>
 
-Note that you need to add the `<polymer-element>` to the document so that the
+You need to add the `<polymer-element>` to the document so that the
 Custom Elements polyfill picks it up.
 
+**Important:** Since the `Polymer` call here is outside the `<polymer-element>`, 
+it must include the tag name argument.
+{: .alert .alert-error }
+
 ### Adding public properties and methods {#propertiesmethods}
 
 To define methods/properties on your element, pass an object argument to `Polymer()`: 
 
 <pre>
-Polymer(<em class="nocode">tag-name</em>, <em class="nocode">proto-object</em>);
+Polymer([ <em class="nocode">tag-name</em>, ] <em class="nocode">proto-object</em>);
 </pre>
 
-Where both _tag-name_ and _proto-object_ are optional. The _proto-object_ is used to define the element's `prototype`. 
+The _proto-object_ contains properties and methods to add to the element's `prototype`. 
 
 The following example defines a property `message`, a property `greeting`
 using an ES5 getter, and a method `foo`:
@@ -173,7 +206,7 @@ using an ES5 getter, and a method `foo`:
     <polymer-element name="tag-name">
       <template>{{greeting}}</template>
       <script>
-        Polymer('tag-name', {
+        Polymer({
           message: "Hello!",
           get greeting() {
             return this.message + ' there!';
@@ -196,6 +229,7 @@ Avoid defining a property or method with the same name as a native DOM property
 `focus`, `title` and `hidden`; the results are unpredictable.
 
 **Important:** Be careful when initializing properties that are objects or arrays. Due to the nature of `prototype`, you may run into unexpected "shared state" across instances of the same element. If you're initializing an array or object, do it in the `created` callback rather than directly on the `prototype`.
+{: .alert .alert-error }
 
     // Good!
     Polymer('x-foo', {
@@ -220,11 +254,11 @@ techniques like anonymous self-calling functions:
       <template>...</template>
       <script>
         (function() {
-          // Ran once. Private and static to the element.
+          // Run once. Private and static to the element.
           var foo_ = new Foo();
 
-          // Ran for every instance of the element that's created.
-          Polymer('tag-name', {
+          // Run for every instance of the element that's created.
+          Polymer({
             get foo() { return foo_; }
           });
         })();
@@ -245,7 +279,7 @@ To achieve this, you can use the [MonoState Pattern](http://c2.com/cgi/wiki?Mono
         var firstName = 'John';
         var lastName = 'Smith';
 
-        Polymer('app-globals', {
+        Polymer({
            ready: function() {
              this.firstName = firstName;
              this.lastName = lastName;
@@ -264,7 +298,7 @@ Then use the element as you would any other, and data-bind it to a property that
         <div id="lastname">{{globals.lastName}}</div>
       </template>
       <script>
-        Polymer('my-component', {
+        Polymer({
           ready: function() { this.globals = this.$.globals; }
          });
       </script>
@@ -277,7 +311,7 @@ A slight tweak of this approach lets you configure the value of the globals exte
       (function() {
         var values = {};
 
-        Polymer('app-globals', {
+        Polymer({
            ready: function() {
              this.values = values;
              for (var i = 0; i < this.attributes.length; ++i) {
@@ -389,7 +423,7 @@ And here's one using the `publish` object:
 
     <polymer-element name="x-foo">
       <script>
-        Polymer('x-foo', {
+        Polymer({
           publish: {
             foo: 'I am foo!',
             bar: 5,
@@ -425,7 +459,7 @@ By default, properties defined in `attributes` are initialized to `null`:
     <polymer-element name="x-foo" attributes="foo">
       <script>
         // x-foo has a foo property with default value of null.
-        Polymer('x-foo');
+        Polymer();
       </script>
     </polymer-element>
 
@@ -435,7 +469,7 @@ You can provide your own default values by explicitly specifying the default val
 
     <polymer-element name="x-foo" attributes="bar">
       <script>
-        Polymer('x-foo', {
+        Polymer({
           // x-foo has a bar property with default value false.
           bar: false
         });
@@ -446,7 +480,7 @@ Or you can define the whole thing using the `publish` property:
 
     <polymer-element name="x-foo">
       <script>
-        Polymer('x-foo', {
+        Polymer({
           publish: {
             bar: false
           }
@@ -460,7 +494,7 @@ created for each instance of the element:
 
     <polymer-element name="x-default" attributes="settings">
       <script>
-        Polymer('x-default', {
+        Polymer({
           created: function() {
             // create a default settings object for this instance
             this.settings = {
@@ -521,7 +555,7 @@ includes an unlikely combination of all three:
 
     <polymer-element name="hint-element" attributes="isReady items">
       <script>
-        Polymer('hint-element', {
+        Polymer({
 
           // hint that isReady is a Boolean
           isReady: false,
@@ -592,7 +626,7 @@ For example:
 
     <polymer-element name="disappearing-element">
       <script>
-        Polymer('disappearing-element', {
+        Polymer({
           publish: {
             hidden: {
               value: false,
@@ -632,7 +666,7 @@ For example, we can define a `name-tag` element that publishes two properties,
         Hello! My name is <span style="color:{%raw%}{{nameColor}}{%endraw%}">{%raw%}{{name}}{%endraw%}</span>
       </template>
       <script>
-        Polymer('name-tag', {
+        Polymer({
           nameColor: "orange"
         });
       </script>
@@ -683,7 +717,7 @@ It uses special <code>on-<em>event</em></code> syntax to trigger this binding be
         <button on-click="{% raw %}{{buttonClick}}{% endraw %}"></button>
       </template>
       <script>
-        Polymer('g-cool', {
+        Polymer({
           keypressHandler: function(event, detail, sender) { ...},
           buttonClick: function(event, detail, sender) { ... }
         });
@@ -826,7 +860,7 @@ For example, the following defines a component whose template contains an `<inpu
         <input type="text" id="nameInput">
       </template>
       <script>
-        Polymer('x-form', {
+        Polymer({
           logNameValue: function() {
             console.log(this.$.nameInput.value);
           }
@@ -866,7 +900,7 @@ Example:
         <button on-click="{{onClick}}">Send hurt</button>
       </template>
       <script>
-        Polymer('ouch-button', {
+        Polymer({
           onClick: function() {
             this.fire('ouch', {msg: 'That hurt!'}); // fire(inType, inDetail, inToNode)
           }
@@ -898,7 +932,7 @@ and data-bound.
         You are {%raw%}{{praise}}{%endraw%} <content></content>!
       </template>
       <script>
-        Polymer('polymer-cool', {
+        Polymer({
           praise: 'cool'
         });
       </script>
@@ -911,7 +945,7 @@ and data-bound.
         <shadow></shadow> <!-- "You are cool Matt" -->
       </template>
       <script>
-        Polymer('polymer-cooler');
+        Polymer();
       </script>
     </polymer-element>
 
@@ -927,7 +961,7 @@ When you override an inherited method, you can call the parent's method with `th
         You are {{praise}} <content></content>!
       </template>
       <script>
-        Polymer('polymer-cool', {
+        Polymer({
           praise: 'cool',
           makeCoolest: function() {
             this.praise = 'the coolest';
@@ -942,7 +976,7 @@ When you override an inherited method, you can call the parent's method with `th
         <shadow></shadow>
       </template>
       <script>
-        Polymer('polymer-cooler', {
+        Polymer({
           praise: 'cool',
           makeCoolest: function() {
             this.super(); // calls polymer-cool's makeCoolest()