Combine :host to :root so that Web Components can access CSS vars

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,7 @@
   @if $color-mode-type == "media-query" {
     @if $root == true {
       @media (prefers-color-scheme: $mode) {
-        :root {
+        :root, :host {
           @content;
         }
       }

site/content/docs/5.3/customize/css-variables.md

@@ -21,7 +21,7 @@ These CSS variables are available everywhere, regardless of color mode.
 ```css
 {{< root.inline >}}
 {{- $css := readFile "dist/css/bootstrap.css" -}}
-{{- $match := findRE `:root,\n\[data-bs-theme=light\] {([^}]*)}` $css 1 -}}
+{{- $match := findRE `:root,\n:host,\n\[data-bs-theme=light\] {([^}]*)}` $css 1 -}}
 
 {{- if (eq (len $match) 0) -}}
 {{- errorf "Got no matches for :root in %q!" $.Page.Path -}}