Skip to content

bug: cloneNodeFix not working with experimentalSlotFixes flag #5443

@christophsaile

Description

@christophsaile

Prerequisites

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/@stencil+core@4.12.5/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:

grafik

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

grafik

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

Metadata

Metadata

Assignees

Labels

Bug: ValidatedThis PR or Issue is verified to be a bug within Stencilslot-related

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions