Is there conditions in which Flickity removes child elements ?

[commit-master]

Test case: https://codepen.io/commit-master/pen/poGLZWW

We are working with customers that use Flickity. Somehow the carousel is not compatible with our Custom Html Element (omi-360-viewer). I've been searching everywhere and I cannot seem to find a reason why in that case the element is removed.

It's specific to our custom element since trying with a dummy one works.

Here is what our element returns as HTML:

<model-viewer
        id='viewer'
        style='width: ${this.width}; height: ${this.height};background:${this.background};'                
        shadow-softness='${this.shadowSoftness}'
        shadow-intensity='${this.shadowIntensity}'
        exposure='${this.exposure}'
        ${this.enableAR ? 'ar' : ''} 
        ar-modes='webxr scene-viewer quick-look'
        camera-controls
        alt='Omi 3D Viewer'
        src='${
          this.mode === Mode.Fetch ?
          `${this.env}/${this.modelID}?apiKey=${this.apiKey}` :
          this.modelID
        }'
        environment-image='${
          this.mode === Mode.Fetch ?
          `${this.env}/${this.skyboxID}?apiKey=${this.apiKey}` :
          `${this.skyboxID}`
        }'
      >
      </model-viewer>

Do you see any reasons why your library would remove our element from the DOM ?

We've been working with others carousels library and we don't have the issue. We'd love for our mutual users to be able to use it.

Thanks!

[desandro]

Do you see any reasons why your library would remove our element from the DOM ?

Flickity creates two elements .flickity-viewport and .flickity-slider, then moves cell elements into those parents. What may be happening is that Flickity's DOM manipulation is messing with how omi-360-viewer works.

One solution may be to initialize Flickity first, then initialize omi-360-viewer afterward, using JS to initialize both so you can control the order.