From daa387f4b7e25199e051277d38d8d41b45e0a8bd Mon Sep 17 00:00:00 2001
From: David McAlpine <dave@mcalpine.io>
Date: Mon, 15 Jul 2019 22:27:03 -0400
Subject: [PATCH 1/2] allow reference strip to work in a web component

---
 src/referencestrip.js          |  2 +-
 test/modules/referencestrip.js | 26 ++++++++++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

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..2b300632 100644
--- a/test/modules/referencestrip.js
+++ b/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();
+    })
+
 })();

From ab33cd502e412d8bea9a13f32b730d07062befaa Mon Sep 17 00:00:00 2001
From: David McAlpine <dave@mcalpine.io>
Date: Fri, 19 Jul 2019 16:20:55 -0400
Subject: [PATCH 2/2] only run shadow dom test if brower supports shadow dom

---
 test/modules/referencestrip.js | 40 +++++++++++++++++++---------------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/test/modules/referencestrip.js b/test/modules/referencestrip.js
index 2b300632..2514dbd2 100644
--- a/test/modules/referencestrip.js
+++ b/test/modules/referencestrip.js
@@ -46,28 +46,32 @@
 
     // ----------
     QUnit.test('shadow dom', function(assert) {
-        var done = assert.async();
+        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>`
+            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'
-            ]
-        });
+            createViewer({
+                element: shadowDiv.shadowRoot.querySelector('#shadow-example'),
+                sequenceMode: true,
+                showReferenceStrip: true,
+                tileSources: [
+                    '/test/data/tall.dzi',
+                    '/test/data/wide.dzi'
+                ]
+            });
 
-        $(shadowDiv).appendTo("#qunit-fixture");
+            $(shadowDiv).appendTo("#qunit-fixture");
 
-        assert.ok(viewer.referenceStrip, 'referenceStrip exists');
-        done();
+            assert.ok(viewer.referenceStrip, 'referenceStrip exists');
+            done();
+        } else {
+            assert.expect(0);
+        }
     })
 
 })();