diff --git a/core/src/components/buttons/buttons.tsx b/core/src/components/buttons/buttons.tsx
index e826ec7633..7cf672d7bd 100644
--- a/core/src/components/buttons/buttons.tsx
+++ b/core/src/components/buttons/buttons.tsx
@@ -34,7 +34,9 @@ export class Buttons implements ComponentInterface {
[mode]: true,
['buttons-collapse']: this.collapse,
}}
- >
+ >
+
+
);
}
}
diff --git a/core/src/components/label/label.tsx b/core/src/components/label/label.tsx
index 1cfe88ffb7..6f8ad05a4a 100644
--- a/core/src/components/label/label.tsx
+++ b/core/src/components/label/label.tsx
@@ -107,7 +107,9 @@ export class Label implements ComponentInterface {
[`label-no-animate`]: this.noAnimate,
'label-rtl': document.dir === 'rtl',
})}
- >
+ >
+
+
);
}
}
diff --git a/core/src/utils/slot-mutation-controller.ts b/core/src/utils/slot-mutation-controller.ts
index 3827c28f9f..c07f2da5f2 100644
--- a/core/src/utils/slot-mutation-controller.ts
+++ b/core/src/utils/slot-mutation-controller.ts
@@ -50,6 +50,18 @@ export const createSlotMutationController = (
hostMutationObserver.observe(el, {
childList: true,
+ /**
+ * This fixes an issue with the `ion-input` and
+ * `ion-textarea` not re-rendering in some cases
+ * when using the label slot functionality.
+ *
+ * HTML element patches in Stencil that are enabled
+ * by the `experimentalSlotFixes` flag in Stencil v4
+ * result in DOM manipulations that won't trigger
+ * the current mutation observer configuration and
+ * callback.
+ */
+ subtree: true,
});
}
diff --git a/core/stencil.config.ts b/core/stencil.config.ts
index 78a3697a07..2485eafb23 100644
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -257,4 +257,18 @@ export const config: Config = {
globalScript: 'src/global/ionic-global.ts',
enableCache: true,
transformAliasedImportPaths: true,
+ extras: {
+ /**
+ * `experimentalSlotFixes` is necessary in Stencil v4 until the fixes described in
+ * {@link https://stenciljs.com/docs/config-extras#experimentalslotfixes the Stencil docs for the flag} are the
+ * default behavior (slated for a future Stencil major version).
+ */
+ experimentalSlotFixes: true,
+ /**
+ * `experimentalScopedSlotChanges` is necessary in Stencil v4 until the fixes described in
+ * {@link https://stenciljs.com/docs/config-extras#experimentalscopedslotchanges the Stencil docs for the flag} are
+ * the default behavior (slated for a future Stencil major version).
+ */
+ experimentalScopedSlotChanges: true,
+ }
};