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:
The first calcite-label element rendered using this code reproduces this issue, which is not placing the slotted text node in the proper place in the DOM:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Stencil Component Starter</title>
<script type="module" src="/build/stencil-starter-project-name.esm.js"></script>
<script nomodule src="/build/stencil-starter-project-name.js"></script>
</head>
<body>
<script type="module">
import { h, createProjector } from "https://unpkg.com/maquette@3.3.7/dist/index.js";
document.addEventListener('DOMContentLoaded', function () {
const domNode = document.body;
const projector = createProjector();
const test = {
renderMaquette: function () {
return h("div", [
h("calcite-label", ["I am a text node and won't get properly relocated"]),
h("calcite-label", [h("span", ["I am a span and will get properly relocated"])]),
])
}
};
projector.append(domNode, test.renderMaquette);
projector.scheduleRender();
});
</script>
</body>
</html>
Expected behavior:
Sending in plain text (without any wrapping element) to a scoped Stencil component properly places the content in the default <slot /> position.
Steps to reproduce:
git clone https://github.com/eriklharper/stencil-maquette-bugnpm i && npm start- Open browser developer tools and inspect both rendered
calcite-label elements. Note that the first one is not placing the text content in the proper place while the second one is.
Other information:
Repro environment: https://github.com/eriklharper/stencil-maquette-bug
This is happening in the latest Chrome (87.0.4280.141), Firefox (84.0.2), Safari (14.0.2) and Brave (1.18.78) on MacOS 10.15.7
This also appears to produce very strange behavior in a larger app that is using maquette where a calcite-panel stencil element is trying to render.
Example code (JSX rendered with maquettejs):
<calcite-label class={CSS.toggleText}>
<span class={CSS.toggleTextLabel}>{i18n.ui.includeInLegend}</span>
<calcite-switch
key="transparency-include-in-legend-toggle-switch"
class={CSS.toggleButton}
scale="s"
switched={isChecked}
afterCreate={(element: HTMLElement) => {
element.addEventListener("calciteSwitchChange", () => {
this.handleIncludeInLegendToggle();
});
}}
></calcite-switch>
</calcite-label>
Result:
In the testing I've been doing, this doesn't seem to affect named slots. It only appears to affect the default <slot />.
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:
The first
calcite-labelelement rendered using this code reproduces this issue, which is not placing the slotted text node in the proper place in the DOM:Expected behavior:
Sending in plain text (without any wrapping element) to a scoped Stencil component properly places the content in the default
<slot />position.Steps to reproduce:
git clone https://github.com/eriklharper/stencil-maquette-bugnpm i && npm startcalcite-labelelements. Note that the first one is not placing the text content in the proper place while the second one is.Other information:
Repro environment: https://github.com/eriklharper/stencil-maquette-bug
This is happening in the latest Chrome (87.0.4280.141), Firefox (84.0.2), Safari (14.0.2) and Brave (1.18.78) on MacOS 10.15.7
This also appears to produce very strange behavior in a larger app that is using maquette where a
calcite-panelstencil element is trying to render.Example code (JSX rendered with maquettejs):
Result:
In the testing I've been doing, this doesn't seem to affect named slots. It only appears to affect the default
<slot />.