Drag Sorting issues in Web Component with Shadow Dom disabled

This bug/request isn't just for StencilJS, but just in general with Web Components and the Shadow DOM. Are there best practices with Grapes and Web Components with enabling or tracking events to mediate these issues?

I'm not working with Web Components that much so if you're able to create a reproducible demo (eg. custom component using Web Components under the hood) that would help us to debug and understand the issue.

@artf sure thing, thanks for the quick response.

I have imported my custom web component library here in this Fiddle to demonstrate the issue: https://jsfiddle.net/jenter77/5btn2ao7/25/

If you reference my public repo and example "faux-grid-item" web component here you will see it's just a simple component that delays for a couple of seconds and then loads. If shadowDOM is off the sorting/dragging issue bug occurs.

import { Component, State, h } from '@stencil/core';

@Component({
  tag: 'faux-grid-item',
  styleUrl: 'faux-grid-item.css',
  shadow: false, // <<=== causes issues
})

...

Hi Jason, I've tried to give a look at what is happening inside the editor and, I'm not sure how the shadow option actually affects this behavior but, the main issue I see is that dynamic <div class="delayed--wrapper"> element. Basically the editor, post parsing, has this component structure

<faux-grid-item>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
</faux-grid-item>

but the actual DOM is

<faux-grid-item>
   <div class="delayed--wrapper">
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
   </div>
</faux-grid-item>

This misalignment confuses the sorter because div.delayed--wrapper is not connected to any component. Indeed, to "fake" your expected behavior you would need to keep one div inside your template

<faux-grid-item>
   <div>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
   </div>
</faux-grid-item>

Unfortunately, I don't see how this can be solved (the reason why I'll close the issue). When the sorter tells to drop some Block at position X (eg. after the 2 children) of the FauxGridItem, it will append the new dropped component inside the FauxGridItem's children collection and then the component's view renders the DOM at the same position, but in this case, it won't be possible because FauxGridItem has only 1 child (div.delayed--wrapper).

So to recap, modifying the DOM outside of the editor creates unpredictable side effects. It's the same with frameworks which rely on the virtual DOM (eg. React, Vue, etc.) it's always recommended to avoid dealing directly with the DOM as you might break its virtual state.