[@engine-core] Inconsistent disconnectedCallback invocation order

[pmdartus]

Description

Steps to Reproduce

Currently, the LWC engine unmounts all the shadow elements in reverse order and the slotted elements in reserve order when synthetic shadow DOM is enabled. Let's take the following shadow DOM component template to illustrate this:

<template>
    <x-leaf name="before-container"></x-leaf>
    <x-shadow-container>
        <x-leaf name="slotted-a"></x-leaf>
        <x-leaf name="slotted-b"></x-leaf>
    </x-shadow-container>
    <x-leaf name="after-container"></x-leaf>
</template>

Expected Results

leaf:before-container
shadowContainer
leaf:slotted-a
leaf:slotted-b
leaf:after-container

Actual Results

leaf:after-container
shadowContainer
leaf:slotted-a
leaf:slotted-b
leaf:before-container

Browsers Affected

All

Version

• LWC: 2.10.0