Update inline demo for webcomponents.org

Author: TimvdLippe

README.md

@@ -22,17 +22,29 @@ Example:
 <custom-element-demo>
   <template>
     <link rel="import" href="iron-lazy-pages.html">
-    <next-code-block></next-code-block>
+    <link rel="import" href="../paper-tabs/paper-tabs.html">
+    <link rel="import" href="../paper-tabs/paper-tab.html">
+    <dom-bind>
+      <template is="dom-bind">
+        <paper-tabs selected="{{route}}" attr-for-selected='key'>
+          <paper-tab key='foo'>Foo</paper-tab>
+          <paper-tab key='bar'>Bar</paper-tab>
+          <paper-tab key='baz'>Baz!</paper-tab>
+        </paper-tabs>
+        <next-code-block></next-code-block>
+      </template>
+    </dom-bind>
   </template>
 </custom-element-demo>
 ```
 -->
 ```html
 <iron-lazy-pages attr-for-selected="data-route" selected="{{route}}">
-  <section data-route="foo" data-path="demo/x-foo.html">
-    Foo page
-  </section>
+  <x-foo data-route="foo" data-path="demo/x-foo.html"></x-foo>
   <x-bar data-route="bar" data-path="demo/x-bar.html"></x-bar>
+  <section data-route="baz">
+    Inline element baz.
+  </section>
 </iron-lazy-pages>
 ```
 

demo/x-bar.html

@@ -1,6 +1,4 @@
-<link rel="import" href="../../neon-animation/neon-animatable-behavior.html">
-<link rel="import" href="../../neon-animation/animations/slide-from-top-animation.html">
-<link rel="import" href="../../neon-animation/animations/slide-up-animation.html">
+<link rel="import" href="../../polymer/polymer.html">
 
 <dom-module id="x-bar">
   <template>
@@ -15,25 +13,7 @@ <h3>Bar page</h3>
   </template>
   <script>
     Polymer({
-      is: 'x-bar',
-      behaviors: [Polymer.NeonAnimationBehavior],
-
-      properties: {
-        animationConfig: {
-          value: function() {
-            return {
-              entry: {
-                name: 'slide-from-top-animation',
-                node: this
-              },
-              exit: {
-                name: 'slide-up-animation',
-                node: this
-              }
-            };
-          }
-        }
-      }
+      is: 'x-bar'
     });
   </script>
 </dom-module>

demo/x-foo.html

@@ -1,6 +1,4 @@
-<link rel="import" href="../../neon-animation/neon-animatable-behavior.html">
-<link rel="import" href="../../neon-animation/animations/fade-in-animation.html">
-<link rel="import" href="../../neon-animation/animations/fade-out-animation.html">
+<link rel="import" href="../../polymer/polymer.html">
 
 <dom-module id="x-foo">
   <template>
@@ -15,25 +13,7 @@ <h3>Foo page</h3>
   </template>
   <script>
     Polymer({
-      is: 'x-foo',
-      behaviors: [Polymer.NeonAnimationBehavior],
-
-      properties: {
-        animationConfig: {
-          value: function() {
-            return {
-              entry: {
-                name: 'fade-in-animation',
-                node: this
-              },
-              exit: {
-                name: 'fade-out-animation',
-                node: this
-              }
-            };
-          }
-        }
-      }
+      is: 'x-foo'
     });
   </script>
 </dom-module>