From 02c9fb69da411d3acefc35ff0de159228d862fd3 Mon Sep 17 00:00:00 2001
From: Robert Coup <robert@coup.net.nz>
Date: Mon, 2 Dec 2024 13:53:36 +0000
Subject: [PATCH] Support web components/shadow DOM.

Add :host to all uses of :root
---
 scss/colors/utilities/_css-vars.scss | 3 ++-
 scss/components/_modal.scss          | 3 ++-
 scss/content/_embedded.scss          | 3 ++-
 scss/layout/_document.scss           | 3 ++-
 scss/themes/default/_schemes.scss    | 6 ++++--
 scss/themes/default/_styles.scss     | 3 ++-
 6 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/scss/colors/utilities/_css-vars.scss b/scss/colors/utilities/_css-vars.scss
index 902e5044e..2fdcb134e 100644
--- a/scss/colors/utilities/_css-vars.scss
+++ b/scss/colors/utilities/_css-vars.scss
@@ -9,7 +9,8 @@
   $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
 
   @if $enable-css-vars {
-    :root {
+    :root,
+    :host {
       // Loop through color families
       @each $family, $colors in colors.$colors {
         @if index(map.get(settings.$palette, "color-families"), $family) {
diff --git a/scss/components/_modal.scss b/scss/components/_modal.scss
index 9ed05b6b4..ee2283953 100644
--- a/scss/components/_modal.scss
+++ b/scss/components/_modal.scss
@@ -6,7 +6,8 @@
    * Modal (<dialog>)
    */
 
-  :root {
+  :root,
+  :host {
     #{$css-var-prefix}scrollbar-width: 0px;
   }
 
diff --git a/scss/content/_embedded.scss b/scss/content/_embedded.scss
index 354a4c41d..6bf11af8e 100644
--- a/scss/content/_embedded.scss
+++ b/scss/content/_embedded.scss
@@ -47,7 +47,8 @@
   }
 
   // Hide the overflow in IE
-  #{$parent-selector} svg:not(:root) {
+  #{$parent-selector} svg:not(:root),
+  #{$parent-selector} svg:not(:host) {
     overflow: hidden;
   }
 }
diff --git a/scss/layout/_document.scss b/scss/layout/_document.scss
index 4677a69bc..0acb965be 100644
--- a/scss/layout/_document.scss
+++ b/scss/layout/_document.scss
@@ -34,7 +34,8 @@
   // 3. Use a 4-space tab width in all browsers (opinionated)
   // 4. Remove the grey highlight on links in iOS (opinionated)
   // 5. Prevent adjustments of font size after orientation changes in iOS
-  :where(:root) {
+  :where(:root),
+  :where(:host) {
     -webkit-tap-highlight-color: transparent; // 4
     -webkit-text-size-adjust: 100%; // 5
     text-size-adjust: 100%; // 5
diff --git a/scss/themes/default/_schemes.scss b/scss/themes/default/_schemes.scss
index 493cd39d8..295884e13 100644
--- a/scss/themes/default/_schemes.scss
+++ b/scss/themes/default/_schemes.scss
@@ -12,14 +12,16 @@
   // Light color scheme (Default)
   // Can be forced with data-theme="light"
   [data-theme="light"],
-  :root:not([data-theme="dark"]) {
+  :root:not([data-theme="dark"]),
+  :host(:not([data-theme="dark"])) {
     @include light.theme;
   }
 
   // Dark color scheme (Auto)
   // Automatically enabled if user has Dark mode enabled
   @media only screen and (prefers-color-scheme: dark) {
-    :root:not([data-theme]) {
+    :root:not([data-theme]),
+    :host(:not([data-theme])) {
       @include dark.theme;
     }
   }
diff --git a/scss/themes/default/_styles.scss b/scss/themes/default/_styles.scss
index e2687e98d..1786b1e6e 100644
--- a/scss/themes/default/_styles.scss
+++ b/scss/themes/default/_styles.scss
@@ -9,7 +9,8 @@
    * Styles
    */
 
-  :root {
+  :root,
+  :host {
     // Typography
     #{$css-var-prefix}font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
       "Noto Color Emoji";