diff --git a/iron-focusables-helper.html b/iron-focusables-helper.html
new file mode 100644
index 0000000..9aefdca
--- /dev/null
+++ b/iron-focusables-helper.html
@@ -0,0 +1,220 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2016 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="../polymer/polymer.html">
+
+<script>
+  (function() {
+    'use strict';
+
+    var p = Element.prototype;
+    var matches = p.matches || p.matchesSelector || p.mozMatchesSelector ||
+      p.msMatchesSelector || p.oMatchesSelector || p.webkitMatchesSelector;
+
+    Polymer.IronFocusablesHelper = {
+
+      /**
+       * Returns a sorted array of tabbable nodes, including the root node.
+       * It searches the tabbable nodes in the light and shadow dom of the chidren,
+       * sorting the result by tabindex.
+       * @param {!Node} node
+       * @return {Array<HTMLElement>}
+       */
+      getTabbableNodes: function(node) {
+        var result = [];
+        // If there is at least one element with tabindex > 0, we need to sort
+        // the final array by tabindex.
+        var needsSortByTabIndex = this._collectTabbableNodes(node, result);
+        if (needsSortByTabIndex) {
+          return this._sortByTabIndex(result);
+        }
+        return result;
+      },
+
+      /**
+       * Returns if a element is focusable.
+       * @param {!HTMLElement} element
+       * @return {boolean}
+       */
+      isFocusable: function(element) {
+        // From http://stackoverflow.com/a/1600194/4228703:
+        // There isn't a definite list, it's up to the browser. The only
+        // standard we have is DOM Level 2 HTML https://www.w3.org/TR/DOM-Level-2-HTML/html.html,
+        // according to which the only elements that have a focus() method are
+        // HTMLInputElement,  HTMLSelectElement, HTMLTextAreaElement and
+        // HTMLAnchorElement. This notably omits HTMLButtonElement and
+        // HTMLAreaElement.
+        // Referring to these tests with tabbables in different browsers
+        // http://allyjs.io/data-tables/focusable.html
+
+        // Elements that cannot be focused if they have [disabled] attribute.
+        if (matches.call(element, 'input, select, textarea, button, object')) {
+          return matches.call(element, ':not([disabled])');
+        }
+        // Elements that can be focused even if they have [disabled] attribute.
+        return matches.call(element,
+          'a[href], area[href], iframe, [tabindex], [contentEditable]');
+      },
+
+      /**
+       * Returns if a element is tabbable. To be tabbable, a element must be
+       * focusable, visible, and with a tabindex !== -1.
+       * @param {!HTMLElement} element
+       * @return {boolean}
+       */
+      isTabbable: function(element) {
+        return this.isFocusable(element) &&
+          matches.call(element, ':not([tabindex="-1"])') &&
+          this._isVisible(element);
+      },
+
+      /**
+       * Returns the normalized element tabindex. If not focusable, returns -1.
+       * It checks for the attribute "tabindex" instead of the element property
+       * `tabIndex` since browsers assign different values to it.
+       * e.g. in Firefox `<div contenteditable>` has `tabIndex = -1`
+       * @param {!HTMLElement} element
+       * @return {Number}
+       * @private
+       */
+      _normalizedTabIndex: function(element) {
+        if (this.isFocusable(element)) {
+          var tabIndex = element.getAttribute('tabindex') || 0;
+          return Number(tabIndex);
+        }
+        return -1;
+      },
+
+      /**
+       * Searches for nodes that are tabbable and adds them to the `result` array.
+       * Returns if the `result` array needs to be sorted by tabindex.
+       * @param {!Node} node The starting point for the search; added to `result`
+       * if tabbable.
+       * @param {!Array<HTMLElement>} result
+       * @return {boolean}
+       * @private
+       */
+      _collectTabbableNodes: function(node, result) {
+        // If not an element or not visible, no need to explore children.
+        if (node.nodeType !== Node.ELEMENT_NODE || !this._isVisible(node)) {
+          return false;
+        }
+        var element = /** @type {HTMLElement} */ (node);
+        var tabIndex = this._normalizedTabIndex(element);
+        var needsSortByTabIndex = tabIndex > 0;
+        if (tabIndex >= 0) {
+          result.push(element);
+        }
+
+        // In ShadowDOM v1, tab order is affected by the order of distrubution.
+        // E.g. getTabbableNodes(#root) in ShadowDOM v1 should return [#A, #B];
+        // in ShadowDOM v0 tab order is not affected by the distrubution order,
+        // in fact getTabbableNodes(#root) returns [#B, #A].
+        //  <div id="root">
+        //   <!-- shadow -->
+        //     <slot name="a">
+        //     <slot name="b">
+        //   <!-- /shadow -->
+        //   <input id="A" slot="a">
+        //   <input id="B" slot="b" tabindex="1">
+        //  </div>
+        // TODO(valdrin) support ShadowDOM v1 when upgrading to Polymer v2.0.
+        var children;
+        if (element.localName === 'content') {
+          children = Polymer.dom(element).getDistributedNodes();
+        } else {
+          // Use shadow root if possible, will check for distributed nodes.
+          children = Polymer.dom(element.root || element).children;
+        }
+        for (var i = 0; i < children.length; i++) {
+          // Ensure method is always invoked to collect tabbable children.
+          var needsSort = this._collectTabbableNodes(children[i], result);
+          needsSortByTabIndex = needsSortByTabIndex || needsSort;
+        }
+        return needsSortByTabIndex;
+      },
+
+      /**
+       * Returns false if the element has `visibility: hidden` or `display: none`
+       * @param {!HTMLElement} element
+       * @return {boolean}
+       * @private
+       */
+      _isVisible: function(element) {
+        // Check inline style first to save a re-flow. If looks good, check also
+        // computed style.
+        var style = element.style;
+        if (style.visibility !== 'hidden' && style.display !== 'none') {
+          style = window.getComputedStyle(element);
+          return (style.visibility !== 'hidden' && style.display !== 'none');
+        }
+        return false;
+      },
+
+      /**
+       * Sorts an array of tabbable elements by tabindex. Returns a new array.
+       * @param {!Array<HTMLElement>} tabbables
+       * @return {Array<HTMLElement>}
+       * @private
+       */
+      _sortByTabIndex: function(tabbables) {
+        // Implement a merge sort as Array.prototype.sort does a non-stable sort
+        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
+        var len = tabbables.length;
+        if (len < 2) {
+          return tabbables;
+        }
+        var pivot = Math.ceil(len / 2);
+        var left = this._sortByTabIndex(tabbables.slice(0, pivot));
+        var right = this._sortByTabIndex(tabbables.slice(pivot));
+        return this._mergeSortByTabIndex(left, right);
+      },
+
+      /**
+       * Merge sort iterator, merges the two arrays into one, sorted by tab index.
+       * @param {!Array<HTMLElement>} left
+       * @param {!Array<HTMLElement>} right
+       * @return {Array<HTMLElement>}
+       * @private
+       */
+      _mergeSortByTabIndex: function(left, right) {
+        var result = [];
+        while ((left.length > 0) && (right.length > 0)) {
+          if (this._hasLowerTabOrder(left[0], right[0])) {
+            result.push(right.shift());
+          } else {
+            result.push(left.shift());
+          }
+        }
+
+        return result.concat(left, right);
+      },
+
+      /**
+       * Returns if element `a` has lower tab order compared to element `b`
+       * (both elements are assumed to be focusable and tabbable).
+       * Elements with tabindex = 0 have lower tab order compared to elements
+       * with tabindex > 0.
+       * If both have same tabindex, it returns false.
+       * @param {!HTMLElement} a
+       * @param {!HTMLElement} b
+       * @return {boolean}
+       * @private
+       */
+      _hasLowerTabOrder: function(a, b) {
+        // Normalize tabIndexes
+        // e.g. in Firefox `<div contenteditable>` has `tabIndex = -1`
+        var ati = Math.max(a.tabIndex, 0);
+        var bti = Math.max(b.tabIndex, 0);
+        return (ati === 0 || bti === 0) ? bti > ati : ati > bti;
+      }
+    };
+  })();
+</script>
diff --git a/iron-overlay-behavior.html b/iron-overlay-behavior.html
index 7c92333..af3be8e 100644
--- a/iron-overlay-behavior.html
+++ b/iron-overlay-behavior.html
@@ -12,6 +12,7 @@
 <link rel="import" href="../iron-fit-behavior/iron-fit-behavior.html">
 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
 <link rel="import" href="iron-overlay-manager.html">
