diff --git a/.gitignore b/.gitignore
index 1eb1fa5..2be39e4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,2 @@
-bower_components
-
+bower_components*
+bower-*.json
diff --git a/.travis.yml b/.travis.yml
index 6bd14cb..00575a6 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,24 +1,28 @@
 language: node_js
 sudo: required
 before_script:
-  - npm install -g bower polylint web-component-tester
-  - bower install
-  - polylint
+  - npm install -g bower polymer-cli@next
+  - polymer install --variants
+  - sudo mv /usr/bin/google-chrome /usr/bin/google-chrome-old
+  - sudo mv /usr/bin/google-chrome-beta /usr/bin/google-chrome
 env:
   global:
     - secure: >-
         idlCNYtNQ7rLGCSl2NuZ++XZEwofpojkakXhL8m34pCX1ZwhGRprHsvNE7h7tz8SIV+mUjuUT8DaM7rlgZ+bLyw/Hq7G15DdmU5puUsCVibFFBBEhh82lxkdK/Rlfo+ytt0MFsbTJljEoqTSbnL0fSeC0cN/7wf6yEQs/+mTR0I=
     - secure: >-
         i/rAHa9rxszmbE+RbQ2b7ln6OYzrcoUssdPk36lNeJk/B1HjBS9cfg1PMwSAw+t6yvAN3I0fbOOl4dlGB1K5T4kAtmcAcC3fbptJL08IvK9K15pz/rMEzIBWLXj9oVJliwBZR2GFH+5zv6aFdEwQxh1leBnHQwmKgl24QX8XGO4=
-node_js: '6'
+node_js: stable
 addons:
   firefox: latest
   apt:
     sources:
       - google-chrome
     packages:
-      - google-chrome-stable
+      - google-chrome-beta
+  sauce_connect: true
 script:
-  - xvfb-run wct
-  - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s ''default''; fi'
+  - xvfb-run polymer test
+  - >-
+    if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default';
+    fi
 dist: trusty
diff --git a/GUIDE.md b/GUIDE.md
index 67a9e30..e230ce0 100644
--- a/GUIDE.md
+++ b/GUIDE.md
@@ -126,8 +126,8 @@ main document. (They cannot be applied in the main document without a `custom-st
   <!-- main document -- apply mixins in a custom-style element -->
   <style is="custom-style">
     .container {
-      @apply(--layout-horizontal);
-      @apply(--layout-wrap);
+      @apply --layout-horizontal;
+      @apply --layout-wrap;
     }
   </style>
 
@@ -153,8 +153,8 @@ main document. (They cannot be applied in the main document without a `custom-st
   <!-- inside an element -- apply mixins in a standard style element -->
   <style>
     .container {
-      @apply(--layout-horizontal);
-      @apply(--layout-wrap);
+      @apply --layout-horizontal;
+      @apply --layout-wrap;
     }
   </style>
 
@@ -234,7 +234,7 @@ The classes listed here are included in the `iron-flex` module of the `iron-flex
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
+    @apply --layout-horizontal;
   }
 </style>
 
@@ -301,10 +301,10 @@ The classes listed here are included in the `iron-flex` module of the `iron-flex
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
+    @apply --layout-horizontal;
   }
   .flexchild {
-    @apply(--layout-flex);
+    @apply --layout-flex;
   }
 </style>
 
@@ -362,10 +362,10 @@ The same rules can be used for children in vertical layouts.
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-vertical);
+    @apply --layout-vertical;
   }
   .flexchild {
-    @apply(--layout-flex);
+    @apply --layout-flex;
   }
 </style>
 
@@ -432,16 +432,16 @@ The classes listed here are included in the `iron-flex-factors` module of the `i
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
+    @apply --layout-horizontal;
   }
   .flexchild {
-    @apply(--layout-flex)
+    @apply --layout-flex;
   }
   .flex2child {
-    @apply(--layout-flex-2);
+    @apply --layout-flex-2;
   }
   .flex3child {
-    @apply(--layout-flex-3);
+    @apply --layout-flex-3;
   }
 </style>
 
@@ -567,8 +567,8 @@ by adding the `center` class or applying the `--layout-center` mixin.
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
-    @apply(--layout-center);
+    @apply --layout-horizontal;
+    @apply --layout-center;
   }
 </style>
 
@@ -652,8 +652,8 @@ classes, or by applying the `--layout-start` or `--layout-end` mixins.
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
-    @apply(--layout-start);
+    @apply --layout-horizontal;
+    @apply --layout-start;
   }
 </style>
 
@@ -733,8 +733,8 @@ classes, or by applying the `--layout-start` or `--layout-end` mixins.
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
-    @apply(--layout-end);
+    @apply --layout-horizontal;
+    @apply --layout-end;
   }
 </style>
 
@@ -830,8 +830,8 @@ The classes listed here are included in the `iron-flex-alignment` module of the
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
-    @apply(--layout-center-justified);
+    @apply --layout-horizontal;
+    @apply --layout-center-justified;
   }
 </style>
 
@@ -911,8 +911,8 @@ The classes listed here are included in the `iron-flex-alignment` module of the
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
-    @apply(--layout-justified);
+    @apply --layout-horizontal;
+    @apply --layout-justified;
   }
 </style>
 
@@ -1046,24 +1046,24 @@ Class | Mixin | Result
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
-    @apply(--layout-justified);
+    @apply --layout-horizontal;
+    @apply --layout-justified;
     height: 120px;
   }
   .container div {
-    @apply(--layout-flex);
+    @apply --layout-flex;
   }
   .child1 {
-    @apply(--layout-self-start);
+    @apply --layout-self-start;
   }
   .child2 {
-    @apply(--layout-self-center);
+    @apply --layout-self-center;
   }
   .child3 {
-    @apply(--layout-self-end);
+    @apply --layout-self-end;
   }
   .child4 {
-    @apply(--layout-self-stretch);
+    @apply --layout-self-stretch;
   }
 </style>
 <div class="container">
@@ -1169,7 +1169,7 @@ The classes listed here are included in the `iron-flex-reverse` module of the `i
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal-reverse);
+    @apply --layout-horizontal-reverse;
   }
 </style>
 
diff --git a/README.md b/README.md
index d5aac2f..ca54ed3 100644
--- a/README.md
+++ b/README.md
@@ -22,13 +22,14 @@ Sample use:
     <link rel="import" href="iron-flex-layout-classes.html">
     <dom-module id="demo-element">
       <template>
-        <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+        <custom-style>
+          <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+        </custom-style>
         <style>
           .container, .layout {
             background-color: #ccc;
             padding: 4px;
           }
-
           .container div, .layout div {
             background-color: white;
             padding: 12px;
@@ -53,15 +54,8 @@ Sample use:
 1. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html).
 The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.
 
