Slider cannot be initialized in iframe

[taltmann42]

I'm trying to use Glide.js for some components and want to showcase that in Storybook. There the component is displayed in an iframe, and when mounting a Glide instance, I get this error:

Root element must be a existing Html node

I am using an element reference in the constructor, not a selector, and double checked that this element does really exist. I tracked the error down to the exist-Function in src/utils/dom.js specifically this part:

node instanceof window.HTMLElement

Apparently, elements inside an iframe are not an instance of window.HTMLElement but rather theiframelement.contentWindow.HTMLElement. I tested these cases:

this.element instanceof window.HTMLElement // false
this.element instanceof HTMLElement // false
this.element instanceof document.querySelector('iframe').contentWindow.HTMLElement // true

Chrome and Safari fail with the root-element error while it works in firefox.

A possible solution with more info can be found here https://stackoverflow.com/questions/384286/how-do-you-check-if-a-javascript-object-is-a-dom-object

[abhi3315]

Is there any update on this issue? I am facing the same problem while mounting the slider inside an iframe.

[ericmorand]

Hopefully, this PR is reviewed and merged soon:

https://github.com/glidejs/glide/pull/669

[ericmorand]

@abhi3315 can you give 3.6.1 a try?