+<link rel="import" href="iron-focusables-helper.html">
 
 <script>
 (function() {
@@ -195,45 +196,7 @@
      * @protected
      */
     get _focusableNodes() {
-      // Elements that can be focused even if they have [disabled] attribute.
-      var FOCUSABLE_WITH_DISABLED = [
-        'a[href]',
-        'area[href]',
-        'iframe',
-        '[tabindex]',
-        '[contentEditable=true]'
-      ];
-
-      // Elements that cannot be focused if they have [disabled] attribute.
-      var FOCUSABLE_WITHOUT_DISABLED = [
-        'input',
-        'select',
-        'textarea',
-        'button'
-      ];
-
-      // Discard elements with tabindex=-1 (makes them not focusable).
-      var selector = FOCUSABLE_WITH_DISABLED.join(':not([tabindex="-1"]),') +
-        ':not([tabindex="-1"]),' +
-        FOCUSABLE_WITHOUT_DISABLED.join(':not([disabled]):not([tabindex="-1"]),') +
-        ':not([disabled]):not([tabindex="-1"])';
-
-      var focusables = Polymer.dom(this).querySelectorAll(selector);
-      if (this.tabIndex >= 0) {
-        // Insert at the beginning because we might have all elements with tabIndex = 0,
-        // and the overlay should be the first of the list.
-        focusables.splice(0, 0, this);
-      }
-      // Sort by tabindex.
-      return focusables.sort(function (a, b) {
-        if (a.tabIndex === b.tabIndex) {
-          return 0;
-        }
-        if (a.tabIndex === 0 || a.tabIndex > b.tabIndex) {
-          return 1;
-        }
-        return -1;
-      });
+      return Polymer.IronFocusablesHelper.getTabbableNodes(this);
     },
 
     ready: function() {
diff --git a/test/index.html b/test/index.html
index 48b7a92..2dac121 100644
--- a/test/index.html
+++ b/test/index.html
@@ -23,6 +23,8 @@
       WCT.loadSuites([
         'iron-overlay-behavior.html',
         'iron-overlay-behavior.html?dom=shadow',
+        'iron-focusables-helper.html',
+        'iron-focusables-helper.html?dom=shadow',
         'iron-overlay-backdrop.html',
         'iron-overlay-backdrop.html?dom=shadow',
       ]);
diff --git a/test/iron-focusables-helper.html b/test/iron-focusables-helper.html
new file mode 100644
index 0000000..a400b4c
--- /dev/null
+++ b/test/iron-focusables-helper.html
@@ -0,0 +1,182 @@
+<!doctype html>
+<!--
+@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
+-->
+<html>
+
+<head>
+
+  <title>iron-focusables-helper tests</title>
+
+  <meta charset="utf-8">
+  <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-lite.js"></script>
+
+  <script src="../../web-component-tester/browser.js"></script>
+  <link rel="import" href="../../iron-test-helpers/iron-test-helpers.html">
+  <link rel="import" href="../iron-focusables-helper.html">
+  <link rel="import" href="test-buttons.html">
+  <link rel="import" href="test-buttons-wrapper.html">
+
+  <style is="custom-style">
+    .hidden {
+      visibility: hidden;
+    }
+
+    .no-display {
+      display: none;
+    }
+  </style>
+</head>
+
+<body>
+
+  <test-fixture id="basic">
+    <template>
+      <div>
+        <h2>Focusables (no tabindex)</h2>
+        <div>
+          <input class="focusable1" placeholder="1 (nested)">
+        </div>
+        <a href="#" class="focusable2">2</a>
+        <button disabled> disabled button</button>
+        <input disabled tabindex="0" value="disabled input with tabindex">
+        <div tabindex="-1">not focusable</div>
+        <div contenteditable class="focusable3">3</div>
+      </div>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="tabindex">
+    <template>
+      <div>
+        <h2>Focusables (with tabindex)</h2>
+        <div tabindex="0" class="focusable7">7</div>
+        <div tabindex="0" class="focusable8">8</div>
+        <div tabindex="0" class="focusable9">9</div>
+        <div tabindex="0" class="focusable10">10</div>
+        <div tabindex="0" class="focusable11">11</div>
+        <div tabindex="0" class="focusable12">12</div>
+        <div tabindex="-1">not focusable</div>
+        <div tabindex="3" class="focusable3">3</div>
+        <div tabindex="4" class="focusable4">4</div>
+        <div tabindex="5" class="focusable5">5</div>
+        <div>
+          <div tabindex="1" class="focusable1">1 (nested)</div>
+          <div tabindex="6" class="focusable6">6 (nested)</div>
+        </div>
+        <div tabindex="2" class="focusable2">2</div>
+      </div>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="shadow">
+    <template>
+      <test-buttons>
+        <h2>focusables in ShadowDOM</h2>
+        <input placeholder="type something..">
+      </test-buttons>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="composed">
+    <template>
+      <test-buttons-wrapper>
+        <input placeholder="type something..">
+      </test-buttons-wrapper>
+    </template>
+  </test-fixture>
+
+  <script>
+    suite('getTabbableNodes', function() {
+
+      test('returns tabbable nodes', function() {
+        var node = fixture('basic');
+        var focusableNodes = Polymer.IronFocusablesHelper.getTabbableNodes(node);
+        assert.equal(focusableNodes.length, 3, '3 nodes are focusable');
+        assert.equal(focusableNodes[0], Polymer.dom(node).querySelector('.focusable1'));
+        assert.equal(focusableNodes[1], Polymer.dom(node).querySelector('.focusable2'));
+        assert.equal(focusableNodes[2], Polymer.dom(node).querySelector('.focusable3'));
+      });
+
+      test('includes the root if it has a valid tabindex', function() {
+        var node = fixture('basic');
+        node.setAttribute('tabindex', '0');
+        var focusableNodes = Polymer.IronFocusablesHelper.getTabbableNodes(node);
+        assert.equal(focusableNodes.length, 4, '4 focusable nodes');
+        assert.notEqual(focusableNodes.indexOf(node), -1, 'root is included');
+      });
+
+      test('excludes visibility: hidden elements', function() {
+        var node = fixture('basic');
+        var focusable = Polymer.dom(node).querySelector('.focusable1');
+        focusable.classList.add('hidden');
+        var focusableNodes = Polymer.IronFocusablesHelper.getTabbableNodes(node);
+        assert.equal(focusableNodes.length, 2, '2 focusable nodes');
+        assert.equal(focusableNodes.indexOf(focusable), -1, 'hidden element is not included');
+      });
+
+      test('excludes display: none elements', function() {
+        var node = fixture('basic');
+        var focusable = Polymer.dom(node).querySelector('.focusable1');
+        focusable.classList.add('no-display');
+        var focusableNodes = Polymer.IronFocusablesHelper.getTabbableNodes(node);
+        assert.equal(focusableNodes.length, 2, '2 focusable nodes');
+        assert.equal(focusableNodes.indexOf(focusable), -1, 'hidden element is not included');
+      });
+
+      test('respects the tabindex order', function() {
+        var node = fixture('tabindex');
+        var focusableNodes = Polymer.IronFocusablesHelper.getTabbableNodes(node);
+        assert.equal(focusableNodes.length, 12, '12 nodes are focusable');
+        for (var i = 0; i < 12; i++) {
+          assert.equal(focusableNodes[i], Polymer.dom(node).querySelector('.focusable' + (i + 1)));
+        }
+      });
+
+      test('includes tabbable elements in the shadow dom', function() {
+        var node = fixture('shadow');
+        var focusableNodes = Polymer.IronFocusablesHelper.getTabbableNodes(node);
+        assert.equal(focusableNodes.length, 4, '4 nodes are focusable');
+        assert.equal(focusableNodes[0], node.$.button0);
+        assert.equal(focusableNodes[1], node.$.button1);
+        assert.equal(focusableNodes[2], Polymer.dom(node).querySelector('input'));
+        assert.equal(focusableNodes[3], node.$.button2);
+      });
+
+      test('handles composition', function() {
+        var node = fixture('composed');
+        var focusableNodes = Polymer.IronFocusablesHelper.getTabbableNodes(node);
+        assert.equal(focusableNodes.length, 6, '6 nodes are focusable');
+        assert.equal(focusableNodes[0], node.$.select);
+        assert.equal(focusableNodes[1], node.$.wrapped.$.button0);
+        assert.equal(focusableNodes[2], node.$.wrapped.$.button1);
+        assert.equal(focusableNodes[3], Polymer.dom(node).querySelector('input'));
+        assert.equal(focusableNodes[4], node.$.wrapped.$.button2);
+        assert.equal(focusableNodes[5], node.$.focusableDiv);
+      });
+
+      test('handles distributed nodes', function() {
+        var node = fixture('composed');
+        var wrapped = node.$.wrapped;
+        var focusableNodes = Polymer.IronFocusablesHelper.getTabbableNodes(wrapped);
+        assert.equal(focusableNodes.length, 4, '4 nodes are focusable');
+        assert.equal(focusableNodes[0], wrapped.$.button0);
+        assert.equal(focusableNodes[1], wrapped.$.button1);
+        assert.equal(focusableNodes[2], Polymer.dom(node).querySelector('input'));
+        assert.equal(focusableNodes[3], wrapped.$.button2);
+      });
+    });
+  </script>
+
+</body>
+
+</html>
diff --git a/test/iron-overlay-behavior.html b/test/iron-overlay-behavior.html
index 1274f7c..b080482 100644
--- a/test/iron-overlay-behavior.html
+++ b/test/iron-overlay-behavior.html
@@ -561,44 +561,56 @@ <h2>Focusables (with tabindex)</h2>
           overlayFocusableNodes = f[2];
         });
 
-        test('_focusableNodes returns nodes that are focusable', function() {
-          var focusableNodes = overlay._focusableNodes;
-          assert.equal(focusableNodes.length, 3, '3 nodes are focusable');
-          assert.equal(focusableNodes[0], Polymer.dom(overlay).querySelector('.focusable1'));
-          assert.equal(focusableNodes[1], Polymer.dom(overlay).querySelector('.focusable2'));
-          assert.equal(focusableNodes[2], Polymer.dom(overlay).querySelector('.focusable3'));
+        test('_focusableNodes returns nodes that are focusable', function(done) {
+          runAfterOpen(overlay, function() {
+            var focusableNodes = overlay._focusableNodes;
+            assert.equal(focusableNodes.length, 3, '3 nodes are focusable');
+            assert.equal(focusableNodes[0], Polymer.dom(overlay).querySelector('.focusable1'));
+            assert.equal(focusableNodes[1], Polymer.dom(overlay).querySelector('.focusable2'));
+            assert.equal(focusableNodes[2], Polymer.dom(overlay).querySelector('.focusable3'));
+            done();
+          });
         });
 
-        test('_focusableNodes includes overlay if it has a valid tabindex', function() {
-          overlay.setAttribute('tabindex', '0');
-          var focusableNodes = overlay._focusableNodes;
-          assert.equal(focusableNodes.length, 4, '4 focusable nodes');
-          assert.notEqual(focusableNodes.indexOf(overlay), -1, 'overlay is included');
+        test('_focusableNodes includes overlay if it has a valid tabindex', function(done) {
+          runAfterOpen(overlay, function() {
+            overlay.setAttribute('tabindex', '0');
+            var focusableNodes = overlay._focusableNodes;
+            assert.equal(focusableNodes.length, 4, '4 focusable nodes');
+            assert.notEqual(focusableNodes.indexOf(overlay), -1, 'overlay is included');
+            done();
+          });
         });
 
-        test('_focusableNodes respects the tabindex order', function() {
-          var focusableNodes = overlayWithTabIndex._focusableNodes;
-          assert.equal(focusableNodes.length, 6, '6 nodes are focusable');
-          assert.equal(focusableNodes[0], Polymer.dom(overlayWithTabIndex).querySelector('.focusable1'));
-          assert.equal(focusableNodes[1], Polymer.dom(overlayWithTabIndex).querySelector('.focusable2'));
-          assert.equal(focusableNodes[2], Polymer.dom(overlayWithTabIndex).querySelector('.focusable3'));
-          assert.equal(focusableNodes[3], Polymer.dom(overlayWithTabIndex).querySelector('.focusable4'));
-          assert.equal(focusableNodes[4], Polymer.dom(overlayWithTabIndex).querySelector('.focusable5'));
-          assert.equal(focusableNodes[5], Polymer.dom(overlayWithTabIndex).querySelector('.focusable6'));
+        test('_focusableNodes respects the tabindex order', function(done) {
+          runAfterOpen(overlayWithTabIndex, function() {
+            var focusableNodes = overlayWithTabIndex._focusableNodes;
+            assert.equal(focusableNodes.length, 6, '6 nodes are focusable');
+            assert.equal(focusableNodes[0], Polymer.dom(overlayWithTabIndex).querySelector('.focusable1'));
+            assert.equal(focusableNodes[1], Polymer.dom(overlayWithTabIndex).querySelector('.focusable2'));
+            assert.equal(focusableNodes[2], Polymer.dom(overlayWithTabIndex).querySelector('.focusable3'));
+            assert.equal(focusableNodes[3], Polymer.dom(overlayWithTabIndex).querySelector('.focusable4'));
+            assert.equal(focusableNodes[4], Polymer.dom(overlayWithTabIndex).querySelector('.focusable5'));
+            assert.equal(focusableNodes[5], Polymer.dom(overlayWithTabIndex).querySelector('.focusable6'));
+            done();
+          });
         });
 
-        test('_focusableNodes can be overridden', function() {
-          // It has 1 focusable in the light dom, and 2 in the shadow dom.
-          var focusableNodes = overlayFocusableNodes._focusableNodes;
-          assert.equal(focusableNodes.length, 2, 'length ok');
-          assert.equal(focusableNodes[0], overlayFocusableNodes.$.first, 'first ok');
-          assert.equal(focusableNodes[1], overlayFocusableNodes.$.last, 'last ok');
+        test('_focusableNodes can be overridden', function(done) {
+          runAfterOpen(overlayFocusableNodes, function() {
+            // It has 1 focusable in the light dom, and 2 in the shadow dom.
+            var focusableNodes = overlayFocusableNodes._focusableNodes;
+            assert.equal(focusableNodes.length, 2, 'length ok');
+            assert.equal(focusableNodes[0], overlayFocusableNodes.$.first, 'first ok');
+            assert.equal(focusableNodes[1], overlayFocusableNodes.$.last, 'last ok');
+            done();
+          });
         });
 
         test('with-backdrop: TAB & Shift+TAB wrap focus', function(done) {
           overlay.withBackdrop = true;
-          var focusableNodes = overlay._focusableNodes;
           runAfterOpen(overlay, function() {
+            var focusableNodes = overlay._focusableNodes;
             // 1ms timeout needed by IE10 to have proper focus switching.
             Polymer.Base.async(function() {
               // Go to last element.
@@ -625,8 +637,8 @@ <h2>Focusables (with tabindex)</h2>
 
         test('with-backdrop: TAB & Shift+TAB wrap focus respecting tabindex', function(done) {
           overlayWithTabIndex.withBackdrop = true;
-          var focusableNodes = overlayWithTabIndex._focusableNodes;
           runAfterOpen(overlayWithTabIndex, function() {
+            var focusableNodes = overlayWithTabIndex._focusableNodes;
             // 1ms timeout needed by IE10 to have proper focus switching.
             Polymer.Base.async(function() {
               // Go to last element.
@@ -644,8 +656,8 @@ <h2>Focusables (with tabindex)</h2>
 
         test('with-backdrop: Shift+TAB after open wrap focus', function(done) {
           overlay.withBackdrop = true;
-          var focusableNodes = overlay._focusableNodes;
           runAfterOpen(overlay, function() {
+            var focusableNodes = overlay._focusableNodes;
             // 1ms timeout needed by IE10 to have proper focus switching.
             Polymer.Base.async(function() {
               // Spy keydown.
@@ -665,8 +677,8 @@ <h2>Focusables (with tabindex)</h2>
 
         test('with-backdrop: after open, update last focusable node and then Shift+TAB', function(done) {
           overlay.withBackdrop = true;
-          var focusableNodes = overlay._focusableNodes;
           runAfterOpen(overlay, function() {
+            var focusableNodes = overlay._focusableNodes;
             // 1ms timeout needed by IE10 to have proper focus switching.
             Polymer.Base.async(function() {
               // Before tabbing, make lastFocusable non-tabbable. This will make
diff --git a/test/test-buttons-wrapper.html b/test/test-buttons-wrapper.html
new file mode 100644
index 0000000..4e669ab
--- /dev/null
+++ b/test/test-buttons-wrapper.html
@@ -0,0 +1,39 @@
+<!--
+@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="../../polymer/polymer.html">
+<link rel="import" href="test-buttons.html">
+
+<dom-module id="test-buttons-wrapper">
+
+  <style>
+    :host {
+      display: block;
+      border: 1px solid gray;
+      padding: 10px;
+    }
+  </style>
+
+  <template>
+    <select id="select">
+      <option>1</option>
+    </select>
+    <test-buttons id="wrapped">
+      <content></content>
+    </test-buttons>
+    <div tabindex="0" id="focusableDiv">Focusable div</div>
+  </template>
+
+  <script>
+    Polymer({
+      is: 'test-buttons-wrapper'
+    });
+  </script>
+</dom-module>
diff --git a/test/test-buttons.html b/test/test-buttons.html
index 9ed1fbe..05434a0 100644
--- a/test/test-buttons.html
+++ b/test/test-buttons.html
@@ -14,6 +14,7 @@
   <template>
     <style>
       :host {
+        display: block;
         border: 1px solid black;
         padding: 10px;
       }
@@ -21,17 +22,13 @@
 
     <button id="button0">button0</button>
     <button id="button1">button1</button>
+    <content></content>
     <button id="button2">button2</button>
   </template>
 
+  <script>
+    Polymer({
+      is: 'test-buttons'
+    });
+  </script>
 </dom-module>
-
-<script>
-
-(function() {
-  Polymer({
-    is: 'test-buttons'
-  });
-})();
-
-</script>
