CODEWITHSUNDEEP
web-component
Yoeri
Yoeri

Reputation: 1906

Webcomponent move slotted items in DOM

I am creating a menu structure that shows items in a popover when overflowing. Basically, there a just buttons in a vertical layout (like the left menu of teams), when the container overflows, the 'invisible' items are moved to a popup that shows when pressing a more button ...

I made a my-sidemenu webcomponent with my-sidemenu-items as children.

In MS Fast, the children are added via: <slot ${slotted({property: 'menuItems'})}>

Now, when resizing or adding items, I need to re-arrange the nodes. When moving around the items (appendchild on the menu or popup), the ItemsChanged triggers because I'm altering the slotted node collection ..

What is the best way to move them nodes around and still get notified when items are added/removed?

Tx.

Upvotes: 0

Views: 11

Answers (0)

Related Questions