allow reference strip to work in a web component

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', '' ) ),

test/modules/referencestrip.js

@@ -44,4 +44,30 @@
         done();
     });
 
+    // ----------
+    QUnit.test('shadow dom', function(assert) {
+        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();
+    })
+
 })();