Elements rendered outside of slot when shadow not enabled

[Jbcampbe]

Stencil version:

 @stencil/[email protected]

I'm submitting a:
[ x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
I am seeing the behavior described in #897. The only difference is I do not have shadow enabled. If I enable shadow I see the correct behavior.

Expected behavior:
Children added to a slot after initial render should show up inside the designated slot.

Steps to reproduce:

Related code:

Other information:

[claviska]

Hi, the linked issue is pretty old and was closed out. If this is still affecting you, can you provide a test case so we can replicate it? Thanks!

[johnjenkins]

I see this issue too :)

^ there's the effect.
https://github.com/johnjenkins/stencil-scoped-append-bug
^ there's a minimum repro

When the component gets re-rendered the newly added elements will be re-positioned.
So a workaround is to add a mutation observer on the component then force a re-render by changing an arbitrary state variable or something.

[claviska]

Thanks for the repo. I've confirmed that this occurs when:

• Shadow DOM is not used
• An element is appended to a component with a <slot> via insertAdjacentHTML('beforeend', ...), el.appendChild(...), and also el.innerHTML += '...'

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!

[rwaskiewicz]

The fix for this issue has been released as a part of today's v4.2.0 release. To enable it, please ensure that experimantalSlotFixes (Docs) is set to true in your stencil.config.ts file. Thanks!