Slotted content and custom elements

[bsastregx]

Hi!
I am trying to use this package within a stencilJs component.
In my component, there is a ul element with slotted content inside :

<ul ref={(el) => this.ulTree = el as HTMLElement}> <slot></slot> </ul>

This does not work. However, this does work:

<ul ref={(el) => this.ulTree = el as HTMLElement}> <li>foo 1</li> <li>foo 2</li> <li>foo 3</li> </ul>

The problem seems to be related to slotted content.

On the other hand, it won´t work with custom components, instead of li´s :

<ul ref={(el) => this.ulTree = el as HTMLElement}> <gxg-tree-item> tree item 1 </gxg-tree-item> <gxg-tree-item> tree item 2 </gxg-tree-item> <gxg-tree-item > tree item 3 </gxg-tree-item> </ul>

The preceding code won´t work.

So my questions are:

• How do I make this work with slotted content?
• How do I make this work with custom elements (component), instead of simple html tags?

[owen-m1]

@bsastregx
Try setting this option:

new Sortable({
    draggable: '>*'
})

Let me know if this works, I think its cause you are using a ul as the sortable so it will only look for lis to be draggable

[owen-m1]

@bsastregx Unfortunately in the current version the sortable items need to be direct children of the sortable container element, so you would have to make the gxg-tree element sortable somehow

[owen-m1]

@bsastregx This is actually a restriction that doesn't need to be there, I will try to fix it for the next version, but please try that for now

[bsastregx]

Iy would be great if you fix this for the next version. Is there a email I can subscribe to get notificated when the next version comes out? Thank you.

[owen-m1]

@bsastregx Just use the Github watch feature on this repository and select to only watch for releases :)

[bsastregx]

Ok thanks. What is the aprox. release date for the next version?

[bsastregx]

Thanks! El mié., 17 feb. 2021 11:20, Owen M <[email protected]> escribió:

…

@bsastregx <https://github.com/bsastregx> Just use the Github watch feature on this repository and select to only watch for releases :) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2005 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANBE7JV3IR77QA7NUTM43CTS7PGCVANCNFSM4XPE5DNQ> .