diff --git a/core/src/components/card/card.ionic.scss b/core/src/components/card/card.ionic.scss
index 0b14ff67d1..d77cf07306 100755
--- a/core/src/components/card/card.ionic.scss
+++ b/core/src/components/card/card.ionic.scss
@@ -5,6 +5,11 @@
 // --------------------------------------------------
 
 :host {
+  // TODO(FW-6178): Remove this once the Stencil bug is resolved.
+  /**
+   * @prop --background: Background of the card
+   * @prop --color: Color of the card
+   */
   --background: #{tokens.$ionic-color-neutral-0};
   --border-radius: #{tokens.$ionic-border-radius-rounded-small};
 
diff --git a/core/src/components/chip/chip.ionic.scss b/core/src/components/chip/chip.ionic.scss
index 237d3de6b2..7200d73587 100644
--- a/core/src/components/chip/chip.ionic.scss
+++ b/core/src/components/chip/chip.ionic.scss
@@ -9,6 +9,11 @@ $ionic-states-focus-primary: #9ec4fd;
 $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make this in the future, as we are setting scss variables with a var() and fallback, and it doesn't work inside a rgba().
 
 :host {
+  // TODO(FW-6178): Remove this once the Stencil bug is resolved.
+  /**
+   * @prop --background: Background of the chip
+   * @prop --color: Color of the chip
+   */
   --background: #{tokens.$ionic-color-neutral-10};
   --border-color: transparent;
   --border-radius: #{tokens.$ionic-border-radius-rounded-small};