Wrapping component element breaks parent/child relations
I have a parent → child relation setup where the parent has display: grid enabled and the child has grid-column: auto/span 2 to span 2 columns. When using a Dynamic component as a child, that relationship breaks because the child is wrapped in a <component /> element.
Is there a way Dynamic components can be rendered without that wrapping element?
Was looking into this yesterday, I think we should be able to do this by adding the data attribute to the element wrapped with Dynamic, then client side just wrapping it in a temporary parent div for the hydration then removing it again.
Wouldn't it then temporarily break the layout while using a wrapping element for hydration?
Yes, but you'd not see it. The problem is that hydrate requires you to provide a parent node and all of the children. So we need to ensure that Dynamic components have a parent with the component as the only child. Hence the <component> wrapper.