Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Duplicating children fix for {shadow: false} #61

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

AtnesNess
Copy link

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

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
coolavery added a commit to coolavery/preact-custom-element that referenced this pull request Apr 20, 2022
coolavery added a commit to coolavery/preact-custom-element that referenced this pull request Apr 20, 2022
@rozek
Copy link

rozek commented Sep 8, 2023

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
Copy link

rozek commented Sep 8, 2023

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):

  • the <slot/> tag will be rendered as <div><slot></slot></div> and
  • the actual child elements will be rendered as direct descendants of the container element, right next to the <div><slot></slot></div>

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants