Problemas de ordenación de arrastre en el Componente Web con Shadow Dom desactivado

Este bug/solicitud no es solo para StencilJS, sino en general con Web Components y el Shadow DOM. ¿Existen buenas prácticas con uvas y componentes web para habilitar o rastrear eventos que medien estos problemas?

No trabajo mucho con Web Components, así que si puedes crear una demo reproducible (por ejemplo, un componente personalizado usando Web Components en el fondo), eso nos ayudaría a depurar y entender el problema.

@artf de nada, gracias por la rápida respuesta.

He importado mi biblioteca personalizada de componentes web aquí en este Fiddle para demostrar el problema: https://jsfiddle.net/jenter77/5btn2ao7/25/

! violínOrden

Si haces referencia a mi repositorio público y al ejemplo del componente web "faux-grid-item" aquí, verás que es simplemente un componente sencillo que se retrasa un par de segundos y luego carga. Si shadowDOM está desactivado, ocurre el error de ordenar/arrastrar.

importar { Componente, Estado, h } de '@stencil/core';

@Component({
  etiqueta: 'objeto de cuadrícula falsa',
  styleUrl: 'faux-grid-item.css',
  sombra: falso, // <<=== causa problemas
})

...

Hola Jason, he intentado ver qué está pasando dentro del editor y no estoy seguro de cómo la opción 'sombra' afecta realmente a este comportamiento, pero el principal problema que veo es ese elemento dinámico '<div class="delayed--wrapper">'. Básicamente, el editor, en el análisis posterior, tiene esta estructura de componentes '''html <faux-grid-item> <p>Hola</p> <p>Hola</p> <p>Hola</p> </faux-grid-item>

pero el DOM real sí
'''html
<faux-grid-item>
   <div class="delayed--wrapper">
        <p>Hola</p>
        <p>Hola</p>
        <p>Hola</p>
   </div>
</faux-grid-item>

Este desalineamiento confunde al clasificador porque 'div.delayed--wrapper' no está conectado a ningún componente. De hecho, para "fingir" tu comportamiento esperado tendrías que mantener un solo div dentro de tu plantilla '''html <faux-grid-item>

<div> <p>Hola</p> <p>Hola</p> <p>Hola</p> </div> </faux-grid-item> ```

Desafortunadamente, no veo cómo se pueda solucionar esto (por eso cerraré el tema). Cuando el clasificador indica que se elimine un Bloque en la posición X (por ejemplo, después de los 2 hijos) de FauxGridItem, añadirá el nuevo componente eliminado dentro de la colección de hijos de FauxGridItem y entonces la vista del componente renderizará el DOM en la misma posición, pero en este caso no será posible porque FauxGridItem solo tiene 1 hijo ('div.delayed--wrapper').

Así que, para recapitular, modificar el DOM fuera del editor crea efectos secundarios impredecibles. Lo mismo ocurre con los frameworks que dependen del DOM virtual (por ejemplo, React, Vue, etc.) siempre se recomienda evitar tratar directamente con el DOM, ya que podrías romper su estado virtual.