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

diff --git a/scss/_grid.scss b/scss/_grid.scss
index 048f8009a36335c4388e41cade7ff42de1c22d45..9c2e6270c5ec1e9352aebf6071206badcfa5f91c 100644 (file)
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -2,7 +2,8 @@
 //
 // Rows contain your columns.
 
-:root {
+:root,
+:host {
   @each $name, $value in $grid-breakpoints {
     --#{$prefix}breakpoint-#{$name}: #{$value};
   }

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 305740587b4d927bb197b958a2bd81f4bdf82284..f83bfba9c19da62d2448f68296aee746a0c0c3a5 100644 (file)
--- a/scss/_reboot.scss
+++ b/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));
   }

diff --git a/scss/_root.scss b/scss/_root.scss
index b82759a210c8fc139d4b0590ba6a456c9a48dd32..a10221a31e2881bfe17e0a850ddbb57e6d8bef5a 100644 (file)
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -1,4 +1,5 @@
 :root,
+:host,
 [data-bs-theme="light"] {
   // Note: Custom variable values only support SassScript inside `#{}`.
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 6f255d4042c892fe5ec83b2f012b394c96a318bc..db05cc44f583d81846ec8389bd1afcf4e74f0965 100644 (file)
--- a/scss/_variables.scss
+++ b/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;

diff --git a/scss/mixins/_color-mode.scss b/scss/mixins/_color-mode.scss
index 03338b0256759f7d71560864801cda8cadf9a4bf..822dbec1a73cfe344ceb6bc77ca8687b6a072e0c 100644 (file)
--- a/scss/mixins/_color-mode.scss
+++ b/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;
         }
       }

diff --git a/site/content/docs/5.3/customize/css-variables.md b/site/content/docs/5.3/customize/css-variables.md
index ffb40c0c4a4a014c6dc33fb888199b068a7c467a..f7466601501ffddb7120e53a66ef67184185cf6b 100644 (file)
--- a/site/content/docs/5.3/customize/css-variables.md
+++ b/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 -}}