diff --git a/scss/colors/utilities/_css-vars.scss b/scss/colors/utilities/_css-vars.scss
index fb535005..a4ec4055 100644
--- a/scss/colors/utilities/_css-vars.scss
+++ b/scss/colors/utilities/_css-vars.scss
@@ -10,7 +10,8 @@
   $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
 
   @if $enable-css-vars {
-    :root {
+    :root,
+    :host {
       // Loop through color families
       @each $family, $colors in colors.$colors {
         @if list.index(map.get(settings.$palette, "color-families"), $family) {
diff --git a/scss/components/_modal.scss b/scss/components/_modal.scss
index 18b374e6..2052e8af 100644
--- a/scss/components/_modal.scss
+++ b/scss/components/_modal.scss
@@ -6,7 +6,8 @@
    * Modal (<dialog>)
    */
 
-  :root {
+  :root,
+  :host {
     #{$css-var-prefix}scrollbar-width: 0px;
   }
 
diff --git a/scss/content/_embedded.scss b/scss/content/_embedded.scss
index 354a4c41..6bf11af8 100644
--- a/scss/content/_embedded.scss
+++ b/scss/content/_embedded.scss
@@ -47,7 +47,8 @@
   }
 
   // Hide the overflow in IE
-  #{$parent-selector} svg:not(:root) {
+  #{$parent-selector} svg:not(:root),
+  #{$parent-selector} svg:not(:host) {
     overflow: hidden;
   }
 }
diff --git a/scss/layout/_document.scss b/scss/layout/_document.scss
index a21b8a1c..b680cc37 100644
--- a/scss/layout/_document.scss
+++ b/scss/layout/_document.scss
@@ -34,7 +34,8 @@
   // 3. Use a 4-space tab width in all browsers (opinionated)
   // 4. Remove the grey highlight on links in iOS (opinionated)
   // 5. Prevent adjustments of font size after orientation changes in iOS
-  :where(:root) {
+  :where(:root),
+  :where(:host) {
     -webkit-tap-highlight-color: transparent; // 4
     -webkit-text-size-adjust: 100%; // 5
     text-size-adjust: 100%; // 5
diff --git a/scss/themes/default/_schemes.scss b/scss/themes/default/_schemes.scss
index 493cd39d..295884e1 100644
--- a/scss/themes/default/_schemes.scss
+++ b/scss/themes/default/_schemes.scss
@@ -12,14 +12,16 @@
   // Light color scheme (Default)
   // Can be forced with data-theme="light"
   [data-theme="light"],
-  :root:not([data-theme="dark"]) {
+  :root:not([data-theme="dark"]),
+  :host(:not([data-theme="dark"])) {
     @include light.theme;
   }
 
   // Dark color scheme (Auto)
   // Automatically enabled if user has Dark mode enabled
   @media only screen and (prefers-color-scheme: dark) {
-    :root:not([data-theme]) {
+    :root:not([data-theme]),
+    :host(:not([data-theme])) {
       @include dark.theme;
     }
   }
diff --git a/scss/themes/default/_styles.scss b/scss/themes/default/_styles.scss
index 8b804529..a588759f 100644
--- a/scss/themes/default/_styles.scss
+++ b/scss/themes/default/_styles.scss
@@ -9,7 +9,8 @@
    * Styles
    */
 
-  :root {
+  :root,
+  :host {
     // Typography
     #{$css-var-prefix}font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
       "Noto Color Emoji";