-
-
-Please note that the old [/deep/ layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes)
-are deprecated, and should not be used. To continue using layout properties
-directly in markup, please switch to using the new `dom-module`-based
-[layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
-Please note that the new version does not use `/deep/`, and therefore requires you
-to import the `dom-modules` in every element that needs to use them.
-
 A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `<iron-flex-layout>` is available.
 
+## Changes in 2.0
+- removed the deprecated `/deep/` classes -- files removed: `classes/iron-flex-layout.html`, `classes/iron-shadow-flex-layout` 
 
diff --git a/bower.json b/bower.json
index 7b6b1a2..d80a860 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "iron-flex-layout",
-  "version": "1.3.7",
+  "version": "2.0.0",
   "description": "Provide flexbox-based layouts",
   "keywords": [
     "web-components",
@@ -18,14 +18,29 @@
     "url": "git://github.com/PolymerElements/iron-flex-layout.git"
   },
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.1.0"
+    "polymer": "Polymer/polymer#^2.0.0-rc.1"
   },
   "devDependencies": {
-    "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
-    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
-    "web-component-tester": "^4.0.0"
+    "test-fixture": "PolymerElements/test-fixture#^3.0.0-rc.1",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0-prerelease.6",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1",
+    "iron-component-page": "PolymerElements/iron-component-page#2.0-preview",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#2.0-preview"
+  },
+  "ignore": [],
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "polymer": "Polymer/polymer#^1.1.0"
+      },
+      "devDependencies": {
+        "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+        "web-component-tester": "Polymer/web-component-tester#^4.0.0",
+        "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+        "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0"
+      }
+    }
   },
   "pages": {
     "Flexbox layout guide": "GUIDE.md"
diff --git a/classes/iron-flex-layout.html b/classes/iron-flex-layout.html
deleted file mode 100644
index 5fa7ce6..0000000
--- a/classes/iron-flex-layout.html
+++ /dev/null
@@ -1,317 +0,0 @@
-<!--
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-
-<link rel="import" href="iron-shadow-flex-layout.html">
-
-<script>
-  console.warn('This file is deprecated. Please use `iron-flex-layout/iron-flex-layout-classes.html`, and one of the specific dom-modules instead');
-</script>
-
-<style>
-
-  /*******************************
-            Flex Layout
-  *******************************/
-
-  .layout.horizontal,
-  .layout.horizontal-reverse,
-  .layout.vertical,
-  .layout.vertical-reverse {
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-  }
-
-  .layout.inline {
-    display: -ms-inline-flexbox;
-    display: -webkit-inline-flex;
-    display: inline-flex;
-  }
-
-  .layout.horizontal {
-    -ms-flex-direction: row;
-    -webkit-flex-direction: row;
-    flex-direction: row;
-  }
-
-  .layout.horizontal-reverse {
-    -ms-flex-direction: row-reverse;
-    -webkit-flex-direction: row-reverse;
-    flex-direction: row-reverse;
-  }
-
-  .layout.vertical {
-    -ms-flex-direction: column;
-    -webkit-flex-direction: column;
-    flex-direction: column;
-  }
-
-  .layout.vertical-reverse {
-    -ms-flex-direction: column-reverse;
-    -webkit-flex-direction: column-reverse;
-    flex-direction: column-reverse;
-  }
-
-  .layout.wrap {
-    -ms-flex-wrap: wrap;
-    -webkit-flex-wrap: wrap;
-    flex-wrap: wrap;
-  }
-  
-  .layout.no-wrap {
-    -ms-flex-wrap: nowrap;
-    -webkit-flex-wrap: nowrap;
-    flex-wrap: nowrap;
-  }
-
-  .layout.wrap-reverse {
-    -ms-flex-wrap: wrap-reverse;
-    -webkit-flex-wrap: wrap-reverse;
-    flex-wrap: wrap-reverse;
-  }
-
-  .flex-auto {
-    -ms-flex: 1 1 auto;
-    -webkit-flex: 1 1 auto;
-    flex: 1 1 auto;
-  }
-
-  .flex-none {
-    -ms-flex: none;
-    -webkit-flex: none;
-    flex: none;
-  }
-
-  .flex,
-  .flex-1 {
-    -ms-flex: 1;
-    -webkit-flex: 1;
-    flex: 1;
-  }
-
-  .flex-2 {
-    -ms-flex: 2;
-    -webkit-flex: 2;
-    flex: 2;
-  }
-
-  .flex-3 {
-    -ms-flex: 3;
-    -webkit-flex: 3;
-    flex: 3;
-  }
-
-  .flex-4 {
-    -ms-flex: 4;
-    -webkit-flex: 4;
-    flex: 4;
-  }
-
-  .flex-5 {
-    -ms-flex: 5;
-    -webkit-flex: 5;
-    flex: 5;
-  }
-
-  .flex-6 {
-    -ms-flex: 6;
-    -webkit-flex: 6;
-    flex: 6;
-  }
-
-  .flex-7 {
-    -ms-flex: 7;
-    -webkit-flex: 7;
-    flex: 7;
-  }
-
-  .flex-8 {
-    -ms-flex: 8;
-    -webkit-flex: 8;
-    flex: 8;
-  }
-
-  .flex-9 {
-    -ms-flex: 9;
-    -webkit-flex: 9;
-    flex: 9;
-  }
-
-  .flex-10 {
-    -ms-flex: 10;
-    -webkit-flex: 10;
-    flex: 10;
-  }
-
-  .flex-11 {
-    -ms-flex: 11;
-    -webkit-flex: 11;
-    flex: 11;
-  }
-
-  .flex-12 {
-    -ms-flex: 12;
-    -webkit-flex: 12;
-    flex: 12;
-  }
-
-  /* alignment in cross axis */
-
-  .layout.start {
-    -ms-flex-align: start;
-    -webkit-align-items: flex-start;
-    align-items: flex-start;
-  }
-
-  .layout.center,
-  .layout.center-center {
-    -ms-flex-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-  }
-
-  .layout.end {
-    -ms-flex-align: end;
-    -webkit-align-items: flex-end;
-    align-items: flex-end;
-  }
-
-  /* alignment in main axis */
-
-  .layout.start-justified {
-    -ms-flex-pack: start;
-    -webkit-justify-content: flex-start;
-    justify-content: flex-start;
-  }
-
-  .layout.center-justified,
-  .layout.center-center {
-    -ms-flex-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center;
-  }
-
-  .layout.end-justified {
-    -ms-flex-pack: end;
-    -webkit-justify-content: flex-end;
-    justify-content: flex-end;
-  }
-
-  .layout.around-justified {
-    -ms-flex-pack: around;
-    -webkit-justify-content: space-around;
-    justify-content: space-around;
-  }
-
-  .layout.justified {
-    -ms-flex-pack: justify;
-    -webkit-justify-content: space-between;
-    justify-content: space-between;
-  }
-
-  /* self alignment */
-
-  .self-start {
-    -ms-align-self: flex-start;
-    -webkit-align-self: flex-start;
-    align-self: flex-start;
-  }
-
-  .self-center {
-    -ms-align-self: center;
-    -webkit-align-self: center;
-    align-self: center;
-  }
-
-  .self-end {
-    -ms-align-self: flex-end;
-    -webkit-align-self: flex-end;
-    align-self: flex-end;
-  }
-
-  .self-stretch {
-    -ms-align-self: stretch;
-    -webkit-align-self: stretch;
-    align-self: stretch;
-  }
-
-  /*******************************
-            Other Layout
-  *******************************/
-
-  .block {
-    display: block;
-  }
-
-  /* IE 10 support for HTML5 hidden attr */
-  [hidden] {
-    display: none !important;
-  }
-
-  .invisible {
-    visibility: hidden !important;
-  }
-
-  .relative {
-    position: relative;
-  }
-
-  .fit {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  body.fullbleed {
-    margin: 0;
-    height: 100vh;
-  }
-
-  .scroll {
-    -webkit-overflow-scrolling: touch;
-    overflow: auto;
-  }
-
-  /* fixed position */
-
-  .fixed-bottom,
-  .fixed-left,
-  .fixed-right,
-  .fixed-top {
-    position: fixed;
-  }
-
-  .fixed-top {
-    top: 0;
-    left: 0;
-    right: 0;
-  }
-
-  .fixed-right {
-    top: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  .fixed-bottom {
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  .fixed-left {
-    top: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-</style>
diff --git a/classes/iron-shadow-flex-layout.html b/classes/iron-shadow-flex-layout.html
deleted file mode 100644
index 5dcde19..0000000
--- a/classes/iron-shadow-flex-layout.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!--
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-
-<script>
-  console.warn('This file is deprecated. Please use `iron-flex-layout/iron-flex-layout-classes.html`, and one of the specific dom-modules instead');
-</script>
-
-<style>
-
-  /*******************************
-            Flex Layout
-  *******************************/
-
-  html /deep/ .layout.horizontal,
-  html /deep/ .layout.horizontal-reverse,
-  html /deep/ .layout.vertical,
-  html /deep/ .layout.vertical-reverse {
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-  }
-
-  html /deep/ .layout.inline {
-    display: -ms-inline-flexbox;
-    display: -webkit-inline-flex;
-    display: inline-flex;
-  }
-
-  html /deep/ .layout.horizontal {
-    -ms-flex-direction: row;
-    -webkit-flex-direction: row;
-    flex-direction: row;
-  }
-
-  html /deep/ .layout.horizontal-reverse {
-    -ms-flex-direction: row-reverse;
-    -webkit-flex-direction: row-reverse;
-    flex-direction: row-reverse;
-  }
-
-  html /deep/ .layout.vertical {
-    -ms-flex-direction: column;
-    -webkit-flex-direction: column;
-    flex-direction: column;
-  }
-
-  html /deep/ .layout.vertical-reverse {
-    -ms-flex-direction: column-reverse;
-    -webkit-flex-direction: column-reverse;
-    flex-direction: column-reverse;
-  }
-
-  html /deep/ .layout.wrap {
-    -ms-flex-wrap: wrap;
-    -webkit-flex-wrap: wrap;
-    flex-wrap: wrap;
-  }
-  
-  html /deep/ .layout-no-wrap {
-    -ms-flex-wrap: nowrap;
-    -webkit-flex-wrap: nowrap;
-    flex-wrap: nowrap;
-  }
-
-  html /deep/ .layout.wrap-reverse {
-    -ms-flex-wrap: wrap-reverse;
-    -webkit-flex-wrap: wrap-reverse;
-    flex-wrap: wrap-reverse;
-  }
-
-  html /deep/ .flex-auto {
-    -ms-flex: 1 1 auto;
-    -webkit-flex: 1 1 auto;
-    flex: 1 1 auto;
-  }
-
-  html /deep/ .flex-none {
-    -ms-flex: none;
-    -webkit-flex: none;
-    flex: none;
-  }
-
-  html /deep/ .flex,
-  html /deep/ .flex-1 {
-    -ms-flex: 1;
-    -webkit-flex: 1;
-    flex: 1;
-  }
-
-  html /deep/ .flex-2 {
-    -ms-flex: 2;
-    -webkit-flex: 2;
-    flex: 2;
-  }
-
-  html /deep/ .flex-3 {
-    -ms-flex: 3;
-    -webkit-flex: 3;
-    flex: 3;
-  }
-
-  html /deep/ .flex-4 {
-    -ms-flex: 4;
-    -webkit-flex: 4;
-    flex: 4;
-  }
-
-  html /deep/ .flex-5 {
-    -ms-flex: 5;
-    -webkit-flex: 5;
-    flex: 5;
-  }
-
-  html /deep/ .flex-6 {
-    -ms-flex: 6;
-    -webkit-flex: 6;
-    flex: 6;
-  }
-
-  html /deep/ .flex-7 {
-    -ms-flex: 7;
-    -webkit-flex: 7;
-    flex: 7;
-  }
-
-  html /deep/ .flex-8 {
-    -ms-flex: 8;
-    -webkit-flex: 8;
-    flex: 8;
-  }
-
-  html /deep/ .flex-9 {
-    -ms-flex: 9;
-    -webkit-flex: 9;
-    flex: 9;
-  }
-
-  html /deep/ .flex-10 {
-    -ms-flex: 10;
-    -webkit-flex: 10;
-    flex: 10;
-  }
-
-  html /deep/ .flex-11 {
-    -ms-flex: 11;
-    -webkit-flex: 11;
-    flex: 11;
-  }
-
-  html /deep/ .flex-12 {
-    -ms-flex: 12;
-    -webkit-flex: 12;
-    flex: 12;
-  }
-
-  /* alignment in cross axis */
-
-  html /deep/ .layout.start {
-    -ms-flex-align: start;
-    -webkit-align-items: flex-start;
-    align-items: flex-start;
-  }
-
-  html /deep/ .layout.center,
-  html /deep/ .layout.center-center {
-    -ms-flex-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-  }
-
-  html /deep/ .layout.end {
-    -ms-flex-align: end;
-    -webkit-align-items: flex-end;
-    align-items: flex-end;
-  }
-
-  /* alignment in main axis */
-
-  html /deep/ .layout.start-justified {
-    -ms-flex-pack: start;
-    -webkit-justify-content: flex-start;
-    justify-content: flex-start;
-  }
-
-  html /deep/ .layout.center-justified,
-  html /deep/ .layout.center-center {
-    -ms-flex-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center;
-  }
-
-  html /deep/ .layout.end-justified {
-    -ms-flex-pack: end;
-    -webkit-justify-content: flex-end;
-    justify-content: flex-end;
-  }
-
-  html /deep/ .layout.around-justified {
-    -ms-flex-pack: around;
-    -webkit-justify-content: space-around;
-    justify-content: space-around;
-  }
-
-  html /deep/ .layout.justified {
-    -ms-flex-pack: justify;
-    -webkit-justify-content: space-between;
-    justify-content: space-between;
-  }
-
-  /* self alignment */
-
-  html /deep/ .self-start {
-    -ms-align-self: flex-start;
-    -webkit-align-self: flex-start;
-    align-self: flex-start;
-  }
-
-  html /deep/ .self-center {
-    -ms-align-self: center;
-    -webkit-align-self: center;
-    align-self: center;
-  }
-
-  html /deep/ .self-end {
-    -ms-align-self: flex-end;
-    -webkit-align-self: flex-end;
-    align-self: flex-end;
-  }
-
-  html /deep/ .self-stretch {
-    -ms-align-self: stretch;
-    -webkit-align-self: stretch;
-    align-self: stretch;
-  }
-
-  /*******************************
-            Other Layout
-  *******************************/
-
-  html /deep/ .block {
-    display: block;
-  }
-
-  /* IE 10 support for HTML5 hidden attr */
-  html /deep/ [hidden] {
-    display: none !important;
-  }
-
-  html /deep/ .invisible {
-    visibility: hidden !important;
-  }
-
-  html /deep/ .relative {
-    position: relative;
-  }
-
-  html /deep/ .fit {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  body.fullbleed {
-    margin: 0;
-    height: 100vh;
-  }
-
-  html /deep/ .scroll {
-    -webkit-overflow-scrolling: touch;
-    overflow: auto;
-  }
-
-  .fixed-bottom,
-  .fixed-left,
-  .fixed-right,
-  .fixed-top {
-    position: fixed;
-  }
-
-  html /deep/ .fixed-top {
-    top: 0;
-    left: 0;
-    right: 0;
-  }
-
-  html /deep/ .fixed-right {
-    top: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  html /deep/ .fixed-bottom {
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  html /deep/ .fixed-left {
-    top: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-</style>
diff --git a/demo/index.html b/demo/index.html
index 4bc2d41..887ff3f 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -18,33 +18,32 @@
 
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
-  <link rel="import" href="../../paper-styles/demo-pages.html">
   <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
   <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
   <link rel="import" href="../iron-flex-layout.html">
 
-  <style is="custom-style" include="demo-pages-shared-styles">
-    demo-snippet {
-      --demo-snippet-demo: {
-        padding: 0;
+  <custom-style>
+    <style is="custom-style" include="demo-pages-shared-styles">
+      demo-snippet {
+        --demo-snippet-demo: {
+          padding: 0;
+        };
       }
-    }
-    .container {
-      background-color: #ccc;
-      padding: 5px;
-      margin: 0;
-    }
-    .container > div {
-      padding: 15px;
-      margin: 5px;
-      background-color: white;
-      min-height: 20px;
-    }
-
-    .vertical-section-container {
-      max-width: 700px
-    }
-  </style>
+
+      .container {
+        background-color: #ccc;
+        padding: 5px;
+        margin: 0;
+      }
+
+      .container > div {
+        padding: 15px;
+        margin: 5px;
+        background-color: white;
+        min-height: 20px;
+      }
+    </style>
+  </custom-style>
 
 </head>
 <body unresolved class="fullbleed">
@@ -52,11 +51,13 @@
     <h4>Horizontal and vertical layout</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
-          .flex {
-            @apply(--layout-horizontal);
-          }
-        </style>
+        <custom-style>
+          <style is="custom-style">
+            .flex {
+              @apply --layout-horizontal;
+            }
+          </style>
+        </custom-style>
         <div class="container flex">
           <div>one</div>
           <div>two</div>
@@ -68,14 +69,16 @@ <h4>Horizontal and vertical layout</h4>
     <h4>Flexible children</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
-          .flex-horizontal {
-            @apply(--layout-horizontal);
-          }
-          .flexchild {
-            @apply(--layout-flex);
-          }
-        </style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-horizontal {
+              @apply --layout-horizontal;
+            }
+            .flexchild {
+              @apply --layout-flex;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-horizontal">
           <div>one</div>
@@ -88,15 +91,17 @@ <h4>Flexible children</h4>
     <h4>Flexible children in vertical layouts</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
-          .flex-vertical {
-            @apply(--layout-vertical);
-            height: 220px;
-          }
-          .flexchild-vertical {
-            @apply(--layout-flex);
-          }
-        </style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-vertical {
+              @apply --layout-vertical;
+              height: 220px;
+            }
+            .flexchild-vertical {
+              @apply --layout-flex;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-vertical">
           <div>one</div>
@@ -109,20 +114,22 @@ <h4>Flexible children in vertical layouts</h4>
     <h4>Flex ratios</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
-          .flex-horizontal-with-ratios {
-            @apply(--layout-horizontal);
-          }
-          .flexchild {
-            @apply(--layout-flex);
-          }
-          .flex2child {
-            @apply(--layout-flex-2);
-          }
-          .flex3child {
-            @apply(--layout-flex-3);
-          }
-        </style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-horizontal-with-ratios {
+              @apply --layout-horizontal;
+            }
+            .flexchild {
+              @apply --layout-flex;
+            }
+            .flex2child {
+              @apply --layout-flex-2;
+            }
+            .flex3child {
+              @apply --layout-flex-3;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-horizontal-with-ratios">
           <div class="flex3child">one</div>
@@ -135,12 +142,14 @@ <h4>Flex ratios</h4>
     <h4>Cross-axis stretch alignment (default)</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
-          .flex-stretch-align {
-            @apply(--layout-horizontal);
-            height: 120px;
-          }
-        </style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-stretch-align {
+              @apply --layout-horizontal;
+              height: 120px;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-stretch-align">
           <div>stretch</div>
@@ -151,13 +160,15 @@ <h4>Cross-axis stretch alignment (default)</h4>
     <h4>Cross-axis center alignment</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
-          .flex-center-align {
-            @apply(--layout-horizontal);
-            @apply(--layout-center);
-            height: 120px;
-          }
-        </style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-center-align {
+              @apply --layout-horizontal;
+              @apply --layout-center;
+              height: 120px;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-center-align">
           <div>center</div>
@@ -168,13 +179,15 @@ <h4>Cross-axis center alignment</h4>
     <h4>Cross-axis start alignment</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
-          .flex-start-align {
-            @apply(--layout-horizontal);
-            @apply(--layout-start);
-            height: 120px;
-          }
-        </style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-start-align {
+              @apply --layout-horizontal;
+              @apply --layout-start;
+              height: 120px;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-start-align">
           <div>start</div>
@@ -185,13 +198,15 @@ <h4>Cross-axis start alignment</h4>
     <h4>Cross-axis end alignment</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
-          .flex-end-align {
-            @apply(--layout-horizontal);
-            @apply(--layout-end);
-            height: 120px;
-          }
-        </style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-end-align {
+              @apply --layout-horizontal;
+              @apply --layout-end;
+              height: 120px;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-end-align">
           <div>end</div>
@@ -202,12 +217,14 @@ <h4>Cross-axis end alignment</h4>
     <h4>Justification, start justified</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
-          .flex-start-justified {
-            @apply(--layout-horizontal);
-            @apply(--layout-start-justified);
-          }
-        </style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-start-justified {
+              @apply --layout-horizontal;
+              @apply --layout-start-justified;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-start-justified">
           <div>start-justified</div>
@@ -218,12 +235,14 @@ <h4>Justification, start justified</h4>
     <h4>Justification, center justified</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
-          .flex-center-justified {
-            @apply(--layout-horizontal);
-            @apply(--layout-center-justified);
-          }
-        </style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-center-justified {
+              @apply --layout-horizontal;
+              @apply --layout-center-justified;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-center-justified">
           <div>center-justified</div>
@@ -234,12 +253,14 @@ <h4>Justification, center justified</h4>
     <h4>Justification, end justified</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
-          .flex-end-justified {
-            @apply(--layout-horizontal);
-            @apply(--layout-end-justified);
-          }
-        </style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-end-justified {
+              @apply --layout-horizontal;
+              @apply --layout-end-justified;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-end-justified">
           <div>end-justified</div>
@@ -250,12 +271,14 @@ <h4>Justification, end justified</h4>
     <h4>Justification, equal space between elements</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
-          .flex-equal-justified {
-            @apply(--layout-horizontal);
-            @apply(--layout-justified);
-          }
-        </style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-equal-justified {
+              @apply --layout-horizontal;
+              @apply --layout-justified;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-equal-justified">
           <div>justified</div>
@@ -268,12 +291,14 @@ <h4>Justification, equal space between elements</h4>
     <h4>Justification, equal space around each element</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
-          .flex-equal-around-justified {
-            @apply(--layout-horizontal);
-            @apply(--layout-around-justified);
-          }
-        </style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-equal-around-justified {
+              @apply --layout-horizontal;
+              @apply --layout-around-justified;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-equal-around-justified">
           <div>around-justified</div>
@@ -285,28 +310,30 @@ <h4>Justification, equal space around each element</h4>
     <h4>Self alignment</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
-          .flex-self-align {
-            @apply(--layout-horizontal);
-            @apply(--layout-justified);
-            height: 120px;
-          }
-          .flex-self-align div {
-            @apply(--layout-flex);
-          }
-          .child1 {
-            @apply(--layout-self-start);
-          }
-          .child2 {
-            @apply(--layout-self-center);
-          }
-          .child3 {
-            @apply(--layout-self-end);
-          }
-          .child4 {
-            @apply(--layout-self-stretch);
-          }
-        </style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-self-align {
+              @apply --layout-horizontal;
+              @apply --layout-justified;
+              height: 120px;
+            }
+            .flex-self-align div {
+              @apply --layout-flex;
+            }
+            .child1 {
+              @apply --layout-self-start;
+            }
+            .child2 {
+              @apply --layout-self-center;
+            }
+            .child3 {
+              @apply --layout-self-end;
+            }
+            .child4 {
+              @apply --layout-self-stretch;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-self-align">
           <div class="child1">one</div>
@@ -320,13 +347,15 @@ <h4>Self alignment</h4>
     <h4>Wrapping</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
-          .flex-wrap {
-            @apply(--layout-horizontal);
-            @apply(--layout-wrap);
-            width: 200px;
-          }
-        </style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-wrap {
+              @apply --layout-horizontal;
+              @apply --layout-wrap;
+              width: 200px;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-wrap">
           <div>one</div>
@@ -340,11 +369,13 @@ <h4>Wrapping</h4>
     <h4>Reversed layouts</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
-          .flex-reversed {
-            @apply(--layout-horizontal-reverse);
-          }
-        </style>
+        <custom-style>
+          <style is="custom-style">
+            .flex-reversed {
+              @apply --layout-horizontal-reverse;
+            }
+          </style>
+        </custom-style>
 
         <div class="container flex-reversed">
           <div>one</div>
@@ -358,28 +389,30 @@ <h4>Reversed layouts</h4>
     <h4>General purpose rules</h4>
     <demo-snippet>
       <template>
-        <style is="custom-style">
-          .general {
-            width: 100%;
-          }
-          .general > div {
-            background-color: #ccc;
-            padding: 4px;
-            margin: 12px;
-          }
-          .block {
-            @apply(--layout-block);
-          }
-          .invisible {
-            @apply(--layout-invisible);
-          }
-          .relative {
-            @apply(--layout-relative);
-          }
-          .fit {
-            @apply(--layout-fit);
-          }
-        </style>
+        <custom-style>
+          <style is="custom-style">
+            .general {
+              width: 100%;
+            }
+            .general > div {
+              background-color: #ccc;
+              padding: 4px;
+              margin: 12px;
+            }
+            .block {
+              @apply --layout-block;
+            }
+            .invisible {
+              @apply --layout-invisible;
+            }
+            .relative {
+              @apply --layout-relative;
+            }
+            .fit {
+              @apply --layout-fit;
+            }
+          </style>
+        </custom-style>
 
         <div class="general">
           <div>Before <span>[A Span]</span> After</div>
diff --git a/iron-flex-layout-classes.html b/iron-flex-layout-classes.html
index 6bf47f8..a4e84c1 100644
--- a/iron-flex-layout-classes.html
+++ b/iron-flex-layout-classes.html
@@ -370,7 +370,6 @@
         display: block;
       }
 
-      /* IE 10 support for HTML5 hidden attr */
       [hidden] {
         display: none !important;
       }
diff --git a/iron-flex-layout.html b/iron-flex-layout.html
index a69f46a..5050ce8 100644
--- a/iron-flex-layout.html
+++ b/iron-flex-layout.html
@@ -58,361 +58,348 @@
 @pseudoElement iron-flex-layout
 @demo demo/index.html
 -->
-
-<style>
-  /* IE 10 support for HTML5 hidden attr */
-  [hidden] {
-    display: none !important;
-  }
-</style>
-
-<style is="custom-style">
-  :root {
-
-    --layout: {
-      display: -ms-flexbox;
-      display: -webkit-flex;
-      display: flex;
-    };
-
-    --layout-inline: {
-      display: -ms-inline-flexbox;
-      display: -webkit-inline-flex;
-      display: inline-flex;
-    };
-
-    --layout-horizontal: {
-      @apply(--layout);
-
-      -ms-flex-direction: row;
-      -webkit-flex-direction: row;
-      flex-direction: row;
-    };
-
-    --layout-horizontal-reverse: {
-      @apply(--layout);
-
-      -ms-flex-direction: row-reverse;
-      -webkit-flex-direction: row-reverse;
-      flex-direction: row-reverse;
-    };
-
-    --layout-vertical: {
-      @apply(--layout);
-
-      -ms-flex-direction: column;
-      -webkit-flex-direction: column;
-      flex-direction: column;
-    };
-
-    --layout-vertical-reverse: {
-      @apply(--layout);
-
-      -ms-flex-direction: column-reverse;
-      -webkit-flex-direction: column-reverse;
-      flex-direction: column-reverse;
-    };
-
-    --layout-wrap: {
-      -ms-flex-wrap: wrap;
-      -webkit-flex-wrap: wrap;
-      flex-wrap: wrap;
-    };
-
-    --layout-no-wrap: {
-      -ms-flex-wrap: nowrap;
-      -webkit-flex-wrap: nowrap;
-      flex-wrap: nowrap;
-    };
-
-    --layout-wrap-reverse: {
-      -ms-flex-wrap: wrap-reverse;
-      -webkit-flex-wrap: wrap-reverse;
-      flex-wrap: wrap-reverse;
-    };
-
-    --layout-flex-auto: {
-      -ms-flex: 1 1 auto;
-      -webkit-flex: 1 1 auto;
-      flex: 1 1 auto;
-    };
-
-    --layout-flex-none: {
-      -ms-flex: none;
-      -webkit-flex: none;
-      flex: none;
-    };
-
-    --layout-flex: {
-      -ms-flex: 1 1 0.000000001px;
-      -webkit-flex: 1;
-      flex: 1;
-      -webkit-flex-basis: 0.000000001px;
-      flex-basis: 0.000000001px;
-    };
-
-    --layout-flex-2: {
-      -ms-flex: 2;
-      -webkit-flex: 2;
-      flex: 2;
-    };
-
-    --layout-flex-3: {
-      -ms-flex: 3;
-      -webkit-flex: 3;
-      flex: 3;
-    };
-
-    --layout-flex-4: {
-      -ms-flex: 4;
-      -webkit-flex: 4;
-      flex: 4;
-    };
-
-    --layout-flex-5: {
-      -ms-flex: 5;
-      -webkit-flex: 5;
-      flex: 5;
-    };
-
-    --layout-flex-6: {
-      -ms-flex: 6;
-      -webkit-flex: 6;
-      flex: 6;
-    };
-
-    --layout-flex-7: {
-      -ms-flex: 7;
-      -webkit-flex: 7;
-      flex: 7;
-    };
-
-    --layout-flex-8: {
-      -ms-flex: 8;
-      -webkit-flex: 8;
-      flex: 8;
-    };
-
-    --layout-flex-9: {
-      -ms-flex: 9;
-      -webkit-flex: 9;
-      flex: 9;
-    };
-
-    --layout-flex-10: {
-      -ms-flex: 10;
-      -webkit-flex: 10;
-      flex: 10;
-    };
-
-    --layout-flex-11: {
-      -ms-flex: 11;
-      -webkit-flex: 11;
-      flex: 11;
-    };
-
-    --layout-flex-12: {
-      -ms-flex: 12;
-      -webkit-flex: 12;
-      flex: 12;
-    };
-
-    /* alignment in cross axis */
-
-    --layout-start: {
-      -ms-flex-align: start;
-      -webkit-align-items: flex-start;
-      align-items: flex-start;
-    };
-
-    --layout-center: {
-      -ms-flex-align: center;
-      -webkit-align-items: center;
-      align-items: center;
-    };
-
-    --layout-end: {
-      -ms-flex-align: end;
-      -webkit-align-items: flex-end;
-      align-items: flex-end;
-    };
-
-    --layout-baseline: {
-      -ms-flex-align: baseline;
-      -webkit-align-items: baseline;
-      align-items: baseline;
-    };
-
-    /* alignment in main axis */
-
-    --layout-start-justified: {
-      -ms-flex-pack: start;
-      -webkit-justify-content: flex-start;
-      justify-content: flex-start;
-    };
-
-    --layout-center-justified: {
-      -ms-flex-pack: center;
-      -webkit-justify-content: center;
-      justify-content: center;
-    };
-
-    --layout-end-justified: {
-      -ms-flex-pack: end;
-      -webkit-justify-content: flex-end;
-      justify-content: flex-end;
-    };
-
-    --layout-around-justified: {
-      -ms-flex-pack: distribute;
-      -webkit-justify-content: space-around;
-      justify-content: space-around;
-    };
-
-    --layout-justified: {
-      -ms-flex-pack: justify;
-      -webkit-justify-content: space-between;
-      justify-content: space-between;
-    };
-
-    --layout-center-center: {
-      @apply(--layout-center);
-      @apply(--layout-center-justified);
-    };
-
-    /* self alignment */
-
-    --layout-self-start: {
-      -ms-align-self: flex-start;
-      -webkit-align-self: flex-start;
-      align-self: flex-start;
-    };
-
-    --layout-self-center: {
-      -ms-align-self: center;
-      -webkit-align-self: center;
-      align-self: center;
-    };
-
-    --layout-self-end: {
-      -ms-align-self: flex-end;
-      -webkit-align-self: flex-end;
-      align-self: flex-end;
-    };
-
-    --layout-self-stretch: {
-      -ms-align-self: stretch;
-      -webkit-align-self: stretch;
-      align-self: stretch;
-    };
-
-    --layout-self-baseline: {
-      -ms-align-self: baseline;
-      -webkit-align-self: baseline;
-      align-self: baseline;
-    };
-
-    /* multi-line alignment in main axis */
-
-    --layout-start-aligned: {
-      -ms-flex-line-pack: start;  /* IE10 */
-      -ms-align-content: flex-start;
-      -webkit-align-content: flex-start;
-      align-content: flex-start;
-    };
-
-    --layout-end-aligned: {
-      -ms-flex-line-pack: end;  /* IE10 */
-      -ms-align-content: flex-end;
-      -webkit-align-content: flex-end;
-      align-content: flex-end;
-    };
-
-    --layout-center-aligned: {
-      -ms-flex-line-pack: center;  /* IE10 */
-      -ms-align-content: center;
-      -webkit-align-content: center;
-      align-content: center;
-    };
-
-    --layout-between-aligned: {
-      -ms-flex-line-pack: justify;  /* IE10 */
-      -ms-align-content: space-between;
-      -webkit-align-content: space-between;
-      align-content: space-between;
-    };
-
-    --layout-around-aligned: {
-      -ms-flex-line-pack: distribute;  /* IE10 */
-      -ms-align-content: space-around;
-      -webkit-align-content: space-around;
-      align-content: space-around;
-    };
-
-    /*******************************
-              Other Layout
-    *******************************/
-
-    --layout-block: {
-      display: block;
-    };
-
-    --layout-invisible: {
-      visibility: hidden !important;
-    };
-
-    --layout-relative: {
-      position: relative;
-    };
-
-    --layout-fit: {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    };
-
-    --layout-scroll: {
-      -webkit-overflow-scrolling: touch;
-      overflow: auto;
-    };
-
-    --layout-fullbleed: {
-      margin: 0;
-      height: 100vh;
-    };
-
-    /* fixed position */
-
-    --layout-fixed-top: {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-    };
-
-    --layout-fixed-right: {
-      position: fixed;
-      top: 0;
-      right: 0;
-      bottom: 0;
-    };
-
-    --layout-fixed-bottom: {
-      position: fixed;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    };
-
-    --layout-fixed-left: {
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-    };
-
-  }
-
-</style>
+<custom-style>
+  <style is="custom-style">
+    html {
+
+      --layout: {
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+      };
+
+      --layout-inline: {
+        display: -ms-inline-flexbox;
+        display: -webkit-inline-flex;
+        display: inline-flex;
+      };
+
+      --layout-horizontal: {
+        @apply --layout;
+
+        -ms-flex-direction: row;
+        -webkit-flex-direction: row;
+        flex-direction: row;
+      };
+
+      --layout-horizontal-reverse: {
+        @apply --layout;
+
+        -ms-flex-direction: row-reverse;
+        -webkit-flex-direction: row-reverse;
+        flex-direction: row-reverse;
+      };
+
+      --layout-vertical: {
+        @apply --layout;
+
+        -ms-flex-direction: column;
+        -webkit-flex-direction: column;
+        flex-direction: column;
+      };
+
+      --layout-vertical-reverse: {
+        @apply --layout;
+
+        -ms-flex-direction: column-reverse;
+        -webkit-flex-direction: column-reverse;
+        flex-direction: column-reverse;
+      };
+
+      --layout-wrap: {
+        -ms-flex-wrap: wrap;
+        -webkit-flex-wrap: wrap;
+        flex-wrap: wrap;
+      };
+
+      --layout-wrap-reverse: {
+        -ms-flex-wrap: wrap-reverse;
+        -webkit-flex-wrap: wrap-reverse;
+        flex-wrap: wrap-reverse;
+      };
+
+      --layout-flex-auto: {
+        -ms-flex: 1 1 auto;
+        -webkit-flex: 1 1 auto;
+        flex: 1 1 auto;
+      };
+
+      --layout-flex-none: {
+        -ms-flex: none;
+        -webkit-flex: none;
+        flex: none;
+      };
+
+      --layout-flex: {
+        -ms-flex: 1 1 0.000000001px;
+        -webkit-flex: 1;
+        flex: 1;
+        -webkit-flex-basis: 0.000000001px;
+        flex-basis: 0.000000001px;
+      };
+
+      --layout-flex-2: {
+        -ms-flex: 2;
+        -webkit-flex: 2;
+        flex: 2;
+      };
+
+      --layout-flex-3: {
+        -ms-flex: 3;
+        -webkit-flex: 3;
+        flex: 3;
+      };
+
+      --layout-flex-4: {
+        -ms-flex: 4;
+        -webkit-flex: 4;
+        flex: 4;
+      };
+
+      --layout-flex-5: {
+        -ms-flex: 5;
+        -webkit-flex: 5;
+        flex: 5;
+      };
+
+      --layout-flex-6: {
+        -ms-flex: 6;
+        -webkit-flex: 6;
+        flex: 6;
+      };
+
+      --layout-flex-7: {
+        -ms-flex: 7;
+        -webkit-flex: 7;
+        flex: 7;
+      };
+
+      --layout-flex-8: {
+        -ms-flex: 8;
+        -webkit-flex: 8;
+        flex: 8;
+      };
+
+      --layout-flex-9: {
+        -ms-flex: 9;
+        -webkit-flex: 9;
+        flex: 9;
+      };
+
+      --layout-flex-10: {
+        -ms-flex: 10;
+        -webkit-flex: 10;
+        flex: 10;
+      };
+
+      --layout-flex-11: {
+        -ms-flex: 11;
+        -webkit-flex: 11;
+        flex: 11;
+      };
+
+      --layout-flex-12: {
+        -ms-flex: 12;
+        -webkit-flex: 12;
+        flex: 12;
+      };
+
+      /* alignment in cross axis */
+
+      --layout-start: {
+        -ms-flex-align: start;
+        -webkit-align-items: flex-start;
+        align-items: flex-start;
+      };
+
+      --layout-center: {
+        -ms-flex-align: center;
+        -webkit-align-items: center;
+        align-items: center;
+      };
+
+      --layout-end: {
+        -ms-flex-align: end;
+        -webkit-align-items: flex-end;
+        align-items: flex-end;
+      };
+
+      --layout-baseline: {
+        -ms-flex-align: baseline;
+        -webkit-align-items: baseline;
+        align-items: baseline;
+      };
+
+      /* alignment in main axis */
+
+      --layout-start-justified: {
+        -ms-flex-pack: start;
+        -webkit-justify-content: flex-start;
+        justify-content: flex-start;
+      };
+
+      --layout-center-justified: {
+        -ms-flex-pack: center;
+        -webkit-justify-content: center;
+        justify-content: center;
+      };
+
+      --layout-end-justified: {
+        -ms-flex-pack: end;
+        -webkit-justify-content: flex-end;
+        justify-content: flex-end;
+      };
+
+      --layout-around-justified: {
+        -ms-flex-pack: distribute;
+        -webkit-justify-content: space-around;
+        justify-content: space-around;
+      };
+
+      --layout-justified: {
+        -ms-flex-pack: justify;
+        -webkit-justify-content: space-between;
+        justify-content: space-between;
+      };
+
+      --layout-center-center: {
+        @apply --layout-center;
+        @apply --layout-center-justified;
+      };
+
+      /* self alignment */
+
+      --layout-self-start: {
+        -ms-align-self: flex-start;
+        -webkit-align-self: flex-start;
+        align-self: flex-start;
+      };
+
+      --layout-self-center: {
+        -ms-align-self: center;
+        -webkit-align-self: center;
+        align-self: center;
+      };
+
+      --layout-self-end: {
+        -ms-align-self: flex-end;
+        -webkit-align-self: flex-end;
+        align-self: flex-end;
+      };
+
+      --layout-self-stretch: {
+        -ms-align-self: stretch;
+        -webkit-align-self: stretch;
+        align-self: stretch;
+      };
+
+      --layout-self-baseline: {
+        -ms-align-self: baseline;
+        -webkit-align-self: baseline;
+        align-self: baseline;
+      };
+
+      /* multi-line alignment in main axis */
+
+      --layout-start-aligned: {
+        -ms-flex-line-pack: start;  /* IE10 */
+        -ms-align-content: flex-start;
+        -webkit-align-content: flex-start;
+        align-content: flex-start;
+      };
+
+      --layout-end-aligned: {
+        -ms-flex-line-pack: end;  /* IE10 */
+        -ms-align-content: flex-end;
+        -webkit-align-content: flex-end;
+        align-content: flex-end;
+      };
+
+      --layout-center-aligned: {
+        -ms-flex-line-pack: center;  /* IE10 */
+        -ms-align-content: center;
+        -webkit-align-content: center;
+        align-content: center;
+      };
+
+      --layout-between-aligned: {
+        -ms-flex-line-pack: justify;  /* IE10 */
+        -ms-align-content: space-between;
+        -webkit-align-content: space-between;
+        align-content: space-between;
+      };
+
+      --layout-around-aligned: {
+        -ms-flex-line-pack: distribute;  /* IE10 */
+        -ms-align-content: space-around;
+        -webkit-align-content: space-around;
+        align-content: space-around;
+      };
+
+      /*******************************
+                Other Layout
+      *******************************/
+
+      --layout-block: {
+        display: block;
+      };
+
+      --layout-invisible: {
+        visibility: hidden !important;
+      };
+
+      --layout-relative: {
+        position: relative;
+      };
+
+      --layout-fit: {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      };
+
+      --layout-scroll: {
+        -webkit-overflow-scrolling: touch;
+        overflow: auto;
+      };
+
+      --layout-fullbleed: {
+        margin: 0;
+        height: 100vh;
+      };
+
+      /* fixed position */
+
+      --layout-fixed-top: {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+      };
+
+      --layout-fixed-right: {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+      };
+
+      --layout-fixed-bottom: {
+        position: fixed;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      };
+
+      --layout-fixed-left: {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+      };
+
+    }
+  </style>
+</custom-style>
\ No newline at end of file
diff --git a/test/index.html b/test/index.html
index 90e12a7..78d32da 100644
--- a/test/index.html
+++ b/test/index.html
@@ -21,9 +21,9 @@
   <body>
     <script>
       WCT.loadSuites([
-        'iron-flex-layout.html',
+        'iron-flex-layout.html?wc-shadydom=true&wc-ce=true',
         'iron-flex-layout.html?dom=shadow',
-        'iron-flex-layout-classes.html',
+        'iron-flex-layout-classes.html?wc-shadydom=true&wc-ce=true',
         'iron-flex-layout-classes.html?dom=shadow'
       ]);
     </script>
diff --git a/test/iron-flex-layout-classes.html b/test/iron-flex-layout-classes.html
index 3173b30..525718e 100644
--- a/test/iron-flex-layout-classes.html
+++ b/test/iron-flex-layout-classes.html
@@ -16,45 +16,47 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
 
-    <script src="../../webcomponentsjs/webcomponents.js"></script>
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
     <script src="../../web-component-tester/browser.js"></script>
     <link rel="import" href="../iron-flex-layout-classes.html">
 
-    <style is="custom-style" include="iron-flex iron-flex-reverse iron-flex-factors iron-flex-alignment iron-positioning">
-      body {
-        margin: 0;
-        padding: 0;
-      }
-      .container {
-        width: 300px;
-        min-height: 50px;
-        background-color: #ccc;
-      }
-      .container > div {
-        width: 50px;
-        min-height: 50px; /* so that it can grow in vertical layouts. */
-      }
-      /* IE11 does not calculate flex proportions correctly in a vertical
-       * layout if the children just have a min-height. For those tests,
-       * use a fixed height instead. */
-      .container > div.fixed-height {
-        min-height: 0;
-        height: 50px;
-      }
-      .container.relative > div {
-        min-width: 50px;
-        min-height: 50px;
-        width: inherit;
-      }
-      .container.small { width: 120px; }
-      .container.tall { height: 300px; }
-
-      #c1 { background-color: #E91E63; }
-      #c2 { background-color: #03A9F4; }
-      #c3 { background-color: #CDDC39; }
-      #c4 { background-color: #03A9F4; }
-      #c5 { background-color: #E91E63; }
-    </style>
+    <custom-style>
+      <style is="custom-style" include="iron-flex iron-flex-reverse iron-flex-factors iron-flex-alignment iron-positioning">
+        body {
+          margin: 0;
+          padding: 0;
+        }
+        .container {
+          width: 300px;
+          min-height: 50px;
+          background-color: #ccc;
+        }
+        .container > div {
+          width: 50px;
+          min-height: 50px; /* so that it can grow in vertical layouts. */
+        }
+        /* IE11 does not calculate flex proportions correctly in a vertical
+         * layout if the children just have a min-height. For those tests,
+         * use a fixed height instead. */
+        .container > div.fixed-height {
+          min-height: 0;
+          height: 50px;
+        }
+        .container.relative > div {
+          min-width: 50px;
+          min-height: 50px;
+          width: inherit;
+        }
+        .container.small { width: 120px; }
+        .container.tall { height: 300px; }
+
+        #c1 { background-color: #E91E63; }
+        #c2 { background-color: #03A9F4; }
+        #c3 { background-color: #CDDC39; }
+        #c4 { background-color: #03A9F4; }
+        #c5 { background-color: #E91E63; }
+      </style>
+    </custom-style>
   </head>
   <body>
     <test-fixture id="basic">
@@ -107,10 +109,18 @@
     <script>
       function positionEquals(node, top, bottom, left, right) {
         var rect = node.getBoundingClientRect();
-        return rect.top === top && rect.bottom === bottom && 
+        return rect.top === top && rect.bottom === bottom &&
                rect.left === left && rect.right === right;
       }
       suite('basic layout', function() {
+        suiteSetup(function() {
+          // In Polymer 2.0, custom-style is lazy, and won't boot until a
+          // Polymer element is used (and these tests don't have a Polymer element).
+          if (Polymer.Element) {
+            window.ShadyCSS.styleDocument();
+          }
+        });
+        
         var container;
 
         setup(function() {
diff --git a/test/iron-flex-layout.html b/test/iron-flex-layout.html
index f209087..f297730 100644
--- a/test/iron-flex-layout.html
+++ b/test/iron-flex-layout.html
@@ -16,71 +16,72 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
 
-    <script src="../../webcomponentsjs/webcomponents.js"></script>
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
     <script src="../../web-component-tester/browser.js"></script>
     <link rel="import" href="../iron-flex-layout.html">
 
-    <style is="custom-style">
-      body {
-        margin: 0;
-        padding: 0;
-      }
-      .container {
-        width: 300px;
-        min-height: 50px;
-        background-color: #ccc;
-      }
-      .container > div {
-        width: 50px;
-        min-height: 50px; /* so that it can grow in vertical layouts. */
-      }
-      /* IE11 does not calculate flex proportions correctly in a vertical
-       * layout if the children just have a min-height. For those tests,
-       * use a fixed height instead. */
-      .container > div.fixed-height {
-        min-height: 0;
-        height: 50px;
-      }
-      .relative { @apply(--layout-relative); }
-      .container.relative > div {
-        min-width: 50px;
-        min-height: 50px;
-        width: inherit;
-      }
-      .container.small { width: 120px; }
-      .container.tall { height: 300px; }
-
-      #c1 { background-color: #E91E63; }
-      #c2 { background-color: #03A9F4; }
-      #c3 { background-color: #CDDC39; }
-      #c4 { background-color: #03A9F4; }
-      #c5 { background-color: #E91E63; }
-
-      .horizontal { @apply(--layout-horizontal); }
-      .horizontal-reverse { @apply(--layout-horizontal-reverse); }
-      .vertical { @apply(--layout-vertical); }
-      .vertical-reverse { @apply(--layout-vertical-reverse); }
-      .wrap { @apply(--layout-wrap); }
-      .wrap-reverse { @apply(--layout-wrap-reverse); }
-      .flex { @apply(--layout-flex); }
-      .flex2 { @apply(--layout-flex-2); }
-      .flex3 { @apply(--layout-flex-3); }
-      .center { @apply(--layout-center); }
-      .start { @apply(--layout-start); }
-      .end { @apply(--layout-end); }
-      .start-justified { @apply(--layout-start-justified); }
-      .center-justified { @apply(--layout-center-justified); }
-      .end-justified { @apply(--layout-end-justified); }
-      .justified { @apply(--layout-justified); }
-      .around-justified { @apply(--layout-around-justified); }
-      .fit { @apply(--layout-fit); }
-      .start-aligned { @apply(--layout-start-aligned); }
-      .end-aligned { @apply(--layout-end-aligned); }
-      .center-aligned { @apply(--layout-center-aligned); }
-      .between-aligned { @apply(--layout-between-aligned); }
-      .around-aligned { @apply(--layout-around-aligned); }
-
-    </style>
+    <custom-style>
+      <style is="custom-style">
+        body {
+          margin: 0;
+          padding: 0;
+        }
+        .container {
+          width: 300px;
+          min-height: 50px;
+          background-color: #ccc;
+        }
+        .container > div {
+          width: 50px;
+          min-height: 50px; /* so that it can grow in vertical layouts. */
+        }
+        /* IE11 does not calculate flex proportions correctly in a vertical
+         * layout if the children just have a min-height. For those tests,
+         * use a fixed height instead. */
+        .container > div.fixed-height {
+          min-height: 0;
+          height: 50px;
+        }
+        .relative { @apply --layout-relative; }
+        .container.relative > div {
+          min-width: 50px;
+          min-height: 50px;
+          width: inherit;
+        }
+        .container.small { width: 120px; }
+        .container.tall { height: 300px; }
+
+        #c1 { background-color: #E91E63; }
+        #c2 { background-color: #03A9F4; }
+        #c3 { background-color: #CDDC39; }
+        #c4 { background-color: #03A9F4; }
+        #c5 { background-color: #E91E63; }
+
+        .horizontal { @apply --layout-horizontal; }
+        .horizontal-reverse { @apply --layout-horizontal-reverse; }
+        .vertical { @apply --layout-vertical; }
+        .vertical-reverse { @apply --layout-vertical-reverse; }
+        .wrap { @apply --layout-wrap; }
+        .wrap-reverse { @apply --layout-wrap-reverse; }
+        .flex { @apply --layout-flex; }
+        .flex2 { @apply --layout-flex-2; }
+        .flex3 { @apply --layout-flex-3; }
+        .center { @apply --layout-center; }
+        .start { @apply --layout-start; }
+        .end { @apply --layout-end; }
+        .start-justified { @apply --layout-start-justified; }
+        .center-justified { @apply --layout-center-justified; }
+        .end-justified { @apply --layout-end-justified; }
+        .justified { @apply --layout-justified; }
+        .around-justified { @apply --layout-around-justified; }
+        .fit { @apply --layout-fit; }
+        .start-aligned { @apply --layout-start-aligned; }
+        .end-aligned { @apply --layout-end-aligned; }
+        .center-aligned { @apply --layout-center-aligned; }
+        .between-aligned { @apply --layout-between-aligned; }
+        .around-aligned { @apply --layout-around-aligned; }
+      </style>
+    </custom-style>
   </head>
   <body>
     <test-fixture id="basic">
@@ -133,10 +134,19 @@
     <script>
       function positionEquals(node, top, bottom, left, right) {
         var rect = node.getBoundingClientRect();
-        return rect.top === top && rect.bottom === bottom && 
+        return rect.top === top && rect.bottom === bottom &&
                rect.left === left && rect.right === right;
       }
+
       suite('basic layout', function() {
+        suiteSetup(function() {
+          // In Polymer 2.0, custom-style is lazy, and won't boot until a
+          // Polymer element is used (and these tests don't have a Polymer element).
+          if (Polymer.Element) {
+            window.ShadyCSS.styleDocument();
+          }
+        });
+
         var container;
 
         setup(function() {