bug: cloneNodeFix not working with experimentalSlotFixes flag

[christophsaile]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

4.12.5

Current Behavior

After updating from @Stencil/core/4.7.0 to @Stencil/core/4.12.5 I changed my stencil.config.ts from:

extras: {
  cloneNodeFix: true,
  enableImportInjection: true,
},

to:

extras: {
  experimentalSlotFixes: true,
  experimentalScopedSlotChanges: true,
  enableImportInjection: true,
},

After updating I realized that a bug reappeared (which was solved before by adding the cloneNodeFix: true flag). The bug causes sometimes content that is slotted inside elements without shadow-dom to be rendered twice into the component.

After changing the config back to:

extras: {
  cloneNodeFix: true,
  appendChildSlotFix: true,
  slotChildNodesFix: true,
  scopedSlotTextContentFix: true,
  // experimentalSlotFixes: true, This flag includes the 4 flags above but somehow there
  // is a bug that the cloneNodeFix is not working anymore
  experimentalScopedSlotChanges: true,
  enableImportInjection: true,
},

the issue seems to be fixed.

As soon as I add the experimentalSlotFixes: true flag again, the bug reappears.

Expected Behavior

My expected behavior would be that the cloneNodeFix: true flag still works after adding the experimentalSlotFixes: true flag.

System Info

System: node 20.9.0
    Platform: darwin (23.3.0)
   CPU Model: Apple M1 Pro (8 cpus)
    Compiler: /Users/christoph.saile/Work/<client-project>/node_modules/.pnpm/@[email protected]/node_modules/@stencil/core/compiler/stencil.js
       Build: 1709576313
     Stencil: 4.12.5 💙
  TypeScript: 5.3.3
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.28.1

Steps to Reproduce

To reproduce add the experimentalSlotFixes: true flag to the stencil.config.ts and check if the cloneNodeFix: true is still working.

Code Reproduction URL

https://github.com/christophsaile/stencil-clone-node-fix

Additional Information

I was able to create a quick reproduction repo:

This is how the output should look like with the cloneNodeFix: true flag:

This is how the output looks like when the experimentalSlotFixes: true flag is enabled:

In the second screenshot you can see that the elements are duplicated.

[rwaskiewicz]

Hey @christophsaile 👋

While we understand that you cannot share complex client code (and certainly don't want you to share anything confidential), we cannot move forward without a reproduction case. Can you please provide use a minimal reproduction case? npm init stencil should get you started with a minimal Stencil library as a starter. Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[christophsaile]

Hey @rwaskiewicz,

I was able to create a reproduction case. I updated my ticket with a link to a repo I just created + added screenshots for clarification.

Many thanks, Chris

[tanner-reits]

Hey @christophsaile

I was able to confirm your issue. I'll get this ingested into our backlog for work in the future. Thanks!