[Light DOM] Wire adapters disconnecting immediately for components in dynamic slots

[steelsojka]

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:

lwc/packages/@lwc/engine-core/src/framework/wiring/wiring.ts

Line 292 in 4b37d7f

const { wiredDisconnecting } = vm.context;

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.

[git2gus]

This issue has been linked to a new work item: W-14181638

[jmsjtu]

@steelsojka thanks for filing this bug! The team will look into it.

[nolanlawson]

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).