Merge pull request #1676 from dmcalpin/master

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,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);
+        }
+    })
+
 })();