From b615c45420d68e0741f9564bf3a0c50f8577ac82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Wed, 8 Feb 2023 20:56:16 +0100
Subject: [PATCH] Combine :host to :root so that Web Components can access CSS
 vars

---
 scss/_grid.scss                                  | 3 ++-
 scss/_reboot.scss                                | 3 ++-
 scss/_root.scss                                  | 1 +
 scss/_variables.scss                             | 2 +-
 scss/mixins/_color-mode.scss                     | 2 +-
 site/content/docs/5.3/customize/css-variables.md | 2 +-
 6 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/scss/_grid.scss b/scss/_grid.scss
index 048f8009a3..9c2e6270c5 100644
--- 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 305740587b..f83bfba9c1 100644
--- 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 b82759a210..a10221a31e 100644
--- 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 6f255d4042..db05cc44f5 100644
--- 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 03338b0256..822dbec1a7 100644
--- 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 ffb40c0c4a..f746660150 100644
--- 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 -}}
-- 
GitLab