How to move a slotted child component to its parent without losing its reference in Stencil.js?

Question

I have a Navbar which consists of nested navbar-items. Each navbar-item can have multiple nested navbar-items.

This is my html structure:

   <ifx-navbar>
        <ifx-navbar-item slot="left-item">
         Nav Item
             <ifx-navbar-item>
              Second Layer
                <ifx-navbar-item>Third Layer</ifx-navbar-item>
             </ifx-navbar-item>
        </ifx-navbar-item>
        <ifx-navbar-item slot="left-item">Nav Item</ifx-navbar-item>
    </ifx-navbar>

Inside the Navbar, I am using to position the nested child components where I want them to be.

 <div class="navbar__container-left-content-navigation-group">
   <slot name='left-item' />
 </div>

Still inside Navbar, I have my mobile resolution container

  <div class="navbar__sidebar-top-row-wrapper">
       <slot name='mobile-menu-top' />
       <slot name='first-layer' />
  </div>

Still inside Navbar, when resolution is 800px or less, I take the navbar-items, and change their slot name so they can move into the mobile menu.

componentWillLoad() {
    const mediaQueryList = window.matchMedia('(max-width: 800px)');
    mediaQueryList.addEventListener('change', (e) => this.moveNavItemsToSidebar(e));
  }
  moveNavItemsToSidebar(e) {
    if (e.matches) {
      /* The viewport is 800px wide or less */
      const leftMenuItems = this.el.querySelectorAll('[slot="left-item"]')
      for(let i = 0; i < leftMenuItems.length; i++) { 
        leftMenuItems[i].setAttribute('slot', 'mobile-menu-top')
        this.getChildren(leftMenuItems[i].shadowRoot)
      }
    } else {
      /* The viewport is more than 800px wide */
      const leftMenuItems = this.el.querySelectorAll('[slot="mobile-menu-top"]')
      for(let i = 0; i < leftMenuItems.length; i++) { 
        leftMenuItems[i].setAttribute('slot', 'left-item')
      }
    }
  }

 getChildren(el) { 
    const childComponents = el.querySelectorAll('ifx-navbar-item')
    if(childComponents.length !== 0) { 
      for(let i = 0; i < childComponents.length; i++) { 
        childComponent.setAttribute('slot', 'first-layer')
      }
    }
  }

The logic inside moveNavItemsToSidebar() works great! The navbar-item that are direct children of the Navbar move to the new place when their slot name has been changed, but now what I need to do is to take THEIR children, and move them as well! And this is what does not work. The logic inside getChildren(el) is correct, and the slot name is added, but the component is not moved.

I suspected this is because of the shadow DOM since mine is enabled, so I tried 2 more things. I tried to emit the navbar-item as an event, Listen for it inside the Navbar and then change its slot, but it did not work either. Then I tried to Listen for it, grab it, and then put it inside an array defined inside Navbar, and only then change the slot name, but it did not work either.

So, my question is, how can I make this work? I need to grab all of the navbar-items nested inside the first navbar-item, take them out, and put them inside a separate div container without using their reference. Using slots worked but only for the first parent navbar-item. I need to do the same for their children too!