diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js
index 1e6e400370..e877a0d9ed 100644
--- a/tokens/style-dictionary.js
+++ b/tokens/style-dictionary.js
@@ -158,7 +158,7 @@ const createCustomCSSVariables = async ({ formatterArgs }) => {
     usesDtcg: true,
   });
   const header = await fileHeader({ file, formatting });
-  return `${header}:root {\n${variables}\n}\n`;
+  return `${header}:root, :host {\n${variables}\n}\n`;
 };
 
 /**