TL;DR: Estoy buscando máquinas tragamonedas pero sin shadow dom

Estoy buscando una solución que debería "cambiar" algo como:

 <form-control> element(s): like input, select, custom elements containing form elements </form-control>

en algo como:

 <form-control> <label></label> <div> element(s) </div> </form-control>

donde form-control es el elemento personalizado necesario; ahora específico para formularios, pero es bueno saber una solución de envoltura general

Soluciones en las que pienso:

1. usar shadow dom y slots: esa será la solución natural, pero hasta que la API de participación de formulario sea ampliamente compatible, no es una solución; además, incluir bootstrap css en cada componente web 'pequeño' es exagerado (y seleccionar solo las clases css necesarias es aún más exagerado), por lo que estoy usando componentes web (con shadow dom) solo en elementos de nivel 'superior' (como un formulario completo , tabla, modal, etc., el resto son solo elementos personalizados, sin shadow dom)
2. "mover" elementos secundarios del elemento personalizado a ese div: funciona, pero si un elemento secundario es un elemento personalizado, se llamará dos veces a connectedCallback (porque se moverá a dom); por supuesto, connectedCallback puede protegerse (ejecución única), pero cuando el elemento secundario debe cargar algo de forma asíncrona ... bueno, 'huele' a problemas; si de alguna manera un elemento personalizado pudiera "moverse" sin desconectar la devolución de llamada/conectar la devolución de llamada, eso debería funcionar bien, pero no creo que sea posible
3. intente usar (o inspirarse en) una colección de componentes web de arranque; desafortunadamente no pude encontrar ningún marco basado en bs5

¡Cualquier idea será apreciada!