diff --git a/.eslintrc.json b/.eslintrc.json
index ce13b20e9..8e8d8130d 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,5 +1,8 @@
 {
   "extends": ["eslint:recommended", "google"],
+  "parserOptions": {
+    "ecmaVersion": 6
+  },
   "env": {
     "browser": true
   },
@@ -7,8 +10,10 @@
     "html"
   ],
   "rules": {
+    "brace-style": "off",
+    "new-cap": ["error", { "capIsNewExceptions": ["Polymer"] }],
     "no-var": "off",
-    "new-cap": ["error", { "capIsNewExceptions": ["Polymer"] }]
+    "require-jsdoc": "off"
   },
   "globals": {
     "Polymer": true
diff --git a/bower.json b/bower.json
index 8b1dd7e3a..3addddc7a 100644
--- a/bower.json
+++ b/bower.json
@@ -5,22 +5,21 @@
   ],
   "license": "https://polymer.github.io/LICENSE.txt",
   "dependencies": {
-    "app-layout": "PolymerElements/app-layout#^0.10.0",
-    "app-route": "PolymerElements/app-route#^0.9.0",
-    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
-    "iron-icon": "PolymerElements/iron-icon#^1.0.0",
-    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.0",
-    "iron-localstorage": "PolymerElements/iron-localstorage#^1.0.0",
-    "iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
-    "iron-pages": "PolymerElements/iron-pages#^1.0.0",
-    "iron-selector": "PolymerElements/iron-selector#^1.0.0",
-    "paper-icon-button": "PolymerElements/paper-icon-button#~1.1.0",
-    "polymer": "Polymer/polymer#^1.6.0"
+    "app-layout": "PolymerElements/app-layout#2.0-preview",
+    "app-route": "PolymerElements/app-route#2.0-preview",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#2.0-preview",
+    "iron-icon": "PolymerElements/iron-icon#2.0-preview",
+    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#2.0-preview",
+    "iron-localstorage": "PolymerElements/iron-localstorage#2.0-preview",
+    "iron-media-query": "PolymerElements/iron-media-query#2.0-preview",
+    "iron-pages": "PolymerElements/iron-pages#2.0-preview",
+    "iron-selector": "PolymerElements/iron-selector#2.0-preview",
+    "paper-icon-button": "PolymerElements/paper-icon-button#2.0-preview",
+    "polymer": "Polymer/polymer#2.0-preview",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1"
   },
   "devDependencies": {
-    "web-component-tester": "^4.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1"
+    "web-component-tester": "6.0.0-prerelease.5"
   },
-  "private": true,
-  "ignore": []
+  "private": true
 }
diff --git a/index.html b/index.html
index c0ca1de0e..eff037ec3 100644
--- a/index.html
+++ b/index.html
@@ -47,46 +47,8 @@
     <meta name="msapplication-TileColor" content="#3f51b5">
     <meta name="msapplication-tap-highlight" content="no">
 
+    <!-- Load and register pre-caching Service Worker -->
     <script>
-      // Setup Polymer options
-      window.Polymer = {
-        dom: 'shadow',
-        lazyRegister: true,
-      };
-
-      // Load webcomponentsjs polyfill if browser does not support native
-      // Web Components
-      (function() {
-        'use strict';
-
-        var onload = function() {
-          // For native Imports, manually fire WebComponentsReady so user code
-          // can use the same code path for native and polyfill'd imports.
-          if (!window.HTMLImports) {
-            document.dispatchEvent(
-              new CustomEvent('WebComponentsReady', {bubbles: true})
-            );
-          }
-        };
-
-        var webComponentsSupported = (
-          'registerElement' in document
-          && 'import' in document.createElement('link')
-          && 'content' in document.createElement('template')
-        );
-
-        if (!webComponentsSupported) {
-          var script = document.createElement('script');
-          script.async = true;
-          script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
-          script.onload = onload;
-          document.head.appendChild(script);
-        } else {
-          onload();
-        }
-      })();
-
-      // Load pre-caching Service Worker
       if ('serviceWorker' in navigator) {
         window.addEventListener('load', function() {
           navigator.serviceWorker.register('/service-worker.js');
@@ -94,8 +56,13 @@
       }
     </script>
 
+    <!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
+    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
+
+    <!-- Load your application shell -->
     <link rel="import" href="/src/my-app.html">
 
+    <!-- Add any global styles for body, document, etc. -->
     <style>
       body {
         margin: 0;
diff --git a/polymer.json b/polymer.json
index 302b28835..ca22aa993 100644
--- a/polymer.json
+++ b/polymer.json
@@ -7,13 +7,16 @@
     "src/my-view3.html",
     "src/my-view404.html"
   ],
-  "sourceGlobs": [
+  "sources": [
     "src/**/*",
     "images/**/*",
     "bower.json"
   ],
-  "includeDependencies": [
+  "extraDependencies": [
     "manifest.json",
-    "bower_components/webcomponentsjs/webcomponents-lite.min.js"
-  ]
-}
\ No newline at end of file
+    "bower_components/webcomponentsjs/*.js"
+  ],
+  "lint": {
+    "rules": ["polymer-2"]
+  }
+}
diff --git a/src/my-app.html b/src/my-app.html
index c7b564026..944745415 100644
--- a/src/my-app.html
+++ b/src/my-app.html
@@ -8,7 +8,7 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
 <link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
 <link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
 <link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
@@ -32,10 +32,15 @@
         display: block;
       }
 
