monobase icon indicating copy to clipboard operation
monobase copied to clipboard

Wrapping component element breaks parent/child relations

Open fverloop opened this issue 6 years ago • 3 comments

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.

image

Is there a way Dynamic components can be rendered without that wrapping element?

fverloop avatar Mar 04 '19 08:03 fverloop

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.

aron avatar Mar 04 '19 21:03 aron

Wouldn't it then temporarily break the layout while using a wrapping element for hydration?

fverloop avatar Mar 05 '19 06:03 fverloop

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.

aron avatar Mar 05 '19 09:03 aron