Support for Web Components

[ghost]

We are in troubles using Glide inside a Web Component, with LitElement.
Should be good in general if the library supports the possibility of place his HTML structure inside <slot> and so dealing with Shadow DOM and other Web Components features.
Rif:

• https://developer.mozilla.org/en-US/docs/Web/Web_Components
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement
• https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot

Acctually the library seems to not support the presence of <slot> inside.

[johannesjo]

@mattiapontonio did you find a solution for this?

[ghost]

@johannesjo really not. By my side, the issue is now in charge to another developer so I'm not focused on that now.

[johannesjo]

@mattiapontonio ok thanks for getting back to me!

[alexghattas]

@mattiapontonio @johannesjo have either of you found a solution? 90% there, just having issues with Glide skipping the element on mount.

[johannesjo]

@alexghattas no sorry.

[alexghattas]

@johannesjo I was able to find a workaround for now. Had to make some small changes to the actual package files for now, but its working with the slotted items. Let me know if you're still stuck on this.

[johannesjo]

@alexghattas thanks. I don't really am (project is over, and we chose a different carousel). Pretty sure though that others might be interested :)

[kylerberry]

@alexghattas have you considered making a PR for your solution?

[alexghattas]

@kylerberry in the end, there was no need to manipulate the code of the package, we were able to use the events to get what we wanted.

[kylerberry]

@alexghattas Good! I was just able to make a LitElement component that supports slottable content without modifying the source. For anyone interested: https://gist.github.com/kylerberry/51cf28565e434de410d6ebd337a2f962

html use:

<content-slider>
    <div slot="slide1">Hi! I'm going to be a slotted slide</div>
    <div slot="slide2">Me too!</div>
</content-slider>

[ghost]

Any updates here? Can I close the issue?

[ghost]

@alexghattas Good! I was just able to make a LitElement component that supports slottable content without modifying the source. For anyone interested: https://gist.github.com/kylerberry/51cf28565e434de410d6ebd337a2f962

html use:

<content-slider>
    <div slot="slide1">Hi! I'm going to be a slotted slide</div>
    <div slot="slide2">Me too!</div>
</content-slider>

Close with this workaround.
Thank You all.