diff --git a/bower.json b/bower.json
index 43891a29..09019ec6 100644
--- a/bower.json
+++ b/bower.json
@@ -19,7 +19,9 @@
     "iron-pages": "polymerelements/iron-pages#^1.0.0",
     "iron-selector": "polymerelements/iron-selector#^1.0.0",
     "paper-icon-button": "polymerelements/paper-icon-button#^1.0.0",
-    "paper-spinner": "polymerelements/paper-spinner#^1.0.0"
+    "paper-spinner": "polymerelements/paper-spinner#^1.0.0",
+    "blockingElements": "PolymerLabs/blockingElements#issue-2",
+    "inert": "WICG/inert"
   },
   "devDependencies": {
     "web-component-tester": "^4.0.0"
diff --git a/index.html b/index.html
index aa9dd5ea..eb261ff3 100644
--- a/index.html
+++ b/index.html
@@ -73,5 +73,8 @@
     })();
   </script>
 
+  <script src="/bower_components/blockingElements/blocking-elements.js"></script>
+  <script src="/bower_components/inert/inert.js"></script>
+
 </body>
 </html>
diff --git a/src/shop-app.html b/src/shop-app.html
index 606d0354..a6f7c966 100644
--- a/src/shop-app.html
+++ b/src/shop-app.html
@@ -291,7 +291,7 @@
     <!-- Lazy-create the drawer for small screen sizes. -->
     <template is="dom-if" if="[[_shouldRenderDrawer]]">
       <!-- Two-way bind `drawerOpened` since app-drawer can update `opened` itself. -->
-      <app-drawer opened="{{drawerOpened}}" swipe-open tabindex="0">
+      <app-drawer opened="{{drawerOpened}}" swipe-open no-focus-trap on-opened-changed="_updateBlockingElements">
         <iron-selector role="navigation" class="drawer-list" selected="[[categoryName]]" attr-for-selected="name">
           <template is="dom-repeat" items="[[categories]]" as="category" initial-count="4">
             <a name="[[category.name]]" href="/list/[[category.name]]">[[category.title]]</a>
@@ -472,6 +472,7 @@
       _onAddCartItem: function(event) {
         if (!this._cartModal) {
           this._cartModal = document.createElement('shop-cart-modal');
+          this._cartModal.addEventListener('opened-changed', this._updateBlockingElements.bind(this));
           Polymer.dom(this.root).appendChild(this._cartModal);
         }
         this.$.cart.addItem(event.detail);
@@ -532,6 +533,16 @@
 
       _computePluralizedQuantity: function(quantity) {
         return quantity + ' ' + (quantity === 1 ? 'item' : 'items');
+      },
+
+      _updateBlockingElements: function(event) {
+        var opened = event.detail.value;
+        var element = event.target;
+        if (opened) {
+          document.$blockingElements.push(element);
+        } else {
+          document.$blockingElements.remove(element);
+        }
       }
 
     });
diff --git a/src/shop-cart-modal.html b/src/shop-cart-modal.html
index fd41be02..435b2e65 100644
--- a/src/shop-cart-modal.html
+++ b/src/shop-cart-modal.html
@@ -114,13 +114,6 @@
         Polymer.IronOverlayBehaviorImpl
       ],
 
-      properties: {
-        withBackdrop: {
-          type: Boolean,
-          value: true
-        }
-      },
-
       hostAttributes: {
         role: 'dialog',
         'aria-modal': 'true'
@@ -133,7 +126,6 @@
 
       _renderOpened: function() {
         this.restoreFocusOnClose = true;
-        this.backdropElement.style.display = 'none';
         this.classList.add('opened');
       },
 
@@ -157,7 +149,6 @@
           this.fire('announce', 'Item added to the cart');
         } else {
           this._finishRenderClosed();
-          this.backdropElement.style.display = '';
         }
       },