test: add tests for new behavior with native lifecycle invocations #4248
Conversation
| elm.toggleSpans(); | ||
| await Promise.resolve(); | ||
| assertSlottedChildrenLength(elm, 1); | ||
| expect(window.timingBuffer.length).toBe(6); | ||
| expect(window.timingBuffer[3]).toBe( | ||
| 'x-use-api-version-61-sloter: disconnectedCallback' | ||
| ); | ||
| // Notice x-use-api-version-60-slotee disconnectedCallback is fired but not its connectedCallback | ||
| expect(window.timingBuffer[4]).toBe( | ||
| 'x-use-api-version-60-slotee: disconnectedCallback' | ||
| ); | ||
| expect(window.timingBuffer[5]).toBe('x-use-api-version-61-sloter: connectedCallback'); |
There was a problem hiding this comment.
When the sloter is moved, the browser will fire the native disconnectedCallback which will disconnect the entire subtree.
The browser will then call native connectedCallback which runs through rehydration > VDOM diffing to determine if it should unmount/mount/patch any of the elements.
Since the sloter's subtree structure hasn't changed (slotee hasn't changed), the engine determines there's no need to do anything and moves on.
The browser will then call the slotee's native connectedCallback but since it's using synthetic lifecycle (apiVersion = 60 ) it will skip invoking.
We're left with the subtree having disconnectedCallback invoked but not a follow up connectedCallback.
We're observing 2 issues with this:
- Customer rely on these lifecycle methods to set state in their component which are being invoked differently from before.
- We're seeing wire adapters disconnecting and not being reconnected.
|
Because of #4249 I doubt we will keep trying to do native custom element lifecycle via API versioning. But it is good to know what the current behavior is. |
Details
With the introduction of native lifecycle, we're observing new behavior when an element is moved inside the DOM.
This PR adds some tests to verify the current behavior.
Does this pull request introduce a breaking change?
Does this pull request introduce an observable change?