diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
index a13167d2f3..b477267031 100644
--- a/packages/core/component-doc.json
+++ b/packages/core/component-doc.json
@@ -4575,7 +4575,7 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [
         "ix-icon"
diff --git a/packages/core/src/components/kpi/kpi.scss b/packages/core/src/components/kpi/kpi.scss
index 8cdd85ec82..6d6f784234 100644
--- a/packages/core/src/components/kpi/kpi.scss
+++ b/packages/core/src/components/kpi/kpi.scss
@@ -11,8 +11,11 @@
 @import 'mixins/fonts';
 @import 'mixins/hover';
 @import 'mixins/text-truncation';
+@import 'mixins/shadow-dom/component';
 
 :host {
+  @include ix-component;
+
   display: flex;
   flex-grow: 1;
   height: $large-control-height;
@@ -72,20 +75,6 @@
     }
   }
 
-  &.stacked {
-    height: 3.75rem;
-
-    .kpi-container {
-      justify-content: center;
-      flex-wrap: wrap;
-
-      .kpi-label {
-        width: 100%;
-        justify-content: center;
-      }
-    }
-  }
-
   @include hover {
     background-color: var(--theme-kpi-display--background--hover);
   }
@@ -98,3 +87,17 @@
     outline: 1px solid var(--focus--border-color);
   }
 }
+
+:host(.stacked) {
+  height: 3.75rem;
+
+  .kpi-container {
+    justify-content: center;
+    flex-wrap: wrap;
+
+    .kpi-label {
+      width: 100%;
+      justify-content: center;
+    }
+  }
+}
diff --git a/packages/core/src/components/kpi/kpi.tsx b/packages/core/src/components/kpi/kpi.tsx
index 1614d7f41f..679f1d7a4d 100644
--- a/packages/core/src/components/kpi/kpi.tsx
+++ b/packages/core/src/components/kpi/kpi.tsx
@@ -12,7 +12,7 @@ import { Component, h, Host, Prop } from '@stencil/core';
 @Component({
   tag: 'ix-kpi',
   styleUrl: 'kpi.scss',
-  scoped: true,
+  shadow: true,
 })
 export class Kpi {
   /**