TL;DR: I'm looking for slots but without shadow dom

I'm looking for a solution that should "change" something like:

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

into something like:

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

where form-control is the needed custom element; now specific for forms, but a general wrapper solution is a good thing to know

Solutions I think about:

1. using shadow dom and slots: that will be the natural solution, but until the form participation api will be widely supported it's not a solution; plus, including bootstrap css in every 'small' web component is overkill (and selecting only needed css classes is even more overkill), so I am using web components (with shadow dom) only at 'top' level elements (like a whole form, table, modal etc., the rest are only custom elements, without shadow dom)
2. "moving" children from custom element into that div: it works but if a child is a custom element then connectedCallback will be called twice (because it will be moved into dom); of course connectedCallback can be guarded (one time execution), but when the child element must async load something ... well, it 'smells' trouble; if somehow a custom element could be "moved" without disconnectedCallback/connectedCallback that should work fine, but I don't think that is possible
3. try to use (or inspire from) a bootstrap web component collection; unfortunately I could not find any framework based on bs5

Any idea will be appreciated!