Virtual DOM bug: <slot /> array on second render

[petermikitsh]

Stencil version:

 @stencil/[email protected]

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:

When rendering an array into a <slot />, during the initial render, array items are added at the correct location in the DOM.

On a second render, a new array element is rendered as a child of the parent's parent.

<my-select class="hydrated">
  <!---->
  <select>
    <option value="foo">foo</option>
  </select>
  <option value="bar">bar</option>
</my-select>

Expected behavior:

On the second render, the new array element is a DOM sibling to other array elements.

<my-select class="hydrated">
  <!---->
  <select>
    <option value="foo">foo</option>
    <option value="bar">bar</option>
  </select>
</my-select>

Steps to reproduce:

Repro link: https://github.com/petermikitsh/stencil-vdom-bug

Related code:

import { Component, State, h } from "@stencil/core";

@Component({
  tag: "my-component",
  styleUrl: "my-component.css",
  shadow: true
})
export class MyComponent {
  connectedCallback() {
    window.setTimeout(() => {
      this.options = ["foo", "bar"];
    }, 4000);
  }

  @State() options = ["foo"];

  render() {
    return (
      <div>
        <div>
          <my-select>
            {this.options.map(opt => (
              <option key={opt} value={opt}>
                {opt}
              </option>
            ))}
          </my-select>
        </div>
      </div>
    );
  }
}

import { Component, h } from "@stencil/core";

@Component({
  tag: "my-select",
  shadow: false
})
export class MySelect {
  render() {
    return (
      <select>
        <slot />
      </select>
    );
  }
}

[dutscher]

it seems tobe related to #1968
cheers

[zurfluh]

I just encountered this issue too. It would be nice to have the fix merged soon. 🙏

[splitinfinities]

Please signal boost @johnjenkins' PR please! Reactions there will be the source of truth for which of the many PR's out that we will take on next.