diff --git a/src/referencestrip.js b/src/referencestrip.js
index 62be61f8..405f5559 100644
--- a/src/referencestrip.js
+++ b/src/referencestrip.js
@@ -236,7 +236,7 @@ $.extend( $.ReferenceStrip.prototype, $.EventSource.prototype, $.Viewer.prototyp
      * @function
      */
     setFocus: function ( page ) {
-        var element      = $.getElement( this.element.id + '-' + page ),
+        var element      = this.element.querySelector('#' + this.element.id + '-' + page ),
             viewerSize   = $.getElementSize( this.viewer.canvas ),
             scrollWidth  = Number( this.element.style.width.replace( 'px', '' ) ),
             scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ),
diff --git a/test/modules/referencestrip.js b/test/modules/referencestrip.js
index 857c16fb..2514dbd2 100644
--- a/test/modules/referencestrip.js
+++ b/test/modules/referencestrip.js
@@ -44,4 +44,34 @@
         done();
     });
 
+    // ----------
+    QUnit.test('shadow dom', function(assert) {
+        if (document.head && document.head.attachShadow) {
+            var done = assert.async();
+
+            var shadowDiv = document.createElement('div');
+            shadowDiv.attachShadow({
+                mode: 'open'
+            });
+            shadowDiv.shadowRoot.innerHTML = `<div id="shadow-example"></div>`
+
+            createViewer({
+                element: shadowDiv.shadowRoot.querySelector('#shadow-example'),
+                sequenceMode: true,
+                showReferenceStrip: true,
+                tileSources: [
+                    '/test/data/tall.dzi',
+                    '/test/data/wide.dzi'
+                ]
+            });
+
+            $(shadowDiv).appendTo("#qunit-fixture");
+
+            assert.ok(viewer.referenceStrip, 'referenceStrip exists');
+            done();
+        } else {
+            assert.expect(0);
+        }
+    })
+
 })();