Stencil version:
@stencil/core@1.8.1

I'm submitting a:

[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
Given: one or more nested Stencil container tags with Shadow DOM off, which insert DOM levels between the Host and the <slot />.

• component-a: Inserts a div between host and <slot />.
• component-b: Renders its <slot /> inside component-a
  When React manages the children of the Stencil container tag, it fails to add and remove them correctly. This happens on every render after the first one.

1. Added items are rendered outside the intended slot.
2. Removing items throws a React error and the app fails to render.

Expected behavior:
Adding and removing items from the children array should all render in the expected slot.

Steps to reproduce:
See this github repo for an example.
React app that uses Stencil components: https://github.com/bbellmyers/stencil-slots
Stencil component library: https://github.com/bbellmyers/stencil-slot-order

Related code:

Component a:

<div class="component-a-inserted">
    <slot />
</div>

Component b:

<component-a>
    <slot />
</component-a>

React render:

<component-b>
  {children.map((child, index) => (
    <div className="example"
      key={`item-${index}`}>child {child}</div>
  ))}
</component-b>

If the children array is longer or shorter, it fails to render correctly on the second render. re-rendering with any array of the same length works.

Other information: