Merge 85830cd384 into 4c98145482

scss/_grid.scss

@@ -2,7 +2,8 @@
 //
 // Rows contain your columns.
 
-:root {
+:root,
+:host {
   @each $name, $value in $grid-breakpoints {
     --#{$prefix}breakpoint-#{$name}: #{$value};
   }

scss/_reboot.scss

@@ -25,7 +25,8 @@
 // Ability to the value of the root font sizes, affecting the value of `rem`.
 // null by default, thus nothing is generated.
 
-:root {
+:root,
+:host {
   @if $font-size-root != null {
     @include font-size(var(--#{$prefix}root-font-size));
   }

scss/_root.scss

@@ -1,4 +1,5 @@
 :root,
+:host,
 [data-bs-theme="light"] {
   // Note: Custom variable values only support SassScript inside `#{}`.
 

scss/_variables.scss

@@ -387,7 +387,7 @@ $enable-important-utilities:  true !default;
 $enable-dark-mode:            true !default;
 $color-mode-type:             data !default; // `data` or `media-query`
 
-// Prefix for :root CSS variables
+// Prefix for ':root, :host' CSS variables
 
 $variable-prefix:             bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
 $prefix:                      $variable-prefix !default;

scss/mixins/_color-mode.scss

@@ -3,7 +3,8 @@
   @if $color-mode-type == "media-query" {
     @if $root == true {
       @media (prefers-color-scheme: $mode) {
-        :root {
+        :root,
+        :host {
           @content;
         }
       }

scss/tests/mixins/_color-modes.test.scss

@@ -57,7 +57,8 @@
           }
         }
         @media (prefers-color-scheme: dark) {
-          :root {
+          :root,
+          :host {
             --custom-color: #3a3ff8;
           }
         }