lwc icon indicating copy to clipboard operation
lwc copied to clipboard

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

Open steelsojka opened this issue 1 year ago • 3 comments

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.

steelsojka avatar Sep 25 '23 21:09 steelsojka

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

git2gus[bot] avatar Sep 25 '23 21:09 git2gus[bot]

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

jmsjtu avatar Sep 25 '23 21:09 jmsjtu

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

nolanlawson avatar Aug 09 '24 22:08 nolanlawson