lwc
lwc copied to clipboard
[Light DOM] Wire adapters disconnecting immediately for components in dynamic slots
Description
When a component has a slot(s) that is used within conditionals (named or default), any components that are transcluded/rendered in that slot has it's wire adapters connected and then immediately disconnected. This causes issues with any wire adapters used in those components that subscribe on connect and then unsubscribe on disconnect. I've been able to do a minimal reproduction with a link in the reproduction steps section.
<template lwc:if={isMobile}>
<div class="mobile" slot="navigation"></div>
</template>
<template lwc:else>
<div class="desktop" slot="navigation"></div>
</template>
What I have noticed in my debugging is when the template is going through and disconnecting the old slot content, it is mixing up the contexts here:
https://github.com/salesforce/lwc/blob/4b37d7fa2118f70cd83f64671e6b0a0785bb65c8/packages/%40lwc/engine-core/src/framework/wiring/wiring.ts#L292
vm.context
is pointing to the newly created slot component (navigation in the case above) instead of the old one.
We believe this feature is supported based on the docs here, although it doesn't specifically state named slots.
https://lwc.dev/guide/composition#render-slots-conditionally
Impact
This causes us to do some quirky workarounds that have unforeseen consequences. For example, we conditionally display different layouts based on form factor. We've had to completely clear the component template on form factor change and then queue up another render with the new template for the alternative form factor. This is something that has only been caught REALLY late in the development lifecycle, if not production.
Steps to Reproduce
See the readme of the stackblitz for steps to reproduce.
https://stackblitz.com/edit/salesforce-lwc-9wkkj8?file=readme.md
Expected Results
The wire adapters do not disconnect on the newly mounted component.
Actual Results
The wire adapters are disconnected immediately after being connected.
Browsers Affected
Chrome
Version
See reproduction package.json
Possible Solution
Additional context/Screenshots Add any other context about the problem here. If applicable, add screenshots to help explain.
This issue has been linked to a new work item: W-14181638
@steelsojka thanks for filing this bug! The team will look into it.
I reduced the repro a bit, and confirmed that this issue only occurs in light-DOM mode, not shadow-DOM mode (either native or synthetic shadow).