bug: Incorrect slotting with Angular's conditional rendering, 'shadow:false' and named slots.

[raqushque]

Prerequisites

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

Stencil Version

Tested with 2.22.3 and 4.22.2

Current Behavior

Elements are being "slotted" incorrectly into components with 'shadow:false' when added at runtime (with Angular's @if, for example).

Elements are inserted into default slot if it exists and as a first child of component if it does not.

Components with 'shadow:true' function as expected.

Expected Behavior

Elements are "slotted" into correct location (same as when using component with shadow: true)

System Info

No response

Steps to Reproduce

Clone the repo
https://github.com/raqushque/stencil-ng-slots-repro

• run npm i --legacy-peer-deps
• run npm run start

In app click the buttons Toggle content or Push to array. These add content that should be slotted.

Code Reproduction URL

https://github.com/raqushque/stencil-ng-slots-repro

Additional Information

This is likely not a Stencil issue, but rather some sort of conflict between Stencil and Angular. Still, since @stencil/angular-output-target exists I'd expect component to work properly in both shadow and non-shadow modes, or this issue be documented. Also, default slots do work, so there could be a solution/workaround on Stencil's side.

[cgomezgu]

Hi @ionic-team,
we're facing the same Bug in a Project with conditionally rendered slots, after we updated to ios18/macOS15: After an element renders a conditionally slot element, other slot elements on the same page gets removed.

This only seems to occur with elements whose slots have display: contents and contain text nodes. If you set the slot to e.g. display: block or wrap the text in an element such as span, p or div, the error does not occur.

In his example that would mean using <my-headline><span>Headline</span></my-headline> in my-app.ts would work.

Angular 17, Stencil 4.22, Safari 18.X.X.
Shadow: true.

url report: https://www2.webkit.org/show_bug.cgi?id=280399#c2

Thanks!

[christian-bromann]

@cgomezgu thank you for validating. Any contributions that help fix this issue are greatly appreciated.

[cgomezgu]

Hi @christian-bromann, Is there any revision estimate? Is it one of your short-term plans to review the incident?

[christian-bromann]

Is there any revision estimate?

No.

Is it one of your short-term plans to review the incident?

At OutSystems we have limited resources and rely on contributions from the outside. If you are impacted by this problem, the best thing would be to get involved and help resolve it. This is not an "incident", I see this as a bug in an open source project that can be resolved by anyone who is impacted by it.

[johnjenkins]

this is caused by Angular using the insertBefore method:

At present we are not patching this method via extras: { experimentalSlotFixes: true }
I'll take a look :)

[johnjenkins]

thanks to @raqushque for the detailed repro - really helps :)

Will write some tests / make a MR tomorrow

[cgomezgu]

Hi @johnjenkins ,
Good morning, first of all, thank you for your contribution to the solution, but unfortunately in our case it does not solve the problem, we are getting same result.
Note that in our project we use the "shadow: true" configuration in all of our components.
Any idea? How could I help you?

Thanks!

[johnjenkins]

Sorry, @cgomezgu no idea.

What you’re experiencing is a different issue to the one described here.

Suggest you raise a new issue with a minimum repro - using this issue as an excellent template; the more examples of the problem, the better 🙂