Error when reference strip used with Shadow DOM

[dmcalpin]

When including a viewer inside a web component (with Shadow DOM), with a reference strip enabled, i get the error: TypeError: Cannot read property 'style' of null and the selected thumbnail in the reference strip is not highlighted

Error Example: https://jsbin.com/beyunawuhu/1/edit?js,output

it looks like this is due to the $.getElement call here:

openseadragon/src/referencestrip.js

Line 239 in c7aa6ed

var element = $.getElement( this.element.id + '-' + page ),

would it be possible to do something like this:
$.getElement( this.element.children[page] )
so that it's scoped to the element, instead of the light dom

(sry, im not very familiar with your codebase)

[iangilman]

I'm not familiar with working with the shadow DOM, so I guess we'll have to meet in the middle somehow!

Would this work?

var element = this.element.querySelector(this.element.id + '-' + page)

That way we can stick with the ID structure.

[dmcalpin]

I'm all for meeting in the middle. Just tested my app, works good
var element = this.element.querySelector('#' + this.element.id + '-' + page)
i'll get a PR opened if that sounds good to you

[PCailly]

I solved this by passindg th element instead.
this._rootDiv = document.createElement ( "div");
this.shadow.appendChild(this._rootDiv);

THEN
OpenSeadragon({
element: this._rootDiv,

        tileSources:  xxxxx

});

BUT
I got the 'move' and 'fulscreen' BUGS as described in my post CustomElements

[dmcalpin]

@PCailly i did the same thing. Passing HTML Elements for element, or the different buttons zoomInButton worked well. But the reference strip doesn't allow for that which is why we end up with this error

[msalsbery]

Closing this...feel free to re-open if issues persist!