+      app-drawer-layout:not([narrow]) [drawer-toggle] {
+        display: none;
+      }
+
       app-header {
         color: #fff;
         background-color: var(--app-primary-color);
       }
+
       app-header paper-icon-button {
         --paper-icon-button-ink-color: white;
       }
@@ -67,7 +72,7 @@
 
     <app-drawer-layout fullbleed>
       <!-- Drawer content -->
-      <app-drawer id="drawer">
+      <app-drawer id="drawer" slot="drawer">
         <app-toolbar>Menu</app-toolbar>
         <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
           <a name="view1" href="/view1">View One</a>
@@ -79,7 +84,7 @@
       <!-- Main content -->
       <app-header-layout has-scrolling-region>
 
-        <app-header condenses reveals effects="waterfall">
+        <app-header slot="header" condenses reveals effects="waterfall">
           <app-toolbar>
             <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
             <div main-title>My App</div>
@@ -101,38 +106,58 @@
   </template>
 
   <script>
-    Polymer({
-      is: 'my-app',
-
-      properties: {
-        page: {
-          type: String,
-          reflectToAttribute: true,
-          observer: '_pageChanged',
-        },
-      },
-
-      observers: [
-        '_routePageChanged(routeData.page)',
-      ],
-
-      _routePageChanged: function(page) {
+    class MyApp extends Polymer.Element {
+
+      static get is() { return 'my-app'; }
+
+      static get properties() {
+        return {
+          page: {
+            type: String,
+            reflectToAttribute: true,
+            observer: '_pageChanged',
+          },
+        };
+      }
+
+      static get observers() {
+        return [
+          '_routePageChanged(routeData.page)',
+        ];
+      }
+
+      _routePageChanged(page) {
+        // Polymer 2.0 will call with `undefined` on initialization.
+        // Ignore until we are properly called with a string.
+        if (page === undefined) {
+          return;
+        }
+
+        // If no page was found in the route data, page will be an empty string.
+        // Deault to 'view1' in that case.
         this.page = page || 'view1';
 
+        // Close a non-persistent drawer when the page & route are changed.
         if (!this.$.drawer.persistent) {
           this.$.drawer.close();
         }
-      },
+      }
 
-      _pageChanged: function(page) {
+      _pageChanged(page) {
         // Load page import on demand. Show 404 page if fails
         var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
-        this.importHref(resolvedPageUrl, null, this._showPage404, true);
-      },
+        Polymer.importHref(
+            resolvedPageUrl,
+            null,
+            this._showPage404.bind(this),
+            true);
+      }
 
-      _showPage404: function() {
+      _showPage404() {
         this.page = 'view404';
-      },
-    });
+      }
+    }
+
+    window.customElements.define(MyApp.is, MyApp);
   </script>
 </dom-module>
diff --git a/src/my-view1.html b/src/my-view1.html
index b25d0f906..f01d7930c 100644
--- a/src/my-view1.html
+++ b/src/my-view1.html
@@ -8,7 +8,7 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
 <link rel="import" href="shared-styles.html">
 
 <dom-module id="my-view1">
@@ -30,8 +30,10 @@ <h1>View One</h1>
   </template>
 
   <script>
-    Polymer({
-      is: 'my-view1',
-    });
+    class MyView1 extends Polymer.Element {
+      static get is() { return 'my-view1'; }
+    }
+
+    window.customElements.define(MyView1.is, MyView1);
   </script>
 </dom-module>
