Stencil version:
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>
);
}
}
Stencil version:
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.
Expected behavior:
On the second render, the new array element is a DOM sibling to other array elements.
Steps to reproduce:
Repro link: https://github.com/petermikitsh/stencil-vdom-bug
Related code: