preactjs / preact-custom-element

Wrap your component up as a custom element
MIT License
355 stars 52 forks source link

Duplicating children fix for {shadow: false} #61

Open AtnesNess opened 3 years ago

AtnesNess commented 3 years ago

When shadowDOM is not attached and developer wants to render children inside react component it will lead to duplicating of children. 1) Children will be placed at slot as intended 2) Children will remain at the and of the node, because after rendering original content won't be cleared

rozek commented 1 year ago

I just tried the fix shown here and have to admit that it does not work properly: while it indeed deletes one of the two child instances, it removes the first one rather than the second.

As a consequence, componentDidMount will be called for the child instance that will be deleted right afterwards, but never for the instance that "survives". Programs relying on componentDidMount (like mine) will therefore fail...

rozek commented 1 year ago

My solution: instead of modifying the source of "preact-custom-components", I got rid of the duplicated child elements using a "trick" mentioned in issue #32:

for a component with inner elements add a <slot/> tag instead of ${props.children}

This workaround sounds strange, but it works (somehow):

This may not look nice, but I can live with that hack...