diff --git a/src/my-view2.html b/src/my-view2.html
index 06b082c8b..1fcd61525 100644
--- a/src/my-view2.html
+++ b/src/my-view2.html
@@ -8,7 +8,7 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
 <link rel="import" href="shared-styles.html">
 
 <dom-module id="my-view2">
@@ -30,8 +30,10 @@ <h1>View Two</h1>
   </template>
 
   <script>
-    Polymer({
-      is: 'my-view2',
-    });
+    class MyView2 extends Polymer.Element {
+      static get is() { return 'my-view2'; }
+    }
+
+    window.customElements.define(MyView2.is, MyView2);
   </script>
 </dom-module>
diff --git a/src/my-view3.html b/src/my-view3.html
index c69c0723d..ad7ee9fa0 100644
--- a/src/my-view3.html
+++ b/src/my-view3.html
@@ -8,7 +8,7 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
 <link rel="import" href="shared-styles.html">
 
 <dom-module id="my-view3">
@@ -30,8 +30,10 @@ <h1>View Three</h1>
   </template>
 
   <script>
-    Polymer({
-      is: 'my-view3',
-    });
+    class MyView3 extends Polymer.Element {
+      static get is() { return 'my-view3'; }
+    }
+
+    window.customElements.define(MyView3.is, MyView3);
   </script>
 </dom-module>
diff --git a/src/my-view404.html b/src/my-view404.html
index 3f342a62c..9e8a51421 100644
--- a/src/my-view404.html
+++ b/src/my-view404.html
@@ -8,7 +8,7 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
 
 <dom-module id="my-view404">
   <template>
@@ -20,7 +20,7 @@
       }
     </style>
 
-    <!-- 
+    <!--
       If deploying in a folder replace href="/" with the full path to your site.
       Such as: href=="http://polymerelements.github.io/polymer-starter-kit"
     -->
@@ -28,8 +28,10 @@
   </template>
 
   <script>
-    Polymer({
-      is: 'my-view404',
-    });
+    class MyView404 extends Polymer.Element {
+      static get is() { return 'my-view404'; }
+    }
+
+    window.customElements.define(MyView404.is, MyView404);
   </script>
 </dom-module>
diff --git a/src/shared-styles.html b/src/shared-styles.html
index 5e4f2491d..6b993ab43 100644
--- a/src/shared-styles.html
+++ b/src/shared-styles.html
@@ -8,7 +8,7 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
 
 <!-- shared styles for all views -->
 <dom-module id="shared-styles">
diff --git a/sw-precache-config.js b/sw-precache-config.js
index 301bb56b0..05366c230 100644
--- a/sw-precache-config.js
+++ b/sw-precache-config.js
@@ -14,7 +14,7 @@ module.exports = {
   staticFileGlobs: [
     '/index.html',
     '/manifest.json',
-    '/bower_components/webcomponentsjs/webcomponents-lite.min.js',
+    '/bower_components/webcomponentsjs/*',
   ],
   navigateFallback: 'index.html',
 };
diff --git a/test/index.html b/test/index.html
index 8678e3845..ffcbbeb23 100644
--- a/test/index.html
+++ b/test/index.html
@@ -21,8 +21,10 @@
   <body>
     <script>
       WCT.loadSuites([
-        'my-view1.html?dom=shady',
+        // Load 'my-view1.html' test suite, using native shadow dom
         'my-view1.html?dom=shadow',
+        // Load 'my-view1.html' test suite, using shadydom
+        'my-view1.html?wc-shadydom=true',
       ]);
     </script>
   </body>
diff --git a/test/my-view1.html b/test/my-view1.html
index bcb79628e..8fdba141a 100644
--- a/test/my-view1.html
+++ b/test/my-view1.html
@@ -23,7 +23,7 @@
     <link rel="import" href="../src/my-view1.html">
   </head>
   <body>
-    <test-fixture id="basic">
+    <test-fixture id="BasicView">
       <template>
         <my-view1></my-view1>
       </template>
@@ -31,14 +31,9 @@
 
     <script>
       suite('my-view1 tests', function() {
-        var home;
-
-        setup(function() {
-          home = fixture('basic');
-        });
-
         test('Number in circle should be 1', function() {
-          var circle = Polymer.dom(home.root).querySelector('.circle');
+          var myView = fixture('BasicView');
+          var circle = myView.shadowRoot.querySelector('.circle');
           assert.equal(circle.textContent, '1');
         });
       });