Merge c5ea93a092 into 99a0dc628a

scss/_grid.scss

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

scss/_mixins.scss

@@ -17,6 +17,7 @@
 @import "mixins/visually-hidden";
 @import "mixins/reset-text";
 @import "mixins/text-truncate";
+@import "mixins/root";
 
 // Utilities
 @import "mixins/utilities";

scss/_reboot.scss

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

scss/_root.scss

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

scss/_variables.scss

@@ -383,6 +383,7 @@ $enable-validation-icons:     true !default;
 $enable-negative-margins:     false !default;
 $enable-deprecation-messages: true !default;
 $enable-important-utilities:  true !default;
+$enable-host:                 false !default;
 
 $enable-dark-mode:            true !default;
 $color-mode-type:             data !default; // `data` or `media-query`

scss/bootstrap-grid.scss

@@ -12,6 +12,7 @@ $include-column-box-sizing: true !default;
 @import "mixins/container";
 @import "mixins/grid";
 @import "mixins/utilities";
+@import "mixins/root";
 
 @import "vendor/rfs";
 

scss/mixins/_color-mode.scss

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

scss/mixins/_root.scss

@@ -0,0 +1,7 @@
+@mixin root($extra_selector: "") {
+  $extra_selector: if($enable-host, ":host", ":root") if($extra_selector, ", " + $extra_selector, ""); // stylelint-disable-line scss/dollar-variable-pattern
+
+  #{$extra_selector} {
+    @content;
+  }
+}

scss/tests/mixins/_root.test.scss

@@ -0,0 +1,75 @@
+@import "../../functions";
+@import "../../mixins";
+@import "../../variables";
+
+@include describe("global $enable-host: false") {
+  @include it("generates :root selector for web components") {
+    @include assert() {
+      @include output() {
+        @include root() {
+          --test: 1;
+        }
+      }
+      @include expect() {
+        :root {
+          --test: 1;
+        }
+      }
+    }
+  }
+}
+
+@include describe("global $enable-host: false") {
+  @include it("generates :root, [data-bs-theme=light] selector for web components") {
+    @include assert() {
+      @include output() {
+        @include root("[data-bs-theme=light]") {
+          --test: 1;
+        }
+      }
+      @include expect() {
+        :root,
+        [data-bs-theme="light"] {
+          --test: 1;
+        }
+      }
+    }
+  }
+}
+
+$enable-host: true !global;
+
+@include describe("global $enable-host: true") {
+  @include it("generates :host selector for web components") {
+    @include assert() {
+      @include output() {
+        @include root() {
+          --test: 1;
+        }
+      }
+      @include expect() {
+        :host {
+          --test: 1;
+        }
+      }
+    }
+  }
+}
+
+@include describe("global $enable-host: true") {
+  @include it("generates :root, [data-bs-theme=light] selector for web components") {
+    @include assert() {
+      @include output() {
+        @include root("[data-bs-theme=light]") {
+          --test: 1;
+        }
+      }
+      @include expect() {
+        :host,
+        [data-bs-theme="light"] {
+          --test: 1;
+        }
+      }
+    }
+  }
+}

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

@@ -18,35 +18,10 @@ Here are the variables we include (note that the `:root` is required) that can b
 
 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 -}}
-
-{{- if (eq (len $match) 0) -}}
-{{- errorf "Got no matches for :root in %q!" $.Page.Path -}}
-{{- end -}}
-
-{{- index $match 0 -}}
-
-{{< /root.inline >}}
-```
-
 ### Dark mode
 
 These variables are scoped to our built-in dark mode.
 
-```css
-{{< root.inline >}}
-{{- $css := readFile "dist/css/bootstrap.css" -}}
-{{- $match := findRE `\[data-bs-theme=dark\] {([^}]*)}` $css 1 -}}
-{{- if (eq (len $match) 0) -}}
-{{- errorf "Got no matches for [data-bs-theme=dark] in %q!" $.Page.Path -}}
-{{- end -}}
-{{- index $match 0 -}}
-{{< /root.inline >}}
-```
-
 ## Component variables
 
 Bootstrap 5 is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation.